# Implementation

Once you've created your widget on MeltingSpot, you can embed it in the page of your choice. Depending on the type of widget you've chosen (`embed`, `drawer` or `modal` ), your widget won't integrate in the same way. It's up to you to select the rendering mode that suits you best!

{% hint style="info" %}
`Drawer` and `modal` widgets open with a button. It's up to you to adapt the integration of your widget to your needs. For example, you can trigger automatic opening without the user having to click on the button.
{% endhint %}

## Get code&#x20;

You can get a widget's code by clicking on the `Get code` button, from 2 different locations:&#x20;

* The widget preview window.&#x20;
* The widget card in the widget list.&#x20;

A menu opens. This menu offers 2 different ways of getting the code:&#x20;

* `Send instructions`: opens your mailbox with a pre-written email containing your widget's code.
* `Copy code`: opens a window containing your widget's code. You can copy any part of the code by clicking on Copy.

This code is in two parts and will enable you to integrate your widget into your application or website.

## **Add the first script to your code header**

Copy the script and paste it into the `<head>` section of your page.

{% hint style="info" %}
In most low-code editors, the section can be edited from the page or site settings.
{% endhint %}

<figure><img src="https://3055204660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrzBxnWaSListMwx3rzKu%2Fuploads%2FevwYkFv2sRuvcIzMVTzE%2Fimage%20(2).png?alt=media&#x26;token=470aa6c3-96ba-459f-a0a2-b2c2faa6e1b7" alt="Embed head script in Webflow page settings"><figcaption><p>Editing the &#x3C;head> in <strong>Webflow</strong> page settings</p></figcaption></figure>

## **Add the second script to your page body**

Copy the script shown and paste it into a frame in the `<body>` of your page.&#x20;

{% hint style="info" %}
If it's a `Modale` or `Drawer` widget, the script is in 2 parts:&#x20;

* The button part, which corresponds to what's in the tags `<button>`.&#x20;
* The modal or drawer part, which corresponds to what's in the tags `<script>`.
  {% endhint %}

You may need to edit some elements of this script to configure your widget's design, integration and redirection settings:

* **Your frame size**. By default, your frame fills its parent element due to the setting `style="width:100%;height:100%"`. You can change this setting, but we recommend you edit the size of its parent element.&#x20;
* **Appearance mode (light or dark theme)**. By default, `themeMode` is set to the value `Auto`. You can change it to one of the following options:

<table><thead><tr><th width="194.5">themeMode</th><th>Description</th></tr></thead><tbody><tr><td><code>auto</code></td><td>The user's system mode, unless they specify it otherwise in their profile settings. </td></tr><tr><td><code>system</code></td><td>The user's system mode. </td></tr><tr><td><code>light</code></td><td>All users will be in light mode. </td></tr><tr><td><code>dark</code></td><td>All users will be in dark mode. </td></tr></tbody></table>

{% hint style="success" %}
For instance, if you embed your Spot into a white interface, we recommend you set `themeMode` to `light`.
{% endhint %}

* **The user's redirection domain**: this parameter **only concerns Spots for which an embed has been set up on several domains**. If you've sent us one or more domain keys via JWT token or API, you will be able to use this feature. ([👉 Know more about multi-domain embed here](https://help.meltingspot.io/english/embed#multi-domains)). \
  Redirect the user who clicks on a widget to the domain of your choice by indicating the **domain key** in the script, as follows:

```
domain: 'customContext’
```

{% hint style="info" %}
If we don't find a match between the indicated key and the domains to which the user has access, he'll be redirected to his default domain - or to the embed base URL if he doesn't have one.
{% endhint %}
