# Implémentation

Une fois votre widget créé sur MeltingSpot, vous pouvez l'intégrer dans la page de votre choix. Selon le type de widget que vous avez choisi (`embed`, `drawer` ou `modale` ), votre widget ne s'intégrera pas de la même façon. A vous de choisir le mode de rendu qui vous convient le mieux !&#x20;

{% hint style="info" %}
Les widgets de type de `drawer` ou `modale` s'ouvre avec un bouton. A vous ensuite d'adapter l'intégration de votre widget selon vos besoin. Vous pouvez par exemple déclencher l'ouverture de manière automatique sans que l'utilisateur ait besoin de cliquer sur le bouton.&#x20;
{% endhint %}

## Récupérer le code

Vous pouvez récupérer le code d'un widget en cliquant sur le bouton `Récupérer le code`, depuis 2 endroits différents :&#x20;

* La fenêtre d'aperçu du widget.
* La carte d'un widget dans la liste des widgets.

Un menu s'ouvre. Ce menu vous propose 2 façons différentes de récupérer le code :

* `Envoyer les instructions` : permet d'ouvrir votre boite mail avec un email pré-rédigé contenant le code de votre widget.
* `Copier le code` : permet d'ouvrir une fenêtre contenant le code de votre widget. Vous pouvez copier les 2 morceaux du code en cliquant sur `Copier`.&#x20;

Ce code est en deux parties et va vous permettre d'intégrer votre widget à votre application ou site internet.

## **Ajoutez le premier script dans le header de votre code**

Copiez le premier script présenté et collez le dans la section `<head>` de votre page.&#x20;

{% hint style="info" %}
Dans la plupart des éditeurs low-code, la modification de la section `<head>` se fait depuis les paramètres de la page ou du site.
{% endhint %}

<figure><img src="https://2006110990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ79zpqfFC0YiOG6mb94n%2Fuploads%2FUCFITkOd7NBwJH3YCMiT%2Fimage.png?alt=media&#x26;token=40c8b3ba-a298-476a-9bf0-558ada6081ac" alt="Edition du header depuis les settings d&#x27;une page sur Webflow "><figcaption><p>Edition du header depuis les settings d'une page sur <strong>Webflow</strong> </p></figcaption></figure>

## **Ajoutez le second script au body de votre page**

Copiez le second script présenté et ajoutez-le à une section (un frame) contenue dans le `<body>` de votre page.&#x20;

{% hint style="info" %}
Si il s'agit d'un widget de type `Modale` ou `Drawer`, le script est en 2 parties :&#x20;

* La partie bouton qui correspond à ce qu'il y a dans les balises `<button>`.
* La partie modale ou drawer qui correspond à ce qu'il y a dans les balises `<script>`.
  {% endhint %}

Vous pouvez être amenés à éditer plusieurs éléments de ce script pour paramétrer l'apparence de votre widget et son intégration :&#x20;

* **La taille du frame**. Par défaut, le `style="width:100%;height:100%"` fait prendre au frame 100% de l'espace disponible dans son élément parent. Vous pouvez changer ce paramètre mais nous **recommandons de modifier le style de l'élément parent** pour changer la taille de votre widget.&#x20;
* **Le mode d'apparence du frame (widget clair ou sombre)**. Par défaut le `themeMode` prend la valeur `Auto`, mais vous pouvez éditer sa valeur pour lui faire prendre l'une des 4 options suivantes :&#x20;

<table><thead><tr><th width="194.5">themeMode</th><th>Description</th></tr></thead><tbody><tr><td><code>auto</code></td><td>Reprend le mode de l'appareil de l'utilisateur, sauf lorsque celui-ci indique une autre préférence dans ses paramètres profil.</td></tr><tr><td><code>system</code></td><td>Reprend le mode de l'appareil de l'utilisateur.</td></tr><tr><td><code>light</code></td><td>Tous les utilisateurs verront le widget en mode clair. </td></tr><tr><td><code>dark</code></td><td>Tous les utilisateurs verront le widget en mode sombre.</td></tr></tbody></table>

{% hint style="success" %}
Par exemple, si l'interface dans laquelle vous intégrez le frame est blanche, nous recommandons de paramétrer le `themeMode` sur `light`.&#x20;
{% endhint %}

* **Le domaine de redirection de l'utilisateur :** ce paramètre concerne **uniquement les Spots pour lesquels un embed a été effectué sur plusieurs domaines**. Si vous nous avez transmis via token JWT ou via API une ou plusieurs clés de domaines, cette fonctionnalité vous est accessible. ([Plus de détails sur le multi-domaines ici](https://help.meltingspot.io/manage-spot/embed#multi-domaines)).\
  Redirigez l'utilisateur qui cliquera sur un widget vers le domaine de votre choix en indiquant **la clé du domaine** dans le script, de cette manière :&#x20;

```html
domain: 'customContext’
```

{% hint style="info" %}
Si nous ne trouvons pas de correspondance entre la clé indiquée et les domaines auquel l'utilisateur a accès, il sera redirigé vers son domaine par défaut - ou vers la base URL de l'embed s'il n'en dispose pas.&#x20;
{% endhint %}


---

# 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://help.meltingspot.io/manage-spot/widget/implementation.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.
