🧩Embed

Root community at the core of your services by hosting your Spot directly on your website or application.

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.

Implementation

Go to the Embed tab in your Spot settings.

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

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

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

  1. 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:

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!

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

Implications

Member registration and login

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.

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

Customizing embed

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:

Redirection

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}

Sharing URLs

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

Dernière mise à jour