# Personnaliser les widgets du programme

#### Accédez à l’éditeur de widgets

1. Dans le menu de navigation de gauche, sélectionnez ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Contenu**.
2. Dans la *Widgets* carte, sélectionnez **Modifier les widgets.**
3. Dans le menu latéral gauche, sélectionnez le nom du widget que vous souhaitez modifier.

   <div data-with-frame="true"><figure><img src="https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-54ffcf92fdcf6527acb6390b421de09f83d5a8f4%2F5d8a0b7afd11abc5f0db04be64b30635a1b0d697f529ce21338b6c8af1fa32df.jpg?alt=media" alt="" width="513"><figcaption></figcaption></figure></div>

#### Personnalisez vos widgets

{% stepper %}
{% step %}

#### **Étape 1 : Choisir un modèle**

1. Dans le menu latéral gauche, sous *Widget actuel*, sélectionnez **Modèles**.
2. Sélectionnez **Appliquer le modèle** à côté du modèle avec lequel vous souhaitez commencer.

   <div data-with-frame="true"><figure><img src="https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-23c217eaab5f3d3a6ab40f1fe4282bd44c6ee667%2F225f0149361a6b987d2a69f1c8f8d6e006b237c6fc37f35bb439f5bac468c88a.jpg?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="success" %}
**Remarque :** Si vous souhaitez prévisualiser l’apparence du modèle sans valider la modification, sélectionnez ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[Aperçu]** avant d’enregistrer. Sélectionnez le bouton **Enregistrer** uniquement lorsque vous êtes prêt à valider les modifications effectuées.
{% endhint %}
{% endstep %}

{% step %}

#### **Étape 2 : Ajuster le contenu du widget**

Vous pouvez ajouter, modifier, déplacer ou supprimer des composants pour modifier le contenu que vos ambassadeurs clients voient dans le widget.

{% hint style="success" %}
**Remarque :** Pour une explication des différents éléments de l’éditeur de widgets, reportez-vous à [Présentation de l’éditeur de widgets](https://help.impact.com/brand/fr/que-souhaitez-vous-apprendre/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-editor-overview).
{% endhint %}

{% tabs %}
{% tab title="Ajouter" %}

1. Sur le côté droit de la page, dans l’onglet *Composant* du menu, **Ajouter** sélectionnez un groupe de composants.
   * En savoir plus sur les [composants disponibles](https://help.impact.com/brand/fr/que-souhaitez-vous-apprendre/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained) et sur la façon dont ils sont regroupés.
2. Sélectionnez le composant approprié.
3. Sélectionnez le bouton bleu **Ajouter à** l’endroit où vous souhaitez que le composant apparaisse sur le canevas.

   <div data-with-frame="true"><figure><img src="https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-faf3362b50a4598aeacff4ca831e5dcef8c7ef6e%2F346370cdced07562b504cd2b9bf6bf08b51539060e9551f784f029d4899ffa12.jpg?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Modifier" %}
Les propriétés que vous pouvez modifier dépendront du type de composant que vous avez sélectionné. Par exemple, si vous sélectionnez le composant *Image d’en-tête* , vous pourrez sélectionner une nouvelle image et modifier la couleur d’arrière-plan. Si vous sélectionnez un élément de texte seul, comme un en-tête, vous pourrez alors modifier la police, la couleur du texte et le contenu du texte.

1. Sélectionnez le composant que vous souhaitez modifier.
2. Utilisez les options de l’onglet *Composant* du menu, **Modifier** pour en modifier les propriétés.

   * Si vous souhaitez insérer un lien dans un composant de texte, vous pouvez [le faire en modifiant le HTML du widget](https://help.impact.com/brand/fr/que-souhaitez-vous-apprendre/advocate-program/manage-advocate-participant-experiences/edit-your-widget-or-microsite-html-and-css-for-advocate).

   <div data-with-frame="true"><figure><img src="https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3e26ab9dbdff4f8e5d3d3e078d965672ade44d45%2F026f0ef0af7421ecfab6535433ea587862ec12c5223e8b393ef1db1228676e1f.jpg?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Déplacer" %}

1. Dans le canevas, sélectionnez le composant que vous souhaitez déplacer.
2. Sélectionnez ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9e2a26b918e7394cf67e8a26e3713e081b203ac9%2F15d049b0c04d1c54c39dbbb5a7cd2ba64d86f1f99220111674e768744ea7ceb9.svg?alt=media) **\[Déplacer]**.
   * Certains composants ne peuvent pas être déplacés. L’option ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9e2a26b918e7394cf67e8a26e3713e081b203ac9%2F15d049b0c04d1c54c39dbbb5a7cd2ba64d86f1f99220111674e768744ea7ceb9.svg?alt=media) **\[Déplacer]** n’apparaîtra que s’il existe un autre emplacement valide sur le canevas vers lequel le composant peut être déplacé.
3. Sélectionnez le bouton bleu **Déplacer vers** bouton vers lequel vous souhaitez déplacer le composant.

   * Au lieu d’une approche par glisser-déposer, vous devrez sélectionner le bouton puis choisir la destination.

   <div data-with-frame="true"><figure><img src="https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-7bd9887e9f359c787f834a8344a181d7bb186dd3%2Faadaf737882c59604dcaa6bbed1857c867a32cad8c3dd8ea7975c047c04e6a3f.jpg?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Supprimer" %}

1. Sélectionnez dans le canevas le composant que vous souhaitez supprimer.
2. Sélectionnez ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c5ab8423372b2c345ded634b7aa4cab16c87fe3a%2Fd17a259fe817ff10ea9fd87140a89bd62ece6fa9940e05902574dcf95bed5960.svg?alt=media) **\[Supprimer]**.

   <div data-with-frame="true"><figure><img src="https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-030ab8fb2f678027aa57af859245968daee6f736%2F987319390fa75c5fb85f94d2d6e0a951fbf4511a72dbd91af4e55c8f39317301.jpg?alt=media" alt="" width="507"><figcaption></figcaption></figure></div>

{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}

#### **Étape 3 : Personnaliser l’apparence et le thème du widget**

**Ajouter des images ou des logos**

1. À droite, dans l’onglet *Composant* du menu, **Ajouter** sélectionnez la catégorie **Composants courants** .
2. Sélectionnez soit :
   * **Image héro superposée** (une image avec du texte superposé modifiable)
   * **Image** (une image simple sans texte par-dessus)
3. Ajoutez l’image au canevas.
4. Dans le *menu des composants* **Modifier** sélectionnez la catégorie **bouton Choisir un fichier** sous l’en-tête *Image* .

   <div data-with-frame="true"><figure><img src="https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-564558169dbd2a3efe25c902610d7278c257626b%2F47c2ef7ef4780763f8648b19a1a580e43f68104b6205f5de72c51bf8ae9d8a1c.jpg?alt=media" alt="" width="353"><figcaption></figcaption></figure></div>

**Remplacer des images ou des logos**

1. Dans le canevas, sélectionnez la photo que vous souhaitez modifier.
2. Dans le **Modifier** menu, sélectionnez ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-d05e21635c52fff94d35ca4c6b05c1deecc699ef%2F768d04f4d7e1b5b745577812f7d67db99d988bfc34749b6e575a04438d6cee36.svg?alt=media) **\[Supprimer]** puis sélectionnez **bouton Choisir un fichier** pour téléverser de nouveau une image.

   <div data-with-frame="true"><figure><img src="https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-30ee95734c8150b1983dea767f0e729e157df91e%2F65602249ec03ef7f267348ae795f32755c8ca109ed253d98bab523b584b27f3e.jpg?alt=media" alt="" width="351"><figcaption></figcaption></figure></div>
3. Téléversez l’image à l’aide de l’une de ces méthodes :
   * Glisser-déposer l’image
   * Parcourir les fichiers sur votre ordinateur
   * Dans le *Adresse Web* onglet, collez l’URL publique du fichier
4. Sélectionnez **Terminé**.

**Ajuster les boutons de partage affichés**

Vous pouvez modifier les boutons de partage existants à l’aide du menu **Modifier** .

1. Sélectionnez sur le canevas le bouton de partage que vous souhaitez modifier.
2. Dans le **Modifier** onglet, sélectionnez le nom du site ou du service sous le *Média de partage* .

   <div data-with-frame="true"><figure><img src="https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-329fb56148698f747349956ce5d6d95859a7bc3a%2Fcb6384644531cbcceed4a4f72bac70c0883e383f8619f6e03f304e4e281919b2.jpg?alt=media" alt="" width="356"><figcaption></figcaption></figure></div>

Ajoutez un nouveau bouton de partage à l’aide du **Ajouter** .

1. Dans le **Ajouter** onglet, sélectionnez **Partage**.

   <div data-with-frame="true"><figure><img src="https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-e8ffcffaec4bcabee098c5811ceca22f74c38e9e%2F349cee3ff230764af0891ae493ab5b8af34a592711ec5a7b027a3fc5b77a02ef.jpg?alt=media" alt="" width="339"><figcaption></figcaption></figure></div>
2. Sélectionnez la carte appropriée.
3. Sélectionnez le bouton bleu **Ajouter à** bouton pour placer le composant sur le canevas.
   {% endstep %}

{% step %}

#### **Étape 4 : Prévisualiser et enregistrer**

1. Prévisualisez l’apparence du widget pour vos participants en sélectionnant ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[Aperçu]** dans la barre de menu supérieure.
   * Vous pouvez basculer entre un aperçu de l’expérience pour les utilisateurs ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ae8027a26340e35a4d47f2a067cfadc9fc78113f%2F286f2a6c1251052ae82b73cd1c52b622b18f5203ba9cc10fde4d74292ac28d34.png?alt=media) **\[Ordinateur]**, ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-deeb14b0e398d5dbb2dfb280d3fd7d8e9411b26e%2F74c7be4be7f1d77a3793767c29c5bd878acceacf1d2533055231d5110b12dd61.png?alt=media) **\[Tablette]**, ou ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6156958cf5fc18498276161791a0514d9005d7cf%2F906c40a4da5b9c02a51450974f61a71761acc07baff3052b53f708d5b768a9be.png?alt=media) **\[Mobile]** en sélectionnant l’icône d’appareil correspondante.
2. Pour revenir à l’interface d’édition, sélectionnez ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-60e9ace573178da411cb3be9c6f3b0f4b7e5b524%2F4094fadf599e544cfc618c18eb22087defdb9be38a580cd0041a242a88294e1e.svg?alt=media) **\[Modifier]** dans la barre de menu supérieure.

   <div data-with-frame="true"><figure><img src="https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-cebcc495d7dcfd7f7e3a77ab7061913c92b9dcf2%2F0138d6f68eff457694e6f8a5120f0165ae55112510f8928f35fc9771e5a97646.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>
3. **Enregistrer** vos modifications.

   <div data-gb-custom-block data-tag="hint" data-style="warning" class="hint hint-warning"><p><strong>Avertissement :</strong> L’éditeur de widgets n’enregistre pas automatiquement vos modifications. Cliquez <strong>Enregistrer</strong> fréquemment pour vous assurer de ne pas perdre votre travail.</p></div>

Lorsque vous sélectionnez **Enregistrer**, les modifications seront ajoutées à votre [brouillon de programme](https://help.impact.com/brand/fr/que-souhaitez-vous-apprendre/advocate-program/getting-started-with-advocate/create-and-publish-a-program-draft-for-advocate).
{% endstep %}
{% endstepper %}

#### Options de personnalisation avancées

Les composants avancés vous permettent d’inclure du contenu conditionnel basé sur l’ *e-mail*, *segment*, ou *champ personnalisé*du participant. Par exemple, si vous souhaitez afficher un classement uniquement pour les participants abonnés au niveau or, le composant **section conditionnelle selon le segment** vous permettra de le faire.

Vous pouvez ajouter des composants avancés à partir de l’onglet **Ajouter** . Leur configuration demande un peu plus de travail, car vous devrez saisir une [expression JSONata](http://docs.jsonata.org/overview.html) dans la zone *Condition* qui définit la logique indiquant quand la condition est remplie. Contactez notre [équipe d’assistance](mailto:saasquatch-support@impact.com) si vous avez besoin d’aide.

#### En savoir plus

* [Modifier le HTML de votre widget ou microsite pour Advocate](#access-the-widget-editor-0-0)
* [Installer des packages NPM personnalisés pour Advocate](https://help.impact.com/brand/fr/que-souhaitez-vous-apprendre/advocate-program/manage-advocate-participant-experiences/install-custom-npm-packages-for-advocate)