🧩Embed
Ancrez la communauté au cœur de vos services en hébergeant votre Spot directement sur votre site internet ou application.
Dernière mise à jour
Cet article vous a-t-il été utile ?
Ancrez la communauté au cœur de vos services en hébergeant votre Spot directement sur votre site internet ou application.
Dernière mise à jour
Cet article vous a-t-il été utile ?
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.
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.
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.
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 :
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.
💡 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 !
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.
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.
🔑Single Sign-OnUne 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.
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.
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 :
✨ThèmePartager 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.
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.
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 : pour une utilisation optimale, il vous faudra nous transmettre les noms de domaines sur lesquels vous souhaitez que chaque utilisateur soit redirigé (au clic sur un email ou sur un widget), si vous activez une redirection "Pour tous les utilisateurs" ou "Uniquement les utilisateurs SSO".
Pour nous transmettre le(s) domaine(s) d'embed sur lesquels chacun de vos membres devra être redirigé, vous pouvez utiliser l'un des moyens suivants :
Via token JWT (pour les membres s'authentifiant via SSO)
A chaque authentification SSO, vous pourrez ajouter / retirer au membre son /ses domaines d'accès en les spécifiant dans le paramètre domains du token. 👉 Doc ici.
Via API (pour tous les membres) Vous pouvez utiliser notre endpoint d'édition d'un membre pour y updater ses domaines d'accès. 👉 Doc ici.
Dans le script d'un widget Vous pouvez 'forcer' au niveau du widget le domaine vers lequel rediriger l'utilisateur au clic, en transmettant dans le script une clé de domaine existante. 👉 Doc ici.
Il n'est pas possible pour les Admins de visualiser / modifier les domaines directement depuis la table audience de la plateforme.
Dans les paramètres de l'embed, si la redirection est activée (Pour tous les utilisateurs ou Uniquement pour les utilisateurs SSO), chaque membre devant être redirigé sera amené, au clic sur un email ou sur un widget :
Sur le domain indiqué dans le script du widget si vous en avez spécifié un. (prime sur le potentiel domaine par défaut du membre ou la base URL du Spot).
Sur son domain par défaut, si vous nous en avez transmis un. (prime sur la base URL du Spot)
Sur la base URL indiquée dans le Spot dans les paramètres d'embed, si nous ne disposons pas d'autre domaine pour le membre.
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 domaines pour ces utilisateurs !
