# Widget Customizer Guide

The [**Widget Customizer**](https://widget.coindisco.com/customizeUx/?defaultAsset=btc\&defaultNetwork=bitcoin) allows you to visually configure your Coindisco widget without writing any code.

* Right side: Live **Preview** of how your widget will look after applying settings.
* Left side: The **Options Panel**, divided into two groups — **Technical Settings** and **UI Settings**.

{% stepper %}
{% step %}

### ⚙️ Technical Settings — Overview

Technical Settings define how your widget behaves — what assets, currencies, networks, and providers it uses. The sections below let you configure behavior, defaults, networks, wallets, providers, and inclusions/exclusions.
{% endstep %}

{% step %}

### Widget Configuration

This section contains three core parameters and a reset button.

**Environment**

* Choose between **Production** and **Test**.
* **Production** is selected by default.
* When switching to **Test**, you’ll see a message in the preview that all transactions are simulated.
* Use **Test** mode for development and **Production** mode for live transactions.

**Mode**

* Defines what operations your widget supports:
  * **Buy** – users can purchase crypto.
  * **Sell** – users can sell crypto.
  * **Buy & Sell** – both directions enabled.

**Public Key**

* Enter your **API key** (public key) obtained from Coindisco.
  * Production keys start with `PK_prod_...`
  * Test keys start with `PK_test_...`
* The correct key must match the selected environment.
* Use **Reset Changes** to clear your selections.
  {% endstep %}

{% step %}

### Default Asset

* Choose which crypto asset is pre-selected when the widget loads.
* You can select from the dropdown list or use the **search** field to find a specific coin.
  {% endstep %}

{% step %}

### Default Fiat

* Select the default fiat currency for transactions (e.g., USD, EUR, PLN).
* Search or pick from the list.
  {% endstep %}

{% step %}

### Default Payment Method

* Define which payment method (e.g., card, Apple Pay, SEPA) appears by default.
* Use the **search** field or pick from the dropdown list.
  {% endstep %}

{% step %}

### Network Configurations

* Choose which blockchain networks are enabled for your widget.
* By default, **all networks are selected**.
* Options:
  * **Deselect All**
  * Toggle individual networks on or off
    {% endstep %}

{% step %}

### Wallet Configuration

* Predefine a wallet for the user:
  * Select the **network** where the wallet is located.
  * Enter the **wallet address**.
* The widget will load with this wallet prefilled.
  {% endstep %}

{% step %}

### Provider Configuration

* Choose which liquidity **providers** the widget can use.
* Coindisco currently supports **11 providers**, all selected by default.
* Options:
  * **Deselect All**
  * Enable/disable individual providers
  * Search by provider name
    {% endstep %}

{% step %}

### Include / Exclude Settings

These options allow fine-tuning of which assets, payment methods, and currencies are visible or hidden in your widget.

**Exclude Cryptoassets**

* Select assets you **do not** want to offer.
* All assets are available by default.
* Use search or “Select All” to exclude multiple items.

**Include Cryptoassets**

* Select assets you **want to offer**.
* Works the same as above but includes only the chosen ones.

**Exclude Payment Methods**

* Define which payment methods will **not** appear to users.

**Include Payment Methods**

* Select payment methods that **will** be available in the widget.

**Exclude Fiat Currencies**

* Choose which fiat currencies users **cannot** select.

**Include Fiat Currencies**

* Choose which fiat currencies **will be available**.
* You can **Select All** or choose individually via search.
  {% endstep %}
  {% endstepper %}

***

## 🖌️ UI Settings

The **UI Settings** section defines the visual appearance of your widget — colors, theme, and layout.

{% stepper %}
{% step %}

#### Preset Themes

* Choose from **six predefined themes**.
* Applying a theme automatically adjusts all colors and visual parameters.
  {% endstep %}

{% step %}

#### Custom Theme

Manually configure the widget’s look by setting color codes for elements such as:

* Background color
* Border color
* Button background color
* Error color
* Focus color
* and many more…

To edit a color:

{% stepper %}
{% step %}
Select the element you want to change.
{% endstep %}

{% step %}
Click **Edit**.
{% endstep %}

{% step %}
Enter a HEX or RGB color code.
{% endstep %}

{% step %}
The preview updates instantly.
{% endstep %}
{% endstepper %}
{% endstep %}
{% endstepper %}

***

## ✅ Final Step — Get Widget URL

{% stepper %}
{% step %}
Click the **green “Get Widget URL”** button (bottom-right corner).
{% endstep %}

{% step %}
The system generates a **Widget URL** that includes all your chosen parameters.
{% endstep %}

{% step %}
Copy this URL and:

* Embed it in your website (e.g., as an ), or
* Use it as a redirect link in your app or wallet.

This URL makes your configured widget ready for immediate use — anywhere you need it.
{% endstep %}
{% endstepper %}

***

## 🧾 Summary

| Category               | Description                                                                    |
| ---------------------- | ------------------------------------------------------------------------------ |
| **Technical Settings** | Define the widget’s environment, keys, assets, currencies, networks, providers |
| **UI Settings**        | Customize visuals: theme, colors, layout                                       |
| **Widget URL**         | Final output containing all selected parameters                                |

Your configured widget is now ready to integrate seamlessly into your website or application.


---

# 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://coindisco.gitbook.io/coindisco/widget-integration/widget-customizer-guide.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.