Helpdesk
RoadmapGo to MeltingSpot
Français
Français
  • Pour commencer
    • 📝Introduction
    • 🗝️Concepts clés
    • 👋Rejoindre un Spot
    • 🎯Créer un Spot
  • Contenu d'un Spot
    • 🏠Page d'accueil
    • ▶️Lives
      • ➕Créer un live
      • ➕Créer un replay
      • 👣Accéder aux paramètres d'un live
      • ⚙️Paramètres généraux
      • 🔓Confidentialité
      • 🎥Paramètres vidéo
      • ⚙️Paramètres de la liveroom
      • 💌Invitations & participants
      • 👥Gérer les groupes invités
      • 🎙️Speakers
      • 📩Notifications
      • 🏷️Tags sur les lives
      • ✔️S'inscrire à un live
      • 📋Avant de démarrer un live
      • ⏸️Démarrer un live
      • ⏯️Terminer un live
      • 📊Métriques d'un live
    • 🎓Cours
      • 📂Modules
      • ➕Créer un cours
      • 👣Configurer des étapes
      • ⁉️Quiz
      • 🛣️Accéder aux paramètres d'un cours
      • ⚙️Paramètres généraux
      • 💌Invitations & participants
      • 👥Gérer les groupes invités
      • 📩Notifications
      • ✏️Le mode brouillon
      • 📋Suivre un cours
    • 💬Discussions
      • 🔉Créer un canal
      • ⚙️Paramètres d'un canal
      • ➕Ajouter et supprimer des membres d'un canal
      • 🧰Forum
      • 👉Sujet dans un Forum
      • ➕Ajouter et supprimer des membres d'un forum secret
      • ⬆️Voter, trier et chercher dans les Sujets
      • 📌Partager, épingler et marquer un Sujet comme résolu
      • ⬇️Voter, trier et épingler des réponses à un Sujet
      • 📪Notifications dans les forums
      • 🖍️Rédiger un message
      • 👋Mentionner un membre
      • ❌Editer ou supprimer un message
      • 🗣️Répondre à un message
      • ❤️Réagir à un message
    • 📚Collections
      • 🆕Gérer une collection
      • 🔐Gestion des membres/groupes d'une collection privée
      • 📃Créer et supprimer une page
      • 🔗Ajouter & supprimer un lien
      • ✏️Le mode brouillon
      • 🏷️Tags et réactions sur les documents
    • 🔍Annuaire des membres
      • 📰Profil public d'un membre
      • 🤸‍♂️Activités d'un membre
      • 🏷️Tags sur les membres
    • 🗣️Messages directs
    • 🔍Rechercher dans le Spot
  • Gérer un Spot
    • ⚙️Accéder aux paramètres
    • 📊Dashboard
      • 📈Aperçu
      • 🤿Activités
      • ▶️Lives
    • 👥Audience
      • 👥Membres
        • 🎭Rôle des membres
        • 🎓Statut des membres
        • 📩Inviter de nouveaux membres
        • 🗃️Importer des membres
        • 👀Suivre les sources d'inscription (UTM)
        • 💬Bulk Message
        • 🌠Date de dernière activité
        • 👾Propriétés personnalisées
      • 🧑‍🤝‍🧑Groupes
        • ✍️Groupes statiques
        • 🤖Groupes automatisés
      • 👤Droits utilisateurs
        • ⚙️Gestion des rôles
        • 🧢Assigner des rôles à des membres
        • 🤝Permissions
    • 🏷️Tags
    • 👀Modération
    • ⚙️Paramètres généraux
    • 🎨Personnalisation
      • ✨Thème
      • 🏗️Fonctionnalités
      • 🧑‍💻Scripts
    • 📨Notifications par email
    • ❓Formulaire d'inscription
    • 🔗Intégrations
      • 🪝Webhooks
      • 🤖API
        • 🧑‍🏫REST API
        • 🔦Configuration
        • 🗃️Endpoints - Les membres du Spot
        • 🗃️Endpoints - Les lives
        • 🗃️Endpoints - Les cours
        • 🗃️Endpoints - Les canaux
        • 🗃️Endpoints - Les forums
        • 🗃️Endpoints - Les sujets
        • 🗃️Endpoints - Les groupes
        • 🗃️Endpoints - Les tags
        • 🗃️Endpoints - Les propriétés personnalisées
        • 🗃️Endpoints - Recherche
        • 🗃️Endpoints - Notifications
      • 🧡HubSpot
    • 🔑Single Sign-On
    • 🧩Embed
    • 💁‍♂️Widget
      • 📚Liste de contenus
      • 🎓Cours
      • 📃Document
      • 🧑‍🏫Implémentation
  • Paramètres utilisateur
    • 🔔Gestion des notifications
      • 💌Email Digest
    • 👤Gérer mes profils
    • 🙌Etre membre de plusieurs Spots
    • 🔔Centre de Notifications
  • Guides
    • 🧐Accéder à MeltingSpot
    • ⏹️Ajoutez MeltingSpot à l'écran d'accueil de votre téléphone/ordinateur
    • 🔥Créer un contact HubSpot à chaque nouvelle inscription au Spot
    • ✨Notifier le début d'un live sur Slack
    • 📅Envoyer une invitation google agenda aux nouveaux participants à un live
    • 🗒️Ajouter les nouveaux membres de votre Spot dans un Google Sheet
    • ❔Utiliser le webhook Réponse au formulaire d'inscription
    • 🪃Utiliser un webhook dans Slack
    • ❔Afficher un Google Form dans une page de votre Spot
    • 🐞Résoudre un problème dans la live room
    • 🐝Accéder à son compte de facturation
    • ❓FAQ
Propulsé par GitBook
Sur cette page
  • Récupérer le code
  • Ajoutez le premier script dans le header de votre code
  • Ajoutez le second script au body de votre page

Cet article vous a-t-il été utile ?

  1. Gérer un Spot
  2. Widget

Implémentation

PrécédentDocumentSuivantGestion des notifications

Dernière mise à jour il y a 1 mois

Cet article vous a-t-il été utile ?

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.

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.

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

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.

domain: 'customContext’

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.

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. (). 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 :

💁‍♂️
🧑‍🏫
Plus de détails sur le multi-domaines ici
Edition du header depuis les settings d'une page sur Webflow
Edition du header depuis les settings d'une page sur Webflow