🧩Embed

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

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 😉

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.

Implémentation

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

Cette fonctionnalité est réservée à certains plans payants MeltingSpot. Si vous n'avez pas accès à cet onglet, contactez-nous.

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.

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.

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.

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é.e à é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 :

themeMode Description

themeMode	Description
`auto`	Reprend le mode de l'appareil de l'utilisateur, sauf lorsque celui-ci indique une autre préférence dans ses paramètres profil.
`system`	Reprend le mode de l'appareil de l'utilisateur.
`light`	Tous les utilisateurs verront le Spot en mode clair.
`dark`	Tous les utilisateurs verront le Spot en mode sombre.

auto

Reprend le mode de l'appareil de l'utilisateur, sauf lorsque celui-ci indique une autre préférence dans ses paramètres profil.

system

Reprend le mode de l'appareil de l'utilisateur.

light

Tous les utilisateurs verront le Spot en mode clair.

dark

Tous les utilisateurs verront le Spot en mode sombre.

Par exemple, si l'interface dans laquelle vous intégrez le frame est blanche, nous recommandons de paramétrer le themeMode sur light.

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 la communauté 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.

🔑pageSingle Sign-On

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.

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 communauté embarquée. Consultez la section suivante pour en savoir plus sur la personnalisation des couleurs et polices de son Spot :

✨pageThème

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 .

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 authentifiés via SSO seront redirigés vers votre Spot en embed. Les autres utilisateurs seront dirigés vers https://go.meltingspot.io/spot/{spotId}.

Cette option n'est accessible qu'après avoir configuré et activé l'authentification Single Sign-On du Spot concerné.

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

Si votre communauté 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.

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.

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.