> 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/manage-spot/embed.md).

# Embed

Ancrez votre académie au cœur de vos services en hébergeant votre Spot directement sur votre site internet ou application.

<figure><img src="https://2006110990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ79zpqfFC0YiOG6mb94n%2Fuploads%2FNciV5EG18sOIsi0CxHmi%2FCapture%20d%E2%80%99e%CC%81cran%202023-11-17%20a%CC%80%2015.51.25.png?alt=media&#x26;token=bd055708-721b-4465-b312-cec3088142e8" alt="Exemple de Spot intégré à un site internet"><figcaption><p>Exemple de Spot intégré à un site internet</p></figcaption></figure>

<figure><img src="https://2006110990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ79zpqfFC0YiOG6mb94n%2Fuploads%2F9lnm4SUhanXfHxk3VGye%2FForums.png?alt=media&#x26;token=1274452b-cf23-442a-8e8a-211326a7e10d" alt="Exemple de Spot intégré à une application"><figcaption><p>Exemple de Spot intégré à une application</p></figcaption></figure>

Pour intégrer votre Spot à une page d'un site ou d'une application, vous devrez ajouter le script que nous vous fournissons à votre code HTML. Le script étant un SDK dynamique, il prendra en compte toutes les nouveautés à venir 😉

{% hint style="success" %}
Même si votre site est construit avec un éditeur low-code, il est possible d'ajouter ce script via l'ajout d'une section de `Custom Code.`
{% endhint %}

## Implémentation

Rendez-vous dans l'onglet `Embed` des paramètres de votre Spot.

<figure><img src="https://2006110990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ79zpqfFC0YiOG6mb94n%2Fuploads%2F7kZWrOyOzpzKzzcAeRiV%2Fimage.png?alt=media&#x26;token=83edddb3-11a4-4920-84ba-1a25a27c9f48" alt="Implémentation de l&#x27;embed du Spot"><figcaption><p>Page d'implémentation de l'embed</p></figcaption></figure>

{% hint style="warning" %}
Cette fonctionnalité est réservée à certains plans payants MeltingSpot. Si vous n'avez pas accès à cet onglet, [contactez-nous.](mailto:support@meltingspot.Io)
{% endhint %}

1. **Choisissez le lieu d'intégration**

Indiquez l'URL de la page sur laquelle vous avez prévu d'intégrer le Spot, au format `https://`. *L'URL indiquée doit être celle de la page précise et non juste du domaine.*

{% hint style="info" %}
Si vous souhaitez effectuer des tests en local, utilisez dans l'URL `127.0.0.1` car les URL `localhost` sont bloquées par notre système.
{% endhint %}

2. **Ajoutez le premier script dans le header de votre code**

Copiez le script présenté et collez le dans la section `<head>` de votre page.

{% 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>

3. **Ajoutez le second script au body de votre page**

Copiez le script présenté et ajoutez-le à une section contenue dans le `<body>` de votre page.

Vous pouvez être amené à éditer 2 éléments de ce script pour paramétrer l'apparence de l'intégration :

* **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 Spot en embed.
* **Le mode d'apparence du frame (Spot 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 :

<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 Spot en mode clair.</td></tr><tr><td><code>dark</code></td><td>Tous les utilisateurs verront le Spot 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`.
{% endhint %}

💡 Vous pouvez aussi ajouter au script un paramètre `deeplink` permettant de **spécifier la page du Spot sur laquelle arriveront les utilisateurs à l'affichage du Spot en embed.**

Par exemple, ajouter au script `deeplink: '/lives'` fera arriver les utilisateurs sur la page des Lives plutôt que sur la homepage !

Si vous souhaitez debugger votre embed, vous pouvez ajouter deux callbacks

* `onReady` : → appelé quand le contenu est complètement rendu dans l'iframe
* `onError` : → appelé si une erreur de chargement survient, avec un objet { message, code? }

Exemple :

```
window.MeltingSpot.injectSpotInto('meltingspot-frame', {
    spotId: 'YOUR_SPOT_ID',
    themeMode: 'auto',
    onReady: function () {
        // Masquer un loader, tracker un event analytics, etc.
    },
    onError: function (error) {
        // Afficher un fallback, remonter l'erreur dans un outil de monitoring, etc.
    },
});
```

4. **Activez l'embed de votre Spot**

Une fois votre base URL renseignée et les 2 scripts injectés dans le code de votre page, **cliquez sur le bouton d'activation de l'embed.** Bravo, votre Spot est désormais intégré à votre page 🎉

*Tant que l'embed n'est pas activé, les utilisateurs pourront voir le frame inactif et seront redirigés via un bouton vers la version classique de votre Spot*.

## Implications

### Inscription et connection des membres

Lorsque l'embed est activé, la version classique de votre Spot `https://go.meltingspot.io/spot/${spotId}` reste utilisable. La création de compte et la connection pourront se faire depuis les 2 versions.

Si vous intégrez vote Spot au sein d'un produit disposant d'un espace connecté pour vos utilisateurs, **nous vous recommandons de mettre en place une authentification Single Sign-On pour fluidifier la navigation.** Vos utilisateurs n'auront pas besoin de changer d'identifiants pour passer de votre produit à l'embed de votre Spot.

{% content-ref url="/pages/Mp8I18JxVzQr6Qe6xnvt" %}
[Single Sign-On](/manage-spot/sso.md)
{% endcontent-ref %}

{% hint style="info" %}
Une fois le SSO configuré, il est possible de **transmettre le token JWT authentifiant l'utilisateur directement dans le script de l'embed**. Plus d'informations [ici](/manage-spot/sso.md#embed-widgets--sso).
{% endhint %}

### Navigation et création de contenu

Dans la version embed de votre Spot, la barre de navigation latérale entre Spots disparaît et une unique barre de navigation horizontale vous permet de changer de section et de gérer votre Spot et votre profil.

<figure><img src="https://2006110990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ79zpqfFC0YiOG6mb94n%2Fuploads%2FGJXDRFiMcj91mtiTPgb6%2FContent.png?alt=media&#x26;token=343343ca-2bce-4cc5-991e-16930383e04d" alt="Navigation dans le Spot en version embed"><figcaption></figcaption></figure>

Dans la version embed, **vous pouvez créer des nouveaux lives, documents, discussions et invitations de membres depuis n'importe quelle section du Spot.** Au clic sur le bouton `+` en haut à droite, le menu de création de ressources s'ouvre.

### Customisation de l'embed

Nous vous recommandons de customiser le thème de votre Spot pour fluidifier la navigation entre votre produit et votre Spot embarqué. Consultez la section suivante pour en savoir plus sur la personnalisation des couleurs et polices de son Spot :

{% content-ref url="/pages/ZSfGxjEnwBz2gjFtr78j" %}
[Thème](/manage-spot/personnalisation/theme.md)
{% endcontent-ref %}

### Partage d'URL

Partager l'URL de la page dans laquelle est intégrée votre embed renverra vers la page d'accueil de votre embed (ou la première section activée lorsque la page d'accueil est désactivée).

Si vous souhaitez partager l'URL d'un emplacement plus précis à l'intérieur de votre embed, utilisez les boutons de partage présents dans le Spot embed : au clic sur le bouton de partage, l'URL de l'emplacement est copié dans votre presse-papiers.

<figure><img src="https://2006110990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ79zpqfFC0YiOG6mb94n%2Fuploads%2FxFJscsyt9Rhdq5hjyhm2%2Fimage.png?alt=media&#x26;token=37865e41-6558-4f79-bf82-0a15467f1d14" alt="Partager un URL d&#x27;un Spot en embed" width="352"><figcaption><p>Partage d'URL depuis la barre d'outils Admin, en haut à droite</p></figcaption></figure>

Vous trouverez ce bouton de partage :

* **Dans la barre d'outils Admin**, en haut à droite de chacune de vos sections. L'URL copiée est celle de la page sur laquelle vous vous trouvez, par exemple un channel de discussion précis.
* En haut à droite de chaque **carte de Live** survolée par votre souris. L'URL copiée renvoie vers la Live Room.
* En haut à droite de chaque **carte de Sujet de forum** survolée par votre souris; et à l'intérieur du Sujet.
* En haut à droite de chaque **page de Collection** survolée par votre souris; et à l'intérieur de la page.

## Paramètres de redirection

Une fois l'embed activé, vous pouvez choisir **où seront redirigés vos membres depuis un mail de notification MeltingSpot** (invitation au Spot ou à un Live, nouveau message reçu...). En fonction du choix de redirection que vous faites, ils pourront arriver sur `https://go.meltingspot.io/spot/{spotId}` ou dans votre embed.

Ce choix de redirection se fait depuis les paramètres de votre Spot, dans l'onglet `Embed` .

<figure><img src="https://2006110990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ79zpqfFC0YiOG6mb94n%2Fuploads%2F7FNRmvUg8XaFH92ET8NY%2FCapture%20d%E2%80%99e%CC%81cran%202023-11-22%20a%CC%80%2017.55.57.png?alt=media&#x26;token=f0051600-c22b-47b2-901c-c18ab2f5dc46" alt="Redirection d&#x27;un Spot en embed"><figcaption></figcaption></figure>

3 choix s'offrent à vous :

* **Pas de redirection** : depuis un email de notification, vos membres seront toujours dirigés vers `https://go.meltingspot.io/spot/{spotId}.` Cette option est appliquée par défaut lorsque vous activez l'embed.
* **Uniquement les utilisateurs SSO** : depuis un email de notification, les utilisateurs qui se sont déjà authentifiés au moins une fois via le SSO JWT seront redirigés vers votre Spot en embed. Les autres utilisateurs seront dirigés vers `https://go.meltingspot.io/spot/{spotId}.`

{% hint style="info" %}
Cette option n'est accessible qu'après avoir configuré et activé l'authentification Single Sign-On du Spot concerné.
{% endhint %}

* **Tous les utilisateurs** : depuis un email de notification, tous vos membres seront redirigés vers votre Spot en embed.

{% hint style="success" %}
Si votre Spot est par exemple composée de prospects et de clients, activez la redirection uniquement pour les utilisateurs SSO : vos clients (authentifiés en SSO) accèderont tout le temps à votre Spot dans sa version embed; et vos prospects y accèderont dans sa version classique.
{% endhint %}

## Multi-domaines

**Il est possible d'intégrer votre Spot dans différents domaines**. Par exemple :

* Dans votre produit et dans votre site internet.
* Dans votre produit, lorsque celui-ci a des URL d'accès différents par utilisateur (`company1.acme.com` ; `company2.acme.com` ; etc.)

L'implémentation est la même que sur un seul domaine - vous devrez installez le script sur les pages souhaitées.

**Ce qui change concerne la redirection** : si vous activez une redirection `Tous les utilisateurs` ou `Uniquement les utilisateurs SSO`, vous pouvez déclarer pour chaque membre les URLs d'embed vers lesquelles il doit être redirigé. Chaque URL est identifiée par une clé : la clé `default`, utilisée notamment pour les emails de notification, et des clés personnalisées que vous nommez librement.

* **Déclarer les URLs d'un membre** : via le paramètre `domains` du [token JWT](/manage-spot/sso.md#generer-un-token-sso) (fusion à chaque connexion SSO), ou via le champ `embedBaseUrls` de l'API (remplacement complet).
* **Choisir la clé utilisée** : via le paramètre `domain` du script d'un [widget](/manage-spot/widget/implementation.md), de l'embed ou du Coach.

{% hint style="info" %}
Il n'est pas possible pour les Admins de visualiser / modifier ces URLs directement depuis la table audience de la plateforme.
{% endhint %}

### Redirection en multi-domaines

Dans les paramètres de l'embed, si la redirection est activée (`Tous les utilisateurs` ou `Uniquement les utilisateurs SSO`), chaque membre devant être redirigé sera amené sur la première URL disponible parmi :

1. Son URL correspondant à la clé `domain` indiquée dans le script du widget, de l'embed ou du Coach, si vous en avez spécifié une.
2. Son URL correspondant à la clé `default`, si vous nous en avez transmis une.
3. La `base URL` indiquée dans les paramètres d'embed du Spot.

Si vous choisissez dans les paramètres de l'embed de ne pas rediriger les utilisateurs, ceux-ci seront renvoyés vers `go.meltingspot.io/spot/votreSpotId` , et ce même si vous nous avez transmis des URLs pour ces utilisateurs !

👉 Format des clés et des URLs, exemples JWT et API, algorithme complet et cas des liens courts : [Multi-domaines et redirection des membres](/manage-spot/embed/multi-domaines.md).


---

# 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/manage-spot/embed.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.