> For the complete documentation index, see [llms.txt](https://help.meltingspot.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.meltingspot.io/english/manage-spot/embed.md).

# Embed

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

<figure><img src="https://3055204660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrzBxnWaSListMwx3rzKu%2Fuploads%2FPAEKgUXVGsv7vpoiu6BY%2Fimage.png?alt=media&#x26;token=9c55fc70-3809-417f-9798-1907ba896f41" alt="Example of a Spot hosted in our website"><figcaption><p>Example of a Spot hosted in our website</p></figcaption></figure>

<figure><img src="https://3055204660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrzBxnWaSListMwx3rzKu%2Fuploads%2FzjfdVVejwPnwXw0ZNHLe%2FForums.png?alt=media&#x26;token=bda55582-16d8-42bb-ab21-adde4a29dbed" alt="Example of a Spot hosted in an app"><figcaption><p>Example of a Spot hosted in an app</p></figcaption></figure>

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 😉

{% hint style="success" %}
If your site is built with a low-code editor, you can still inject this script by adding a Custom Code section.
{% endhint %}

## Implementation

Go to the `Embed` tab in your Spot settings.

<figure><img src="https://3055204660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrzBxnWaSListMwx3rzKu%2Fuploads%2FBUH4uktnDqrXMZkxKyaD%2Fimage.png?alt=media&#x26;token=b64017bb-022d-456f-8c11-95f63d23f7c2" alt="Embed tab in the admin settings"><figcaption></figcaption></figure>

{% hint style="info" %}
This is a premium feature. If you cannot access it, [contact us](mailto:support@meltingspot.io).
{% endhint %}

1. **Add your base URL**

Enter the URL of the page where you plan to integrate your Spot in a `https://` format. *The URL must be the one of the exact page, not just the domain.*

{% hint style="info" %}
If you want to run local tests, use `127.0.0.1` in the URL, as `localhost` URLs are blocked by our system.
{% endhint %}

2. **Add the first script to your code header**

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

{% hint style="info" %}
In most low-code editors, this section can be edited from the page or website settings.
{% endhint %}

<figure><img src="https://3055204660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrzBxnWaSListMwx3rzKu%2Fuploads%2FevwYkFv2sRuvcIzMVTzE%2Fimage%20(2).png?alt=media&#x26;token=470aa6c3-96ba-459f-a0a2-b2c2faa6e1b7" alt="Embed head script in Webflow page settings"><figcaption><p>Editing the &#x3C;head> in <strong>Webflow</strong> page settings</p></figcaption></figure>

3. **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:

<table><thead><tr><th width="194.5">themeMode</th><th>Description</th></tr></thead><tbody><tr><td><code>auto</code></td><td>The user's system mode, unless they specify it otherwise in their profile settings.</td></tr><tr><td><code>system</code></td><td>The user's system mode.</td></tr><tr><td><code>light</code></td><td>All users will be in light mode.</td></tr><tr><td><code>dark</code></td><td>All users will be in dark mode.</td></tr></tbody></table>

{% hint style="success" %}
For instance, if you embed your Spot into a white interface, we recommend you set `themeMode` to `light`.
{% endhint %}

💡 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!

4. **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 Spot.

{% content-ref url="/pages/yvDOKM9ZwM2EL2JVX7Oc" %}
[Single Sign-On](/english/manage-spot/sso.md)
{% endcontent-ref %}

{% hint style="info" %}
Once SSO has been set up, **the JWT token authenticating the user can be transmitted directly to the embed script**. Find out more [here](/english/manage-spot/sso.md#embed-widgets--sso).
{% endhint %}

### Navigating the embed

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.

<figure><img src="https://3055204660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrzBxnWaSListMwx3rzKu%2Fuploads%2F9lk5q3B5xehfYHNjBaV7%2FContent.png?alt=media&#x26;token=0df9ce51-e9e5-44e7-8033-8efca180dcb8" alt="Navigation in a Spot in embed"><figcaption></figcaption></figure>

**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 Spot. See the following section to learn more about customizing your Spot's colors and fonts:

{% content-ref url="/pages/uMcek4DVefzLo719k701" %}
[Theme](/english/manage-spot/customization/theme.md)
{% endcontent-ref %}

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

<figure><img src="https://3055204660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrzBxnWaSListMwx3rzKu%2Fuploads%2Fl6T8nUzWJgI3qHfNNG5a%2Fimage%20(3).png?alt=media&#x26;token=4083310a-dca1-435f-8f3e-8f08f41378d9" alt="Sharing a URL from the Admin toolbar" width="352"><figcaption><p>Sharing a URL from the Admin toolbar</p></figcaption></figure>

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.

## Redirection settings

**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 `https://go.meltingspot.io/spot/{spotId}` or in embed.

From the `embed` tab in your Spot settings, choose your redirection settings:

<figure><img src="https://3055204660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrzBxnWaSListMwx3rzKu%2Fuploads%2FIJxH9i0wi6N7YKINZSa3%2FCapture%20d%E2%80%99e%CC%81cran%202023-11-22%20a%CC%80%2017.55.57%20(1).png?alt=media&#x26;token=6cf76679-e77c-418c-aca3-fdbb0eb4bfac" alt="Embed redirection settings"><figcaption></figcaption></figure>

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 who have already authenticated at least once via JWT SSO will be redirected to your Spot in embed. Other users will be directed to `https://go.meltingspot.io/spot/{spotId}.`

{% hint style="info" %}
You can only choose this option if you have previously enabled Single Sign-On authentication for your Spot.
{% endhint %}

* **All users**: all your members will be redirected to your Spot in embed.

{% hint style="success" %}
For example, if your Spot 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}`
{% endhint %}

## Multi-domains

**You 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:** if you activate an `All users` or `SSO users only` redirection, you can declare for each member the embed URLs they should be redirected to. Each URL is identified by a key: the `default` key, used in particular for notification emails, and custom keys that you name freely.

* **Declare a member's URLs**: through the `domains` parameter of the [JWT token](/english/manage-spot/sso.md#generate-an-sso-token) (merged at each SSO login), or through the `embedBaseUrls` field of the API (full replacement).
* **Choose the key to use**: through the `domain` parameter of a [widget](/english/manage-spot/widget/implementation.md), embed or Coach script.

{% hint style="info" %}
It is not possible for Admins to view / modify these URLs directly from the Spot's audience table.
{% endhint %}

### Multi-domains redirection

In the embed settings, if redirection is enabled (`All users` or `SSO users only`), each member to be redirected is sent to the first available URL among:

1. Their URL for the `domain` key set in the widget, embed or Coach script, if you specified one.
2. Their URL for the `default` key, if you provided one.
3. The `base URL` set in the Spot's embed settings.

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 URLs for these users!

👉 Key and URL format, JWT and API examples, full algorithm and short links: [Multi-domains and member redirection](/english/manage-spot/embed/multi-domains.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://help.meltingspot.io/english/manage-spot/embed.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.