# Integrate - No/Low Code

## Prerequisites

* You need a dashboard organization, if it's not already the case, ask kiln team so that we can onboard you.
* You need access to a Kiln Connect API key, if it's not already the case, ask kiln team so that we can onboard you. You can generate one yourself, [click here to read more](https://docs.kiln.fi/v1/kiln-products/connect/accessing-kiln-connect).
* Have some deployed products on mainnet, if it's not already the case, kiln can provide test product for your testing and trial integration. 
* Optional : have customize your widget, you can directly upload your configuration via API and soon in Kiln dashboard directly

## Configure your Widget

<details>

<summary>Configure the widget look and feel</summary>

You can [export the configuration from the editor](https://docs.kiln.fi/v1/kiln-products/customize-widget-editor#export-branding), the you just have to past this json in the API widget config endpoint to edit the widget to your configuration.&#x20;

Endpoint: <mark style="color:blue;">`PUT`</mark> <mark style="color:red;">`/v1/widget/config`</mark>

Request Body:&#x20;

```json
{
    "theme": "light", // Values: light, dark, desktop (take the broswer default) 
    "logo_url": null; // null for no logo, paste url for logo
    "rounding": "8", // use editor value 
    "widget_style": "flat+border", // use editor value 
    "card_padding": "16", // use editor value 
    "widget_width": "compact", // use editor value 
    "navigation": "segment", // use editor value 
    "font_primary": "Geist", // use editor value 
    "font_secondary": "IBM Plex Sans", // use editor value 
    "show_icons": true, // show hide icons in navigation
    "show_wallet": true, // show hide wallet selector
    "multi_chain": true, // force the wallet to only display reporting and product to only one chain
    "css_variables": {
        "--Color-Brand-Light-Primary": "rgba(255,101,33,1.00)",
        "--Color-Brand-Light-Secondary": "rgba(255,101,33,1.00)",
        "--Color-Brand-Light-Secondary-10\\%": "rgba(255,101,33,0.10)",
        "--Color-Brand-Dark-Primary": "rgba(255,101,33,1.00)",
        "--Color-Brand-Dark-Secondary": "rgba(255,101,33,1.00)",
        "--Color-Brand-Dark-Secondary-10\\%": "rgba(255,101,33,0.10)",
        "--Color-Surface-Light-Transparent": "rgba(0,0,0,0.00)",
        "--Color-Surface-Light-World": "rgba(240,240,240,1.00)",
        "--Color-Surface-Light-Primary": "rgba(255,255,255,1.00)",
        "--Color-Surface-Light-Underlay": "rgba(240,240,240,1.00)",
        "--Color-Surface-Light-Input": "rgba(255,255,255,1.00)",
        "--Color-Surface-Dark-Transparent": "rgba(0,0,0,0.00)",
        "--Color-Surface-Dark-World": "rgba(17,17,17,1.00)",
        "--Color-Surface-Dark-Primary": "rgba(21,21,21,1.00)",
        "--Color-Surface-Dark-Underlay": "rgba(32,32,32,1.00)",
        "--Color-Surface-Dark-Input": "rgba(51,51,51,1.00)",
        "--Color-Border-Light-Primary": "rgba(217,217,217,1.00)",
        "--Color-Border-Light-Secondary": "rgba(217,217,217,1.00)",
        "--Color-Border-Light-Input": "rgba(0,0,0,1.00)",
        "--Color-Border-Light-Divider": "rgba(229,229,229,1.00)",
        "--Color-Text-Light-Primary": "rgba(0,0,0,1.00)",
        "--Color-Button-Light-Primary": "var(--Color-Brand-Light-Primary)",
        "--Color-Button-Light-Primary-Text": "rgba(255,255,255,1.00)",
        "--Color-Button-Light-Secondary": "rgba(255,255,255,1.00)",
        "--Color-Button-Light-Tertiary": "rgba(255,255,255,1.00)",
        "--Color-Text-Light-Secondary": "rgba(85,85,85,1.00)",
        "--Color-Text-Light-Tertiary": "rgba(136,136,136,1.00)",
        "--Color-Text-Light-Additional": "rgba(170,170,170,1.00)",
        "--Color-Text-Light-Positive": "rgba(87,176,31,1.00)",
        "--Color-Text-Light-Negative": "rgba(252,36,36,1.00)",
        "--Radius-0": "0px",
        "--Radius-4": "4px",
        "--Radius-8": "8px",
        "--Radius-12": "12px",
        "--Radius-16": "16px",
        "--Radius-20": "20px",
        "--Radius-24": "24px",
        "--Radius-28": "28px",
        "--Radius-32": "32px",
        "--Radius-100\\%": "999%",
        "--logo": "kiln",
        "--Color-Border-Dark-Primary": "rgba(51,51,51,1.00)",
        "--Color-Border-Dark-Secondary": "rgba(51,51,51,1.00)",
        "--Color-Border-Dark-Input": "rgba(68,68,68,1.00)",
        "--Color-Border-Dark-Divider": "rgba(41,41,41,1.00)",
        "--Color-Text-Dark-Primary": "rgba(255,255,255,1.00)",
        "--Color-Text-Dark-Secondary": "rgba(169,169,169,1.00)",
        "--Color-Text-Dark-Tertiary": "rgba(136,136,136,1.00)",
        "--Color-Text-Dark-Additional": "rgba(255,255,255,1.00)",
        "--Color-Text-Dark-Positive": "rgba(87,176,31,1.00)",
        "--Color-Text-Dark-Negative": "rgba(255,61,61,1.00)",
        "--Color-Button-Dark-Primary": "var(--Color-Brand-Light-Primary)",
        "--Color-Button-Dark-Primary-Text": "rgba(255,255,255,1.00)",
        "--Color-Button-Dark-Secondary": "rgba(51,51,51,1.00)",
        "--Color-Button-Dark-Tertiary": "rgba(21,21,21,1.00)"
    }
}
```

</details>

<details>

<summary>Advanced configuration</summary>

Advanced parameters can be used to further customize your widget integration:

* **`slug`:**&#x20;

  Defining a custom sub-domain for your widget : <mark style="color:orange;">`slug.widget.kiln.fi`</mark>\
  By default the slug is your organization-id, something like: `d6309182-cbad-11ec-9d64-0242ac120002`
* **`frame_ancestor_urls`:**\
  By specifying the `frame_ancestor_urls`, you're explicitly allowing only your domain to embed Kiln Widget, enhancing security of your integration.&#x20;
* **`connector`:**\
  By default it's set to `browser` enabling the user to connect a wallet extension.  If on your platform user can't use a browser extension to connect to the Widget, Kiln will need to build a custom connector, a great example of similar setups are with Safe or Ledger Live.  If you want to build your own you can select the `iFrame` connector and follow the guide bellow.
* **`links`**:\
  By default it's set to `null` to display the default kiln T\&Cs and privacy policy. You can pass custom links here as presented in the example bellow.

Endpoint: <mark style="color:blue;">`PUT`</mark> <mark style="color:red;">`/v1/widget/config`</mark>

Request Body:&#x20;

```json
{
    "frame_ancestor_urls": [
        "my-custom-domain.com"
    ],
    "connector": "custom-connector", // Contact our team if you need a custom connector
    "slug": "super-custom", // url will be super-custom.widget.kiln.fi
    "links": [
        {
            "text": "FAQ",
            "url": "https://www.faq.com"
        },
        {
            "text": "Support",
            "url": "https://www.support.kiln.fi"
        }
    ]
}
```

</details>

## Integrate your Widget

{% hint style="info" %}
To integrate kiln widget in your platform, you just need to embed you widget URL in an iFrame, it can work on any tech stack and even in no-code tools.&#x20;
{% endhint %}

<details>

<summary>React code sample demonstrating how to embed "kiln.widget.kiln.fi" in an iframe</summary>

```jsx
const KilnWidget = () => {
  return (
      <iframe
        src="https://kiln.widget.kiln.fi"
        title="Kiln Widget"
        allow="clipboard-write"
        style={{ width:"100vw", height:"100vh"}}
      />
  );
};

export default KilnWidget;
```

This code creates a React component called `KilnWidget` that embeds the "kiln.widget.kiln.fi" widget in an iframe. <br>

You can find an example integration with a connector : `iframe`  here.

* <https://github.com/kilnfi/kiln-widget-integration-example?tab=readme-ov-file#rpc-message-handling>&#x20;

</details>

## Deeplinks&#x20;

Kiln provides a **deeplink mechanism** that allows seamless redirection into the different pages between **overview**, **deposit and withdraw.**&#x20;

To enhance your platform's capabilities, consider integrating specific features of the Kiln Widget. For instance, if you already have an existing native earn section, you can redirect users to the Kiln Widget for deposit transactions. After a transaction is signed, seamlessly bring the user back to your platform.

### Your widget base url

Access your widget using the configured <mark style="color:orange;">`slug`</mark> , this will automatically pull your configuration including theme and available earn products. In this document we refer to this as "base url" or "your widget".&#x20;

Structure: <kbd>https\://</kbd><kbd><mark style="color:orange;">slug<mark style="color:orange;"></kbd><kbd>.widget.kiln.fi/</kbd>&#x20;

Example: [<kbd>https://</kbd><kbd><mark style="color:orange;">iframe<mark style="color:orange;"></kbd><kbd>.widget.testnet.kiln.fi/</kbd>](https://iframe.widget.testnet.kiln.fi/) , a Kiln managed configuration for testing the widget in an iframe.

### Portfolio

By default if you redirect the user to "your widget" the overview page, it's will show all the user active and potential position based on the products you enabled in your widget.&#x20;

To redirect the user to this page you need to add the `/overview` after your base URL.

Structure: <kbd>https\://</kbd><kbd><mark style="color:orange;">slug<mark style="color:orange;"></kbd><kbd>.widget.kiln.fi</kbd><kbd><mark style="color:blue;">/overview<mark style="color:blue;"></kbd>

<figure><img src="https://1911902555-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fnye3yqpuOzdfrtWAlwng%2Fuploads%2FxKNMFkcwdA3PYZEE8vKu%2Fimage.png?alt=media&#x26;token=8656a9cc-2fa0-4d28-8df7-6d7385ce69ac" alt=""><figcaption></figcaption></figure>

### Manage

By default if you redirect the user to "your widget" the overview page, it's will show all the user active and potential position based on the products you enabled in your widget.&#x20;

To redirect the user to the manage page you need to add the `/overview` after your base URL.

Structure: <kbd>https\://</kbd><kbd><mark style="color:orange;">slug<mark style="color:orange;"></kbd><kbd>.widget.kiln.fi</kbd><kbd><mark style="color:blue;">/overview/<mark style="color:blue;"></kbd><kbd><mark style="color:purple;">{product}<mark style="color:purple;"></kbd><kbd><mark style="color:blue;">/<mark style="color:blue;"></kbd><kbd><mark style="color:red;">{product\_id}<mark style="color:red;"></kbd>

* <mark style="color:purple;">`product`</mark> is define in the deployment endpoint and can be one of `dedicated` / `pooling` / `defi`
* <mark style="color:red;">`product_id`</mark> valid vault ID in the format `<chainId>_<vaultAddress>`
  * eg. `1_0xd88714e295da03a07bcb8ad4a4dbe87fa42d75f9`

Example opening a Morpho Vault:

* [`https://`<mark style="color:orange;">`iframe`</mark>`.widget.testnet.kiln.fi/overview/`<mark style="color:purple;">`defi`</mark>`/`<mark style="color:red;">`8453_0x390D077f8E60ffb58805420edc635670AA4f34C3`</mark>](https://iframe.widget.testnet.kiln.fi/overview/defi/8453_0x390D077f8E60ffb58805420edc635670AA4f34C3)&#x20;

<figure><img src="https://1911902555-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fnye3yqpuOzdfrtWAlwng%2Fuploads%2Fl0MotNmLmpf4p5FhfPDL%2Fimage.png?alt=media&#x26;token=74493b88-ce99-4e50-ab52-45bb895a3ada" alt=""><figcaption></figcaption></figure>

### Deposit

If you want to open the widget direct on the deposit flow, you will need to add `/earn` after your base URL.&#x20;

Structure: <kbd>https\://</kbd><kbd><mark style="color:orange;">slug<mark style="color:orange;"></kbd><kbd>.widget.kiln.fi</kbd><kbd><mark style="color:blue;">/earn<mark style="color:blue;"></kbd>

<figure><img src="https://1911902555-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fnye3yqpuOzdfrtWAlwng%2Fuploads%2FJ2Dr3YnOdsoAhxZkwivf%2Fimage.png?alt=media&#x26;token=8a8dbfc6-323e-494e-b3d4-fa8b20bf4183" alt=""><figcaption></figcaption></figure>

On this page, you can use the following path params to further customize the deposit flow.

Here’s the improved **Kiln Widget Deeplink Integration Guide** with a **clearer query parameters table**, **better type definitions**, **select options**, **detailed descriptions**, and **examples**.

<table><thead><tr><th>Parameter</th><th>Allowed Values</th><th>Description</th><th>Example</th><th data-hidden>Type &#x26; Format</th></tr></thead><tbody><tr><td><code>select_deployment</code></td><td><code>"disabled"</code> or unspecified</td><td>Controls whether users can <strong>select a deployment</strong>. If <code>"disabled"</code>, the deployment selection is locked.</td><td><code>select_deployment=disabled</code></td><td><code>string</code></td></tr><tr><td><code>select_asset</code></td><td><code>"disabled"</code> or unspecified</td><td>Controls whether users can <strong>select an asset</strong>. If <code>"disabled"</code>, the asset selection is locked.</td><td><code>select_asset=disabled</code></td><td><code>string</code></td></tr><tr><td><code>product_id</code></td><td>Valid product ID in the format <code>&#x3C;chainId>_&#x3C;vaultAddress></code></td><td>Predefines the deployment to use.</td><td><code>deployment_id=1_0xabc123456789...</code></td><td><code>string</code> (<code>${number}_0x${string}</code>)</td></tr><tr><td><code>asset_id</code></td><td>Valid asset ID in the format <code>&#x3C;chainId>_&#x3C;assetAddress></code></td><td>Predefines the asset to deposit.</td><td><code>asset_id=1_0xdef456789abc...</code></td><td><code>string</code> (<code>${number}_0x${string}</code>)</td></tr><tr><td><code>callback_title</code></td><td>Any string</td><td>The text displayed on the return button after deposit.</td><td><code>callback_title=Back+to+Dashboard</code></td><td><code>string</code></td></tr><tr><td><code>callback_url</code></td><td>Valid HTTPS URL</td><td>The URL where the user is redirected after deposit completion.</td><td><code>callback_url=https://yourapp.com/dashboard</code></td><td><code>string (URL)</code></td></tr></tbody></table>

***

**Example Deeplinks**

#### **1. Allow full Selection**

Users can **freely choose** deployment and asset:

```
https://iframe.widget.testnet.kiln.fi/earn
```

#### **2. Predefine vault and asset**

Locking a **specific vault and asset**:

```
https://iframe.widget.testnet.kiln.fi/earn?product_id=8453_0x390D077f8E60ffb58805420edc635670AA4f34C3&asset_id=8453_0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913
```

#### **3. Disable deployment and asset selection**

Prevent users from changing the **predefined** values:

```
https://iframe.widget.testnet.kiln.fi/earn?select_deployment=disabled&select_asset=disabled
```

#### **4. Redirect users after deposit**

Automatically send users back to your **app** after completing the deposit using `callback_url` :

```
https://slug.widget.kiln.fi/earn?product_id=1_0xabc123...&asset_id=1_0xdef456...&callback_title=Back+to+App&callback_url=https://yourapp.com/dashboard
```

### Withdraw

If you want to open the widget direct on the withdraw flow, you will need to add `/withdraw` after your base URL.&#x20;

Structure: <kbd>https\://</kbd><kbd><mark style="color:orange;">slug<mark style="color:orange;"></kbd><kbd>.widget.kiln.fi</kbd><kbd><mark style="color:blue;">/withdraw<mark style="color:blue;"></kbd>

You can use the path parameters defined above, notably : `product_id` , `callback_title` , `callback_url` .