💁‍♂️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.

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.

Configuration du widget

Créer un widget

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.

Gestion des sections

Ajouter des sections

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.

Les différents contenus

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 Forum - 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 Channel - Le nombre de messages dans le channel
Collection	- L’icone, le titre et la description de la collection - Un tag Collection - 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 (Planned, Live et Ended) - Le nombre de message sur ce live

Bon à savoir :

Si un contenu est supprimé par l'admin sur le Spot, alors celui-ci n'est plus listé dans le widget.

Réordonner les sections

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.

Supprimer une section

Vous pouvez supprimer une section d'un widget en cliquant sur l'icon Delete à droite de la section.

Modifier un widget

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.

Aperçu d'un widget

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.

Affichage du widget

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 Text sections.

Redirection au clic sur la carte d'un Spot content

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.

Supprimer un widget

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 😉

Implémentation

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 :

• 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.

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.

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.

Edition du header depuis les settings d'une page sur Webflow

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.

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 2 é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
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 widget en mode clair.
dark	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.