🧩Embed
Root community at the core of your services by hosting your Spot directly on your website or application.
Dernière mise à jour
Root community at the core of your services by hosting your Spot directly on your website or application.
Dernière mise à jour
To embed your Spot into a page of a website or application, you'll need to add the script we provide to your HTML code. As the script is a dynamic SDK, it will take into account all future developments 😉
If your site is built with a low-code editor, you can still inject this script by adding a Custom Code section.
Go to the Embed tab in your Spot settings.
This is a premium feature. If you cannot access it, contact us.
Add your base URL
Enter the URL of the page where you plan to integrate your Spot in a https:// format.
If you want to run local tests, use 127.0.0.1 in the URL, as localhost URLs are blocked by our system.
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, this section can be edited from the page or website settings.
Add the second script to your page body
Copy the script shown and paste it into a section in the <body> of your page.
You may need to edit 2 elements of this script to style your frame:
Your frame size. By default, your frame entirely 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:
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.
💡 You can also add a deeplink parameter to the script to specify which page is shown to users who display your Spot in embed.
For example, adding deeplink: '/lives' to the script will take users to the Lives page rather than the homepage!
Activate embed
Once you have entered a valid base URL and injected the 2 scripts into your code, click on the activation button. Congratulations, your Spot is now embedded into your page 🎉
As long as you don't activate the embed, users will be able to see the inactive frame and will be redirected to your standalone Spot.
Whenever embed is enabled, users can still access your Spot on https://go.meltingspot.io/spot/${spotId}. Users can sign up and log in from both versions.
Before embedding your Spot into a website or app that already has a logged-in space, we recommend you set up SSO. Your users will keep the same login credentials to navigate between your product and your embedded community.
🔑Single Sign-OnOnce SSO has been set up, the JWT token authenticating the user can be transmitted directly to the embed script. Find out more here.
In your Spot in embed, the side navigation bar disappears and a unique horizontal navigation bar allows you to switch sections and manage your Spot and profile.
In embed, you can create new lives, documents, discussions, and member invitations from any section of your Spot. Click on the + button in the top right-hand corner to open the resource creation menu.
We recommend you customize your Spot's theme for seamless navigation between your product and your community. See the following section to learn more about customizing your Spot's colors and fonts:
✨ThemeShould you share the URL of the page in which your Spot is embedded, users would access the home page of your Spot in embed (or to the next section when the home page is deactivated).
If you want to share the URL of a specific location within your embed, use the share buttons: when clicking on such buttons, the URL of your location is copied to your clipboard.
You can find the share button:
In the Admin toolbar, at the top right of each of your sections. The URL copied is the one of the page you're on, e.g. a specific chat channel.
In the top right-hand corner of each Live card you hover your mouse over. The copied URL links to the Live Room.
Top right of every forum Topic card you mouse over; and inside the Topic.
Top right of each Collection page hovered over by your mouse; and inside the page.
You can choose where your members will be redirected from a MeltingSpot notification e-mail (invitation to the Spot or to a Live, new message received...). Depending on your choice of redirection, they will either access your Spot on://go.meltingspot.io/spot/{spotId} or in embed.
From the embed tab in your Spot settings, choose your redirection settings:
Choose one of the 3 following options:
No redirection: your members will always be directed to https://go.meltingspot.io/spot/{spotId}. It is the default option.
SSO users only: users authenticated via SSO will be redirected to your Spot in embed. Other users will be directed to https://go.meltingspot.io/spot/{spotId}.
You can only choose this option if you have previously enabled Single Sign-On authentication for your Spot.
All users: all your members will be redirected to your Spot in embed.
For example, if your community is made up of both your prospects and your customers, you can activate redirection for SSO users only: your customers (authenticated in SSO) will access your Spot in embed while your prospects will access it from https://go.meltingspot.io/spot/{spotId}
Your can embed your Spot into different domains. For instance:
In your product and in your website.
In a product that offers different access URLs depending on the user (company1.acme.com; company2.acme.com; etc.).
Implementation is the same as for one domain - you will need to install the script on your different pages.
Only redirection will be impacted: for optimal use, you'll need to specify the domains to which you'd like each user to be redirected (when clicking on an email or widget), if you activate a “For all users” or “For SSO users only” redirection.
To send us the embed domain(s) to which each of your members should be redirected, you can use one of the following methods:
Via JWT token (for members authenticating through SSO) At each SSO authentication, you can add/remove the member's access domain(s) by specifying them in the token's domains parameter. 👉 Doc here.
Via API (for all members) You can use our member editing endpoint to update a member's access domains. 👉 Doc here.
In a widget script You can 'force' at widget level the domain to redirect the user to on click, by passing an existing domain key into the script. 👉 Doc here.
It is not possible for Admins to view / modify domains directly from the Spot's audience table.
In the embed settings, if redirection is enabled (For all users or For SSO users only), each member to be redirected when clicking on an email or widget:
To the domain indicated in the widget script if you have specified one (overrides the member's potential default domain or the Spot's URL base).
To its default domain, if you have provided us with one (overrides the Spot's base URL).
To the base URL indicated in the Spot settings, if we don't have another domain for the member.
If you choose not to redirect users in the embed settings, they will be redirected to go.meltingspot.io/spot/yourSpotId , even if you have provided us with domains for these users!
