> For the complete documentation index, see [llms.txt](https://help.meltingspot.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.meltingspot.io/english/manage-spot/widget/implementation.md).

# 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

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

* The widget preview window.
* The widget card in the widget list.

A menu opens. This menu offers 2 different ways of getting the code:

* `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.

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

* The button part, which corresponds to what's in the tags `<button>`.
* 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.
* **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 (`domain`)**: this parameter **only concerns Spots embedded on several domains**, for which you have declared per-member embed URLs (via JWT token or API). Set in the script **the key** of the URL to redirect the user to when they click on a widget content, as follows:

```javascript
domain: 'customContext',
```

{% hint style="info" %}
The key is looked up among the embed URLs of the member who clicks. Keys are case-sensitive. If the key doesn't exist for this member, they are redirected to their `default` URL, or to the embed base URL if they don't have one.

👉 Full details in [Multi-domains and member redirection](/english/manage-spot/embed/multi-domains.md).
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://help.meltingspot.io/english/manage-spot/widget/implementation.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.