# 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.](https://help.meltingspot.io/english/manage-spot/widget/implementation)

<figure><img src="https://3055204660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrzBxnWaSListMwx3rzKu%2Fuploads%2FemgQXpDshMuHqAFJV7t8%2Fimage.png?alt=media&#x26;token=e10d13f8-87b1-4fdf-9f37-92960e7fc9bd" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3055204660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrzBxnWaSListMwx3rzKu%2Fuploads%2FqaQFWI1dNQxC6tsSbIHH%2Fimage.png?alt=media&#x26;token=fdeed5c2-3e06-450f-b69e-4af2db87edf4" 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="https://3055204660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrzBxnWaSListMwx3rzKu%2Fuploads%2FZChaRGHV714ibJFyPcuY%2Fimage.png?alt=media&#x26;token=f5ac840a-8583-4b56-b096-e56b0481b131" 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="https://3055204660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrzBxnWaSListMwx3rzKu%2Fuploads%2FsODlhYp2tJVjIxun2yBj%2Fimage.png?alt=media&#x26;token=04ac6e06-b383-4966-8841-dc1488b4348b" 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="../sso" %}
[sso](https://help.meltingspot.io/english/manage-spot/sso)
{% 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](https://help.meltingspot.io/english/sso#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](https://help.meltingspot.io/english/embed#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](https://help.meltingspot.io/english/embed#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 %}