Helpdesk
RoadmapGo to MeltingSpot
English
English
  • To begin
    • 📝Introduction
    • 🗝️Key concepts
    • 👋Join a Spot
    • 🎯Create a Spot
  • Content of a Spot
    • 🏠Home page
    • ▶️Lives
      • ➕Create a live
      • ➕Create a replay
      • 👣Accessing the live's settings
      • ⚙️General settings
      • 🔓Privacy
      • 🎥Video Settings
      • ⚙️Live room settings
      • 💌Invitations & participants
      • 👥Manage guest groups
      • 🎙️Speakers
      • 📩Notifications
      • 🏷️Tags on lives
      • ✔️Register to a live
      • 📋Before starting a live
      • ⏸️Start a live
      • ⏯️Ending a live
      • 📊Live performance metrics
    • 🎓Courses
      • 📂Module
      • ➕Create a course
      • 👣Configuring steps
      • ⁉️Quiz
      • 🛣️Access course parameters
      • ⚙️General settings
      • 💌Invitations & participants
      • 👥Manage guest groups
      • 📩Notifications
      • ✏️Draft mode
      • 📋Take a course
    • 💬Discussions
      • 🔉Creating a channel
      • ⚙️Channel settings
      • ➕Adding and removing members of a channel
      • 🧰Forum
      • 👉Topics in Forums
      • ➕Adding and removing members of a secret forum
      • ⬆️Voting, sorting and searching in Topics
      • 📌Sharing, pinning and marking topic as closed
      • ⬇️Voting, sorting and pinning replies to a Topic
      • 🔔Forum notifications
      • 🖍️Writing a message
      • 👋Mentioning a member
      • ❌Editing or deleting a message
      • 🗣️Replying to a message
      • ❤️Reacting to a message
    • 📚Collections
      • 🆕Manage a collection
      • 🔐Managing members/groups of a private collection
      • 📃Create and delete a page
      • 🔗Add & remove a link
      • ✏️Draft mode
      • 🏷️Tags on documents
    • 👥Members directory
      • 📰Public profile of a member
      • 🤸‍♂️Members' activities
      • 🏷️Tags on members
    • 🗣️Direct messages
    • 🔍Search in Spot
  • Managing a Spot
    • ⚙️Accessing the settings
    • 📊Dashboard
      • 📈Overview
      • 🤿Activities
      • ▶️Lives
    • 👥Audience
      • 👥Members
        • 🎭Member's role
        • 🎓Member's status
        • 📩Invite new members
        • 🗃️Import members
        • 👀Track Registration Sources
        • 💬Bulk Message
        • 🌠Last activity date
        • 👾Custom properties
      • 🧑‍🤝‍🧑Groups
        • ✍️Static Group
        • 🤖Smart Group
      • 👤User rights
        • ⚙️Manage roles
        • 🧢Assign roles to members
        • 🤝Permissions
    • 🏷️Tags
    • 👀Moderation
    • ⚙️General settings
    • 🎨Customization
      • ✨Theme
      • 🏗️Modular Spot
      • 🧑‍💻Scripts
    • 📨Email notifications
    • ❓Registration form
    • 🔗Integrations
      • 🪝Webhooks
      • 🤖API Access
        • 🧑‍🏫REST API
        • 🔦Configuration
        • 🗃️Endpoints - Spot Members
        • 🗃️Endpoints - Lives
        • 🗃️Endpoints - Courses
        • 🗃️Endpoints - Channels
        • 🗃️Endpoints - Forums
        • 🗃️Endpoints - Topics
        • 🗃️Endpoints - Groups
        • 🗃️Endpoints - Tags
        • 🗃️Endpoints - Custom properties
        • 🗃️Endpoints - Search
        • 🗃️Endpoints - Notifications
    • 🧡HubSpot integration
    • 🔑Single Sign-On
    • 🧩Embed
    • 💁‍♂️Widget
      • 📚List of contents
      • 🎓Course
      • 📃Document
      • Page
      • 🧑‍🏫Implementation
  • User Settings
    • 🔔Notification management
      • 💌Email Digest
    • 👤Manage my profiles
    • 🙌Belonging to several Spots
    • 🔔Notification Center
  • Guides
    • 🧐Access MeltingSpot
    • ⏹️Add MeltingSpot to your phone/computer home screen
    • 🔥Create a HubSpot contact for each new Spot registration
    • ✨Notify the start of a live on Slack
    • 📅Send a google calendar invitation to new live participants
    • 🗒️Add new members of your Spot to a Google Sheet
    • ❔How to use the webhook Registration form answered
    • 🔗Embed a Google Form in a page of your Spot
    • 🐞Troubleshooting lives
    • 🐝Accessing your billing space
    • ❓FAQ
Propulsé par GitBook
Sur cette page
  • Get code
  • Add the first script to your code header
  • Add the second script to your page body

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

  1. Managing a Spot
  2. Widget

Implementation

PrécédentPageSuivantNotification management

Dernière mise à jour il y a 1 mois

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

Once you've created your widget on MeltingSpot, you can embed it in the page of your choice. Depending on the type of widget you've chosen (embed, drawer or modal ), your widget won't integrate in the same way. It's up to you to select the rendering mode that suits you best!

Drawer and modal widgets open with a button. It's up to you to adapt the integration of your widget to your needs. For example, you can trigger automatic opening without the user having to click on the button.

Get code

You can get a widget's code by clicking on the Get code button, from 2 different locations:

  • The widget preview window.

  • The widget card in the widget list.

A menu opens. This menu offers 2 different ways of getting the code:

  • Send instructions: opens your mailbox with a pre-written email containing your widget's code.

  • Copy code: opens a window containing your widget's code. You can copy any part of the code by clicking on Copy.

This code is in two parts and will enable you to integrate your widget into your application or website.

Add the first script to your code header

Copy the script and paste it into the <head> section of your page.

In most low-code editors, the section can be edited from the page or site settings.

Add the second script to your page body

Copy the script shown and paste it into a frame in the <body> of your page.

If it's a Modale or Drawer widget, the script is in 2 parts:

  • The button part, which corresponds to what's in the tags <button>.

  • The modal or drawer part, which corresponds to what's in the tags <script>.

You may need to edit some elements of this script to configure your widget's design, integration and redirection settings:

  • Your frame size. By default, your frame fills its parent element due to the setting style="width:100%;height:100%". You can change this setting, but we recommend you edit the size of its parent element.

  • Appearance mode (light or dark theme). By default, themeMode is set to the value Auto. You can change it to one of the following options:

themeMode
Description

auto

The user's system mode, unless they specify it otherwise in their profile settings.

system

The user's system mode.

light

All users will be in light mode.

dark

All users will be in dark mode.

For instance, if you embed your Spot into a white interface, we recommend you set themeMode to light.

domain: 'customContext’

If we don't find a match between the indicated key and the domains to which the user has access, he'll be redirected to his default domain - or to the embed base URL if he doesn't have one.

The user's redirection domain: this parameter only concerns Spots for which an embed has been set up on several domains. If you've sent us one or more domain keys via JWT token or API, you will be able to use this feature. (). Redirect the user who clicks on a widget to the domain of your choice by indicating the domain key in the script, as follows:

💁‍♂️
🧑‍🏫
👉 Know more about multi-domain embed here
Editing the <head> in Webflow page settings
Embed head script in Webflow page settings