💁‍♂️Widget

Embed a selection of your Spot's content anywhere in your product or website to reach your users in the right place, at the right time.

A widget can contain text zones and resources from your spot, such as existing pages, Lives, forums, and so on. It can be integrated into any page of your product or website by injecting an HTML code snippet.

You can find and create all your widgets from the Embed section of your Spot settings, in the Widgets tab.

This is a premium feature. If you cannot access it, contact us.

Widget configuration

Create a widget

To create a widget, click on the New button in the top left-hand corner. A drawer opens:

• Choose the rendering mode for your widget:

  • Embed: the widget appears as an embed and you can integrate it anywhere on your site or application.

  • Modal: the widget is in a window opened with a button.

  • Drawer: the widget is in a side panel opened with a button.

• Enter a title. 💡 This title will not be visible in the widget integrated into your application.

• Add sections to your widget.

Modal widget example

Good to know:

• By default, the widget contains a text zone and 2 zones for adding resources.

• You can add up to 40 sections per widget.

Sections management

Adding sections

To add a section, click on one of the 2 buttons at the bottom of the drawer:

• Text section: to add a text zone into which you can insert images, videos, links, etc.

• Spot content: to add a Spot resource. Thanks to the search bar, you can quickly find the content you're looking for.

Types of resources

Each Spot content section is displayed as a clickable card that leads to the resource selected by the admin. Each card showcases the content essential information.

Content type	Information displayed
Forum	- Forum icon, title and description - A Forum tag - The number of topics in the forum
Topic	- Topic title and description - The icon and name of the forum to which it belongs - Topic score and number of replies to this topic
Channel	- Channel icon, title and description - A Channel tag - The number of posts in the channel
Collection	- The icon, title and description of the collection - A Collection tag - The number of pages and links in the collection
Page	- Page cover and title - Collection icon and name - The number of posts on this page
Links	- Link cover and title - Icon and collection name
Lives	- Cover, title, date and time of live event - Type of live (Workshop, Conference) and status (Planned, Live and Ended) - Number of messages on this live
Courses	- Course cover, title and description - A Course tag

Good to know:

If content is deleted by the admin on the Spot, it is no longer listed in the widget.

Reorder sections

You can change the order of sections by drag and drop.

Delete a section

You can delete a widget section by clicking on the Delete icon to the right of the section.

Edit a widget

You can edit a widget in two different ways:

• From the widget list, by clicking on the three small dots to the right of a widget's card and then on Edit.

• From the widget preview window, click on Edit.

The widget drawer opens, where you can :

• Modify the widget's rendering type. Warning, switching your widget type requires you to update the code.

• Modify the widget title

• Modify the order of widget sections

• Add sections (text or Spot content)

• Modify the content of a text section (Warning, you cannot modify a Spot content section; you can only move or delete it).

• Delete a section. Warning, all deletions are final!

Once you've made all your changes, you can save the widget by clicking on Save.

Widget preview

The widget preview depends on its rendering type:

• If it's an Embed or Modale widget: When you click on a widget card, a window opens. In this window, you can see a preview of the widget's rendering in your application or site (in the case of an embed, grey zones materialize the content of your site).

• If it's a Drawer widget: when you click on a widget's card, a side panel opens. Here you can see a preview of how the widget will look in your application or site.

At the bottom of the modal, there are several buttons:

• Get code: gives you the choice between sending the widget code directly by e-mail (with Send instructions) or retrieving and copying the widget code (with Copy code).

• Edit: opens the editing drawer.

Preview of a modal widget

Widget display

Many members of your site or application will be able to access your widget. Don't worry, they'll only see the content to which they have access in the Spot :

• If the member is logged in, he'll see all the content for which he has rights.

• If the member is not logged in, he or she will see content visible to a visitor (i.e. public lives) and Text sections.

To ensure that users can see all widget content, they need to be logged in the widget integration space. To enable that, we recommend you set up SSO authentication.

🔑Single Sign-On

Once SSO has been set up, the JWT token authenticating the user can be transmitted directly to the widget script. Find out more here.

Redirection on clicking on a Spot content card

Each content card is clickable. The content will then open in a new tab. Depending on whether or not embedding is enabled, the redirection may vary.

If the Spot is not embedded, the content will open on go.meltingspot.io.

If the Spot is embedded, we apply the choice you made in your Redirection settings:

• If you have selected No redirection, the content will open on go.meltingspot.io.

• If you have selected SSO users only, the content will open in the embed for SSO-connected members and on go.meltingspot.io for non-connected members.

• If you have selected All users, the content will open in the embed.

If you have embedded your Spot into several domains, you can specify in your widget script which domain the user should be redirected to on click. 👉 More information here.

Deleting a widget

There are 2 ways to delete a widget:

• From the widget card, click on the three small dots on the right, then on Delete.

• From the widget editing drawer, click on the three small dots in the top right-hand corner, then on Delete.

Clicking on either of these two buttons opens a confirmation window.

Warning, all deletions are final!

If you delete a widget in your Spot settings, we recommend you also remove it in the code of your application or site - no worries if you forget, your members will only see an empty insert 😉

Implementation

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.

Editing the <head> in Webflow page 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.

• 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. (👉 Know more about multi-domain embed here). Redirect the user who clicks on a widget to the domain of your choice by indicating the domain key in the script, as follows:

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.