# Widget Studio

Widget Studio is an interactive configuration tool that helps you customize your Blockend Widget visually. Instead of manually writing JSON configuration objects, you can use the intuitive interface to:

* ✨ Customize themes and colors
* 🎨 Style container and gradients
* ⚙️ Set default chains and tokens
* 📝 Generate configuration code
* 🔄 Import/export configurations

#### Access Widget Studio

Visit our Widget Studio

{% embed url="<https://studio.lazy.exchange/>" %}

#### Key Features

**Visual Theme Editor**

* Switch between light/dark themes
* Create custom color schemes
* Customize text, background, and border colors
* Real-time preview of changes

**Styling Controls**

* Container border and shadow customization
* Gradient background configuration
* Typography and font settings
* Heading text and positioning

**Configuration Management**

* **Copy Configuration**: Export your settings as JSON
* **Paste Your Config**: Import existing configurations
* **Reset**: Return to default settings
* **Live Preview**: See changes instantly

**Default Chain & Token Setup**

* Set default source and destination chains
* Configure default token addresses
* Prevent same-chain selection errors

#### How to Use

1. **Open Widget Studio** and start with the default configuration
2. **Customize Settings** using the Design tab controls
3. **Preview Changes** in real-time on the widget
4. **Copy Configuration** from the Code tab
5. **Integrate** the configuration into your app

#### Integration Example

After customizing in Widget Studio, copy the generated configuration:

```javascript
import Blockend from "@blockend/widget";
import "@blockend/widget/dist/style.css";

// Configuration generated from Widget Studio
const configuration = {
  integratorId: "YOUR_INTEGRATOR_ID",
  theme: "dark",
  gradientStyle: {
    background: "linear-gradient(135deg, #2CFFE4, #A45EFF)",
    spinnerColor: "#2CFFE4",
    stopColor: "#A45EFF"
  },
  containerStyle: {
    border: "1px solid #353535",
    borderRadius: "12px"
  },
  defaultChains: {
    from: { chainId: "1" },
    to: { chainId: "10" }
  }
  // ... other customizations
};

export const Home = () => {
  return <Blockend configuration={configuration} />;
};
```

#### Import/Export Configurations

**Exporting Configuration**

1. Customize your widget in the Design tab
2. Navigate to the Code tab
3. Click the copy icon to copy the configuration JSON
4. Save it for future use or sharing

**Importing Configuration**

1. Navigate to the Code tab
2. Scroll to "Paste Your Config" section
3. Paste your JSON configuration
4. Click "Paste Your Config" to apply
5. Widget updates instantly with your settings


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.blockend.com/compass-widgets/widget-pro/widget-studio.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.