# List of contents

A widget `List of contents` can group together both text zones and resources from your site, such as a page, a live, a forum, etc.

## Create a widget 

To create a widget `List of contents`, click on the `New` button at the top of the page and then on `List of contents`. 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.
* Choose how you want to display the different content you are going to integrate:
  * `Internal navigation`: content will open in the widget
  * `Drawer`: content will be displayed in a drawer
  * `Modal`: content will be displayed in a modal window
  * `Spot (opens in a new tab)`: content will open in a new tab and the member will be redirected according to their settings
* Enter a `title`. :bulb: This title will not be visible in the widget integrated into your application. 
* Add [sections](#items-management) to your widget.
* Click on `Create`: that's it, your widget is ready to be integrated! :point\_right: [Find out more here.](/english/manage-spot/widget/implementation.md)

<figure><img src="/files/jvK5cZAHvCXTzieJwBSe" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/mHUdluoagIcwpkKqDKxc" alt="modal widget example" width="375"><figcaption><p>Modal widget example</p></figcaption></figure>

{% hint style="info" %}
**Good to know:**&#x20;

* By default, the widget contains a text zone and 2 zones for adding resources.&#x20;
* You can add up to 40 sections per widget.&#x20;
  {% endhint %}

## Sections management&#x20;

### Adding sections

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

* `Text section`: to add a text zone into which you can insert images, videos, links, etc.&#x20;
* `Spot content`: to add a Spot resource. Thanks to the search bar, you can quickly find the content you're looking for.&#x20;

<figure><img src="/files/7jUUSzGjfAl44TgM2tZO" alt=""><figcaption></figcaption></figure>

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

<table><thead><tr><th width="154">Content type</th><th>Information displayed</th></tr></thead><tbody><tr><td><strong>Forum</strong></td><td><p>- Forum icon, title and description</p><p>- A <code>Forum</code> tag</p><p>- The number of topics in the forum</p></td></tr><tr><td><strong>Topic</strong></td><td><p>- Topic title and description</p><p>- The icon and name of the forum to which it belongs</p><p>- Topic score and number of replies to this topic</p></td></tr><tr><td><strong>Channel</strong></td><td><p>- Channel icon, title and description</p><p>- A <code>Channel</code> tag</p><p>- The number of posts in the channel</p></td></tr><tr><td><strong>Collection</strong></td><td><p>- The icon, title and description of the collection</p><p>- A <code>Collection</code> tag</p><p>- The number of pages and links in the collection</p></td></tr><tr><td><strong>Page</strong></td><td><p>- Page cover and title</p><p>- Collection icon and name</p><p>- The number of posts on this page</p></td></tr><tr><td><strong>Links</strong></td><td><p>- Link cover and title</p><p>- Icon and collection name</p></td></tr><tr><td><strong>Lives</strong></td><td><p>- Cover, title, date and time of live event</p><p>- Type of live (Workshop, Conference) and status (<code>Planned</code>, <code>Live</code> and <code>Ended</code>)</p><p>- Number of messages on this live</p></td></tr><tr><td><strong>Courses</strong></td><td><p>- Course cover, title and description</p><p>- A <code>Course</code> tag</p></td></tr><tr><td><strong>Learning path</strong> </td><td><p>- Learning path title and description</p><p>- A <code>Course</code> tag<br>- Number of lives in this learning path<br>- Number of courses in this learning path<br>- Number of collections in this learning path</p></td></tr></tbody></table>

{% hint style="info" %}
**Good to know:**&#x20;

If content is deleted by the admin on the Spot, it is no longer listed in the widget.&#x20;
{% endhint %}

### Reorder sections

You can change the order of sections by drag and drop.&#x20;

### Delete a section

You can delete a widget section by clicking on the `Delete` icon to the right of the section.&#x20;

## Edit a widget&#x20;

You can edit a widget in two different ways:&#x20;

* From the widget list, by clicking on the three small dots to the right of a widget's card and then on `Edit`.&#x20;
* From the widget preview window, click on `Edit`.&#x20;

### General tab

In the `General` tab, you can:

* Modify the widget's **rendering type**. <mark style="color:red;">**Warning**</mark>, switching your widget type requires you to update the code.
* Modify the widget **title**&#x20;
* Modify the **order** of widget sections
* **Add sections** (text or Spot content)&#x20;
* Modify the **content of a text section** (<mark style="color:red;">**Warning**</mark>, you cannot modify a Spot content section; you can only move or delete it).&#x20;
* **Delete a section**. <mark style="color:red;">**Warning**</mark>, all deletions are final!&#x20;

Once you've made all your changes, you can save the widget by clicking on `Save`.&#x20;

### **Statistics Tab**

In the `Statistics` tab, you can access the usage data for your widget:

* The `Widget Data` section provides overall usage statistics for the widget:
  * `Views`: The number of times the widget has been viewed.
  * `Content clicks`: The number of times someone has clicked on one of the widget's contents.
  * `Last updated`: The date the widget was last modified.
* In the second box (`Clicks by Content`), you will find detailed statistics for each resource. For each resource, you will have:
  * The number of clicks on that specific resource.
  * A progress bar showing the number of clicks on the resource compared to the total clicks on the widget.

## Widget preview&#x20;

The widget preview depends on its rendering type:&#x20;

* 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).&#x20;
* 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:&#x20;

* `Get code`: gives you the choice between [sending](#recovering-code) the widget code directly by e-mail (with `Send instructions`) or [retrieving and copying](#recovering-code) the widget code (with `Copy code`).&#x20;
* `Edit`: opens the editing drawer.&#x20;

<figure><img src="/files/P4gXhjCsnpSvmTsQLryJ" alt="Preview of a modal widget" width="563"><figcaption><p>Preview of a modal widget</p></figcaption></figure>

## Widget display&#x20;

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 :&#x20;

* If the member is logged in, he'll see all the content for which he has rights.&#x20;
* If the member is not logged in, he or she will see content visible to a visitor (i.e. public lives) and `Text sections`.&#x20;

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

{% 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 widget script**. Find out more [here](/english/manage-spot/sso.md#embed-widgets--sso).
{% endhint %}

## Redirection on clicking on a Spot content card&#x20;

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.&#x20;

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](/english/manage-spot/embed.md#redirection):&#x20;

* 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.&#x20;
* If you have selected `All users`, the content will open in the embed.

{% hint style="info" %}
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](/english/manage-spot/embed.md#multi-domains-redirection).&#x20;
{% endhint %}

## Deleting a widget&#x20;

There are 2 ways to delete a widget:&#x20;

* From the widget card, click on the three small dots on the right, then on `Delete`.&#x20;
* From the widget editing drawer, click on the three small dots in the top right-hand corner, then on `Delete`.&#x20;

Clicking on either of these two buttons opens a confirmation window.&#x20;

{% hint style="danger" %}
**Warning**, all deletions are final!&#x20;
{% endhint %}

{% hint style="info" %}
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 😉
{% endhint %}


---

# Agent Instructions: Querying This Documentation

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

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.meltingspot.io/english/manage-spot/widget/list-of-contents.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.