💁♂️Widget
Intégrez une sélection de contenus de votre Spot là où vous le souhaitez dans votre produit ou site internet; afin d'atteindre vos utilisateurs au bon endroit et au bon moment.
Dernière mise à jour
Intégrez une sélection de contenus de votre Spot là où vous le souhaitez dans votre produit ou site internet; afin d'atteindre vos utilisateurs au bon endroit et au bon moment.
Dernière mise à jour
Un widget peut regrouper à la fois des zones de textes et des ressources de votre spot comme une page, un Live, un forum etc. Il peut être intégré à n'importe quelle page de votre produit ou site en y plaçant un script au format HTML.
Vous trouverez vos widgets dans la section Embed des paramètres de votre Spot, puis dans l'onglet Widget. Depuis cette page, vous pourrez créer de nouveaux widgets et retrouver l'ensemble de vos widgets.
Cette fonctionnalité est réservée à certains plans payants MeltingSpot. Si vous n'avez pas accès à cet onglet, contactez-nous.
Pour créer un widget, cliquez sur le bouton Nouveau en haut à droite. Un panneau latéral permettant de créer un nouveau widget s'ouvre :
Choisissez le mode de rendu de votre widget :
Embed : le widget est sous forme d'embed, vous pouvez l'intégrer n'importe où sur votre site ou votre application.
Modale : le widget est dans une fenêtre qui s'ouvrira au clic sur un bouton.
Drawer : le widget est dans un panneau latéral qui s'ouvrira au clic sur un bouton.
Donnez un titre. 💡 Ce titre ne sera pas visible dans le widget intégré au sein de votre application.
Ajoutez des sections à votre widget.
Bon à savoir :
Par défaut le widget contient une zone texte et 2 zones pour ajouter des ressources.
Vous pouvez ajouter jusqu'à 40 sections par widget.
Pour ajouter une section, cliquez sur l'un des 2 boutons en bas du drawer :
Section texte : permet d'ajouter une zone de texte dans laquelle vous pourrez insérer des images, des vidéos, des liens...
Contenu du Spot : permet d'ajouter une ressource du Spot. Grâce à la barre de recherche, vous pouvez trouvez rapidement le contenu que vous chercher.
Chaque sectionContenu du Spot est affichée sous la forme d'une carte cliquable qui permet d'ouvrir le contenu sélectionné par l'admin. Chaque carte contient les informations essentielles sur le contenu en questions.
| Type de contenu | Informations affichées |
|---|---|
Forum | - L’icon, le titre et la description du forum - Un tag - Le nombre de topics dans le forum |
Topic | - Le titre et la description du topic - L’icon et le nom du forum auquel il appartient - Le score du topic et le nombre de réponses à ce topic |
Channel | - L’icone, le titre et la description du channel - Un tag - Le nombre de messages dans le channel |
Collection | - L’icone, le titre et la description de la collection - Un tag - Le nombre de pages et de liens dans la collection |
Page | - La cover et le titre de la page - L’icone et le nom de la collection - Le nombre de message sur cette page |
Links | - La cover et le titre du lien - L’icone et le nom de la collection |
Lives | - La cover, le titre, la date et l’heure du live - Le type de live (Workshop, Conference) et son statut ( - Le nombre de message sur ce live |
Cours | - La cover, le titre et la descripiton du cours - Un tag |
Bon à savoir :
Si un contenu est supprimé par l'admin sur le Spot, alors celui-ci n'est plus listé dans le widget.
Vous pouvez modifier l'ordre des sections en "drag and drop" : cliquez sur la grille de point à gauche de l'élément et dépacez votre souris.
Vous pouvez supprimer une section d'un widget en cliquant sur l'icon Delete à droite de la section.
Vous pouvez modifier un widget depuis deux endroits différents :
Depuis la liste des widgets, en cliquant sur les trois petits points à droite de la carte d'un widget puis sur Modifier.
Depuis la fenêtre d'Aperçu du widget, en cliquant sur le bouton Modifier.
Le panneau latéral d'édition du widget s'ouvre, vous pouvez alors :
Modifier le type de rendu du widget. Attention, changer le type de widget implique de devoir mettre à jour le code.
Modifier le titre du widget.
Modifier l'ordre des sections qui composent le widget.
Ajouter des sections (texte ou contenu du Spot).
Modifier le contenu d'une section texte (Attention, vous ne pouvez pas modifier une section contenu du Spot, vous ne pouvez que la déplacer ou la supprimer).
Supprimer une section du widget. Attention, toute suppression est définitive !
Une fois toutes vos modifications faites, cliquez sur le bouton Enregistrer.
L'aperçu du widget dépend du type de rendu de ce dernier :
Si il s'agit d'un widget de type Embed ou Modale : Au clic sur la carte d’un widget, une fenêtre s'ouvre. Dans cette fenêtre, vous pouvez voir un aperçu du rendu du widget dans votre application ou site (dans le cas de l'embed, des zones grises matérialisent le contenu de votre site).
Si il s'agit d'un widget de type Drawer : Au clic sur la carte d’un widget, un panneau latéral s'ouvre. Vous pouvez y voir un aperçu du rendu du widget dans votre application ou site.
Dans la zone du bas de la modale, il y a plusieurs boutons :
Obtenir le code : vous donne le choix entre envoyer le code du widget directement par mail (avec le bouton Envoyer les instructions) ou récupérer et copier le code du widget (avec le bouton Copier le code)
Modifier : vous permet d'ouvrir le panneau latéral d'édition.
Dans votre site ou votre application, de nombreux membres pourront accéder à votre widget. Pas de panique, ils ne verront que les contenus auquel ils ont accès dans le Spot :
Si le membre est connecté, il verra tous les contenus pour lesquels il a les droits.
Si le membre n'est pas connecté, il voit les contenus visibles par un visiteur (à savoir les lives publics) et les Sections texte.
Pour vous assurer que l'utilisateur voit l'ensemble des contenus du widget en étant connecté, nous vous recommandons de mettre en place une authentification SSO dans l'espace d'intégration du widget.
🔑Single Sign-OnUne fois le SSO configuré, il est possible de transmettre le token JWT authentifiant l'utilisateur directement dans le script du widget. Plus d'informations ici.
Chaque carte de contenus est cliquable. Le contenu s'ouvrira alors dans un nouvel onglet. Selon si l'embed est activé ou non, la redirection peut varier.
Si le Spot n’est pas embed, le contenu s'ouvrira sur go.meltingspot.io.
Si le Spot est embed, on applique le choix que vous avez fait dans vos Paramètres de redirection :
Si vous avez sélectionné Pas de redirection, le contenu s'ouvrira sur go.meltingspot.io
Si vous avez sélectionné Uniquement les utilisateurs SSO, le contenu s'ouvrira dans l'embed pour les membres connectés en SSO et sur go.meltingspot.io pour les membres non connectés
Si vous avez sélectionné Tous les utilisateurs, le contenu s'ouvrira dans l'embed.
Si vous avez réalisé un embed sur plusieurs domaines, il est possible dans le script du widget de spécifier vers quel domaine sera redirigé l'utilisateur au clic. 👉 Plus d'informations ici.
Pour supprimer un widget, vous avez 2 possibilités :
Depuis la carte d'un widget, en cliquant sur les trois petits points à droite puis sur Supprimer.
Depuis le panneau latéral d'édition d'un widget, en cliquant sur les trois petits points en haut à droite puis sur Supprimer.
Au clic sur l'un de ces deux boutons, une fenêtre de confirmation s'ouvre.
Attention, toute suppression est définitive !
Si vous supprimez un widget dans les paramètres de votre Spot, il est conseillé de le supprimer aussi dans le code de votre application ou site - pas d'inquiétude si vous oubliez, vos membres ne verront qu'un encart vide 😉
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 !
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.
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 :
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.
Ce code est en deux parties et va vous permettre d'intégrer votre widget à votre application ou site internet.
Copiez le premier 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.
Copiez le second script présenté et ajoutez-le à une section (un frame) contenue dans le <body> de votre page.
Si il s'agit d'un widget de type Modale ou Drawer, le script est en 2 parties :
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>.
Vous pouvez être amenés à éditer plusieurs éléments de ce script pour paramétrer l'apparence de votre widget et son 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 widget.
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 :
| themeMode | Description |
|---|---|
| Reprend le mode de l'appareil de l'utilisateur, sauf lorsque celui-ci indique une autre préférence dans ses paramètres profil. |
| Reprend le mode de l'appareil de l'utilisateur. |
| Tous les utilisateurs verront le widget en mode clair. |
| Tous les utilisateurs verront le widget 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.
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). 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 :
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.
