Implementation

PrécédentCourse SuivantNotification management

Dernière mise à jour il y a 1 mois

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

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.

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.

PrécédentCourse SuivantNotification management

Dernière mise à jour il y a 1 mois

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

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.

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:

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.