# Liste de contenus

Un widget de type `Liste de contenus` peut regrouper à la fois des zones de textes et des ressources de votre spot comme une page, un Live, un forum etc.

## Créer un widget

Pour créer un widget de type `Liste de contenus`, cliquez sur le bouton `Nouveau` en haut de la page puis sur `Liste de contenus`. Un panneau latéral permettant de créer un nouveau widget s'ouvre : 

* Choisissez le mode de rendu de votre widget : 
  * `Embed` : le widget est sous forme d'embed, vous pouvez l'intégrer n'importe où sur votre site ou votre application.
  * `Modale` : le widget est dans une fenêtre qui s'ouvrira au clic sur un bouton.
  * `Drawer` : le widget est dans un panneau latéral qui s'ouvrira au clic sur un bouton.
* Choisissez le mode d'affichage des différents contenus que vous allez intégrer : 
  * `Navigation interne` : les contenus s'ouvriront dans le widget
  * `Drawer :` les contenus s'afficheront dans un drawer
  * `Modal` : les contenus s'afficheront dans une modale
  * `Spot (ouvre dans un nouvel onglet)` : les contenus s'ouvriront dans un nouvel onglet et le membre sera redirigé selon ses paramètres
* Donnez un `titre`. :bulb: Ce titre ne sera pas visible dans le widget intégré au sein de votre application.
* Ajoutez des [sections](#gestion-des-elements) à votre widget.
* Cliquez sur `Créer` : ça y est, votre widget est prêt à être intégré ! :point\_right: [Plus d'information ici.](https://help.meltingspot.io/manage-spot/widget/implementation)

<figure><img src="https://2006110990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ79zpqfFC0YiOG6mb94n%2Fuploads%2Fy5V9G39OZ6160qT1P7Su%2Fimage.png?alt=media&#x26;token=a054d460-97e7-4e03-9dde-01a265ae7f3f" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

## **Bon à savoir**

* Par défaut le widget contient une zone texte et 2 zones pour ajouter des ressources.
* Vous pouvez ajouter jusqu'à 40 sections par widget.
  {% endhint %}

## Gestion des sections

### Ajouter des sections

Pour ajouter une section, cliquez sur l'un des 2 boutons en bas du drawer :&#x20;

* `Section texte` : permet d'ajouter une zone de texte dans laquelle vous pourrez insérer des images, des vidéos, des liens...
* `Contenu du Spot` : permet d'ajouter une ressource du Spot. Grâce à la barre de recherche, vous pouvez trouvez rapidement le contenu que vous chercher.&#x20;

<figure><img src="https://2006110990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ79zpqfFC0YiOG6mb94n%2Fuploads%2F6hK2ElJjfq7u9UQGURlX%2Fimage.png?alt=media&#x26;token=7c2948cc-15e9-4efb-9312-577aadda2571" alt=""><figcaption></figcaption></figure>

### Les différents contenus

Chaque section`Contenu du Spot` est affichée sous la forme d'une carte cliquable qui permet d'ouvrir le contenu sélectionné par l'admin. Chaque carte contient les informations essentielles sur le contenu en questions.&#x20;

<table><thead><tr><th width="171">Type de contenu</th><th>Informations affichées </th></tr></thead><tbody><tr><td><strong>Forum</strong></td><td><p>- L’icon, le titre et la description du forum</p><p>- Un tag <code>Forum</code></p><p>- Le nombre de topics dans le forum</p></td></tr><tr><td><strong>Topic</strong></td><td><p>- Le titre et la description du topic</p><p>- L’icon et le nom du forum auquel il appartient</p><p>- Le score du topic et le nombre de réponses à ce topic</p></td></tr><tr><td><strong>Channel</strong></td><td><p>- L’icone, le titre et la description du channel</p><p>- Un tag <code>Channel</code></p><p>- Le nombre de messages dans le channel</p></td></tr><tr><td><strong>Collection</strong></td><td><p>- L’icone, le titre et la description de la collection</p><p>- Un tag <code>Collection</code></p><p>- Le nombre de pages et de liens dans la collection</p></td></tr><tr><td><strong>Page</strong></td><td><p>- La cover et le titre de la page</p><p>- L’icone et le nom de la collection</p><p>- Le nombre de message sur cette page</p></td></tr><tr><td><strong>Links</strong></td><td><p>- La cover et le titre du lien</p><p>- L’icone et le nom de la collection</p></td></tr><tr><td><strong>Lives</strong></td><td><p>- La cover, le titre, la date et l’heure du live</p><p>- Le type de live (Workshop, Conference) et son statut (<code>Planned</code>, <code>Live</code> et <code>Ended</code>)</p><p>- Le nombre de message sur ce live</p></td></tr><tr><td>Cours</td><td><p>- La cover, le titre et la descripiton du cours</p><p>- Un tag <code>Cours</code></p></td></tr><tr><td>Parcours d'apprentissage</td><td><p>- La cover, le titre et la descripiton du cours<br>- Un tag <code>Parcours d'apprentissage</code></p><p>- Le nombre de lives sur ce parcours d'apprentissage</p><p>- Le nombre de cours sur ce parcours d'apprentissage<br>- Le nombre de documents sur ce parcours d'apprentissage                    </p></td></tr></tbody></table>

{% hint style="info" %}

## **Bon à savoir**

Si un contenu est supprimé par l'admin sur le Spot, alors celui-ci n'est plus listé dans le widget.
{% endhint %}

### Réordonner les sections

Vous pouvez modifier l'ordre des sections en "drag and drop" : cliquez sur la grille de point à gauche de l'élément et dépacez votre souris.

### Supprimer une section

Vous pouvez supprimer une section d'un widget en cliquant sur l'icon `Delete` à droite de la section.

## Modifier un widget

Vous pouvez modifier un widget depuis deux endroits différents :&#x20;

* Depuis la liste des widgets, en cliquant sur les trois petits points à droite de la carte d'un widget puis sur `Modifier`.&#x20;
* Depuis la fenêtre d'Aperçu du widget, en cliquant sur le bouton `Modifier`.

### Onglet Général

Depuis l'onglet `Général`, vous pouvez :&#x20;

* Modifier le **type de rendu** du widget. <mark style="color:red;">**Attention**</mark>, changer le type de widget implique de devoir mettre à jour le code.
* Modifier le **titre** du widget.
* Modifier **l'ordre des sections** qui composent le widget.
* **Ajouter des sections** (texte ou contenu du Spot).
* Modifier le **contenu d'une section texte** (<mark style="color:red;">**Attention**</mark>, vous ne pouvez pas modifier une section contenu du Spot, vous ne pouvez que la déplacer ou la supprimer).
* **Supprimer une section** du widget. <mark style="color:red;">**Attention**</mark>, toute suppression est définitive !

Une fois toutes vos modifications faites, cliquez sur le bouton `Enregistrer`.

### Onglet Statistiques

Depuis l'onglet `Statistiques`, vous pouvez accéder aux données d'utilisation de votre widget :&#x20;

* Un premier encadré `Données du widget` vous donne des chiffres d'utilisation en rapport avec le widget dans sa globalité :&#x20;
  * `Vues` : le nombre de fois où le widget a été vu
  * `Clics sur les contenus` : le nombre de fois où quelqu'un a cliqué sur l'un des contenus du widget
  * `Dernière mise à jour` : la date de dernière modification du widget
* Dans le deuxième encadré (`Clics par contenu`), vous retrouvez le détail des chiffres par ressource. Pour chaque ressource, vous aurez :&#x20;
  * Le nombre de clics sur la ressource en question.
  * Une barre de progression du nombre de clics sur la ressource par rapport au nombre de clics total sur le widget.

## Aperçu d'un widget

L'aperçu du widget dépend du type de rendu de ce dernier :&#x20;

* S'il s'agit d'un widget de type `Embed` ou `Modale` : Au clic sur la carte d’un widget, une fenêtre s'ouvre. Dans cette fenêtre, vous pouvez voir un aperçu du rendu du widget dans votre application ou site (dans le cas de l'embed, des zones grises matérialisent le contenu de votre site).&#x20;
* S'il s'agit d'un widget de type `Drawer` : Au clic sur la carte d’un widget, un panneau latéral s'ouvre. Vous pouvez y voir un aperçu du rendu du widget dans votre application ou site.

Dans la zone du bas de la modale, il y a plusieurs boutons :&#x20;

* `Obtenir le code` : vous donne le choix entre [envoyer](#recuperer-le-code) le code du widget directement par mail (avec le bouton `Envoyer les instructions`) ou  [récupérer et copier](#recuperer-le-code) le code du widget (avec le bouton `Copier le code`)
* `Modifier` : vous permet d'ouvrir le panneau latéral d'édition.

<figure><img src="https://2006110990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ79zpqfFC0YiOG6mb94n%2Fuploads%2FYAn3Nf9jBHFc8pgvh2J2%2Fimage.png?alt=media&#x26;token=26777671-c606-4620-978d-890d75b577fb" alt="aperçu d&#x27;un widget modale" width="563"><figcaption><p>Aperçu d'un widget modale</p></figcaption></figure>

## **Affichage du widget**&#x20;

Dans votre site ou votre application, de nombreux membres pourront accéder à votre widget. Pas de panique, ils ne verront que les contenus auquel ils ont accès dans le Spot :&#x20;

* Si le membre est connecté, il verra tous les contenus pour lesquels il a les droits.
* Si le membre n'est pas connecté, il voit les contenus visibles par un visiteur (à savoir les lives publics) et les `Sections texte`.

**Pour vous assurer que l'utilisateur voit l'ensemble des contenus du widget en étant connecté, nous vous recommandons de mettre en place une authentification SSO dans l'espace d'intégration du widget.**&#x20;

{% content-ref url="../sso" %}
[sso](https://help.meltingspot.io/manage-spot/sso)
{% endcontent-ref %}

{% hint style="info" %}
Une fois le SSO configuré, il est possible de transmettre le token JWT authentifiant l'utilisateur directement dans le script du widget. Plus d'informations [ici](https://help.meltingspot.io/sso#embed-widgets--sso).&#x20;
{% endhint %}

## Redirection au clic sur la carte d'un Spot content

Chaque carte de contenus est cliquable. Le contenu s'ouvrira alors dans un nouvel onglet. Selon si l'embed est activé ou non, la redirection peut varier.

Si le Spot n’est pas embed, le contenu s'ouvrira sur [go.meltingspot.io](http://go.meltingspot.io).

Si le Spot est embed, on applique le choix que vous avez fait dans vos [Paramètres de redirection](https://help.meltingspot.io/embed#redirection) :

* Si vous avez sélectionné `Pas de redirection`, le contenu s'ouvrira sur [go.meltingspot.io](http://go.meltingspot.io)
* Si vous avez sélectionné `Uniquement les utilisateurs SSO`, le contenu s'ouvrira dans l'embed pour les membres connectés en SSO et sur [go.meltingspot.io](http://go.meltingspot.io) pour les membres non connectés
* Si vous avez sélectionné `Tous les utilisateurs`, le contenu s'ouvrira dans l'embed.

{% hint style="info" %}
Si vous avez réalisé un embed sur plusieurs domaines, il est possible dans le script du widget de spécifier vers quel domaine sera redirigé l'utilisateur au clic. 👉 [Plus d'informations ici](https://help.meltingspot.io/embed#redirection-en-multi-domaines)
{% endhint %}

## Supprimer un widget

Pour supprimer un widget, vous avez 2 possibilités :&#x20;

* Depuis la carte d'un widget, en cliquant sur les trois petits points à droite puis sur `Supprimer`.
* Depuis le panneau latéral d'édition  d'un widget, en cliquant sur les trois petits points en haut à droite puis sur `Supprimer`.

Au clic sur l'un de ces deux boutons, une fenêtre de confirmation s'ouvre.&#x20;

{% hint style="danger" %}
Attention, toute suppression est définitive !
{% endhint %}

{% hint style="info" %}
Si vous supprimez un widget dans les paramètres de votre Spot, il est conseillé de le supprimer aussi dans le code de votre application ou site - pas d'inquiétude si vous oubliez, vos membres ne verront qu'un encart vide 😉
{% endhint %}