# Widget de preuve sociale

Le widget de preuve sociale simule des commandes ou des achats de votre produit sur le site web, en les affichant sous forme de notifications contextuelles.

<div data-with-frame="true"><figure><img src="/files/8ba6c821796b26c8fbdda966eb2889178a85a383" alt=""><figcaption></figcaption></figure></div>

#### **Comment fonctionne le widget**

Le widget fonctionne selon un principe psychologique simple : lorsque les visiteurs voient d’autres personnes effectuer des achats, ils deviennent eux aussi plus enclins à acheter.

#### **Principaux avantages**

L’intégration de ce widget sur votre site web offre plusieurs avantages stratégiques :

* **Stimulez les achats impulsifs :** attirez instantanément de nouveaux clients en exploitant la preuve sociale et la prise de décision impulsive. Les gens sont naturellement attirés par les articles populaires et veulent imiter les choix des autres.
* **Renforcez la confiance et la fidélité :** mettez en avant un volume élevé de commandes en temps réel pour renforcer votre crédibilité. Les clients sont plus susceptibles de faire confiance aux entreprises qui démontrent une base d’utilisateurs active et satisfaite et d’y rester fidèles.
* **Engagez grâce à des mises à jour ciblées :** tenez les clients informés des événements importants et des promotions spéciales. Vous pouvez entièrement personnaliser la fréquence d’apparition du widget et le public qui le voit en fonction de critères d’audience spécifiques.

## Comment créer et configurer le widget

Pour créer un widget, allez dans l’onglet correspondant « Widgets ».

<div data-with-frame="true"><figure><img src="/files/3a9ef491b30cf73dbd2b62bc61f5740ed8210212" alt=""><figcaption></figcaption></figure></div>

Puis cliquez sur le bouton **« Créer un widget ».**

<div data-with-frame="true"><figure><img src="/files/4746d585cdc6a5ab3ac800b6663b28b2c64fbbf1" alt=""><figcaption></figcaption></figure></div>

Un menu déroulant apparaîtra affichant les widgets disponibles pour l’intégration au site web ; veuillez sélectionner celui dont vous avez besoin dans la liste :

<div data-with-frame="true"><figure><img src="/files/898b558bb564367a91161a22e85f2c8047e72519" alt=""><figcaption></figcaption></figure></div>

Vous serez ensuite redirigé vers la page des paramètres du widget :

<div data-with-frame="true"><figure><img src="/files/5f0c9fa187aa122723eacf754c10f2338d9e60fb" alt=""><figcaption></figcaption></figure></div>

### Informations générales

#### Nom du widget

Spécifiez le nom de votre widget dans le champ de paramètres « Nom du widget » :

<div data-with-frame="true"><figure><img src="/files/3bb797ae26a92866ca7a0be3622374eeb392629e" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
Le nom du widget est un champ obligatoire et sera affiché uniquement dans la section « Widgets » ; il ne sera pas visible pour vos clients.
{% endhint %}

#### domaine

Il s’agit du deuxième champ obligatoire, où vous devez indiquer le domaine de votre site web :

<div data-with-frame="true"><figure><img src="/files/1db0495483579037a9793241357c3c51e36843d9" alt=""><figcaption></figcaption></figure></div>

Il peut s’agir d’un site web construit sur MaviBot, créé à l’aide de la plateforme Tilda, ou de votre propre site personnalisé.

### Paramètres généraux du contenu

Les paramètres généraux du contenu déterminent ce qui sera affiché dans les notifications contextuelles du widget sur le site web.

<div data-with-frame="true"><figure><img src="/files/954232833de4aaa457078e040275d42d37b8017a" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
Veuillez faire attention aux variables de remplacement telles que \[name], \[city] et autres — vous les utiliserez lors de la création de messages dans le widget, dans l’onglet « Options du widget ».
{% endhint %}

#### Variable de nom

Les champs de variable de nom vous permettent d’afficher des prénoms spécifiquement masculins ou féminins sur le site web :

Pour basculer les noms en masculin ou féminin, utilisez le champ correspondant :

<div data-with-frame="true"><figure><img src="/files/d1985fb0426df13a610e10bd41f0ca3436fe04b8" alt=""><figcaption></figcaption></figure></div>

Vous pouvez également sélectionner des noms selon la localisation géographique :

<div data-with-frame="true"><figure><img src="/files/430a364bebef3290664650d6a6f07a685c028a99" alt=""><figcaption></figcaption></figure></div>

La sélection des noms sera alors ajustée.

#### Variable de ville

Vous pouvez également choisir des noms selon la localisation géographique :

<div data-with-frame="true"><figure><img src="/files/4a2c4797d569a3133095085cfd06f4bbe2086042" alt=""><figcaption></figcaption></figure></div>

#### **Variable de somme**

Vous pouvez insérer une somme dans le bloc de texte du widget, qui peut être soit une valeur fixe, soit un nombre généré aléatoirement dans une plage spécifiée :

<div data-with-frame="true"><figure><img src="/files/de4d74035f012acdb0b7a2fede4ec24702bbf66d" alt=""><figcaption></figcaption></figure></div>

Pour saisir une somme exacte, utilisez le champ vide à droite :

<div data-with-frame="true"><figure><img src="/files/c33fec7c58dddb15dd059e3f4233ddcca3243948" alt=""><figcaption></figcaption></figure></div>

Si vous sélectionnez le type « somme dans une plage », vous devez saisir les valeurs minimale et maximale dans les champs afin de générer un nombre aléatoire dans cette plage :

<div data-with-frame="true"><figure><img src="/files/8c8abb90fc2bb02dafda78333caff47368310a15" alt=""><figcaption></figcaption></figure></div>

Si nécessaire, vous pouvez également définir le nombre de décimales pour l’arrondi :

<div data-with-frame="true"><figure><img src="/files/5c34401ccc0699bda32c6f7aa15a01f817ce0a6c" alt=""><figcaption></figcaption></figure></div>

### Variable personnalisée

Pour insérer vos propres variables personnalisées dans le widget, cliquez sur **« Ajouter une variable »** .

<div data-with-frame="true"><figure><img src="/files/75395df41b707376004395a95d9ebdf4a7055aad" alt=""><figcaption></figcaption></figure></div>

Vous devrez définir le nom de la variable à l’aide de crochets dans la fenêtre modale qui s’ouvre.

<div data-with-frame="true"><figure><img src="/files/9d14da416e692880c24b68dd788bd7a93977ec83" alt=""><figcaption></figcaption></figure></div>

Ensuite, saisissez les valeurs de la variable en veillant à ce que chaque nouvelle valeur soit écrite sur une **nouvelle ligne** sans virgules ni autres séparateurs :

<div data-with-frame="true"><figure><img src="/files/d5fd98e3ee89f72ac13e74cd78ee6af362350430" alt=""><figcaption></figcaption></figure></div>

Ensuite, cliquez sur « Enregistrer » pour stocker les valeurs dans le système :

<div data-with-frame="true"><figure><img src="/files/c6ddc5f4df0a0f3dc653228feb28f5588ca7ac45" alt=""><figcaption></figcaption></figure></div>

Ensuite, vous verrez que la variable personnalisée a été enregistrée dans les paramètres généraux du contenu :

<div data-with-frame="true"><figure><img src="/files/7b90b21e8d3f980bf7a8b3c07d5f2e6ad6a73e8b" alt=""><figcaption></figcaption></figure></div>

Pour utiliser la variable plus tard, insérez son nom entre crochets dans le champ « Texte principal » de la section « Contenu » :

<div data-with-frame="true"><figure><img src="/files/b8a78423da76873bd79916528a265fa1801e6a12" alt=""><figcaption></figcaption></figure></div>

### Conditions de déclenchement du widget

<div data-with-frame="true"><figure><img src="/files/ff3c0ac79a5418de2839c6a90b7e7fc42681c4d2" alt=""><figcaption></figcaption></figure></div>

#### Intervalle de temps

Vous pouvez définir le moment d’affichage du widget sur le site web en utilisant la fonctionnalité « Quand afficher le widget » :

1. **Instantanément**\
   Ce paramètre affichera le widget immédiatement lorsque l’utilisateur ouvre le site web.
2. **Après un délai**

<div data-with-frame="true"><figure><img src="/files/2439baf33bcec89ca6de75ac6011adefc94b611c" alt=""><figcaption></figcaption></figure></div>

Le widget apparaîtra sur le site web après le nombre de secondes spécifié, une fois que l’utilisateur l’aura ouvert.

L’intervalle de temps est défini en secondes, avec une valeur minimale de 1 seconde et une valeur maximale de 15 secondes.

3. **Après défilement**

<div data-with-frame="true"><figure><img src="/files/5b527daa21fafd562cd1c86e5ca787d25fa9f74a" alt=""><figcaption></figcaption></figure></div>

La condition « Après défilement » signifie que les widgets commenceront à fonctionner sur le site après que votre utilisateur aura fait défiler la page d’un nombre de pixels défini.

#### Intervalle de temps

Il existe également la condition de déclenchement suivante :

1. Durée d’affichage :
   * Définissez la valeur en secondes.
   * Elle détermine combien de temps le widget restera visible avant que la notification ne disparaisse.
2. Intervalle entre les délais
   * Définissez la valeur en secondes.
   * Il détermine le délai entre les affichages du widget — après l’apparition d’une notification, la suivante ne s’affichera qu’après le nombre de secondes spécifié.

<div data-with-frame="true"><figure><img src="/files/909b92df32f8b90e5dec683ccc3bc003f9b5340e" alt=""><figcaption></figcaption></figure></div>

#### Définir une condition

&#x20;Examinons de plus près les conditions disponibles.

1. Paramètres UTM

{% hint style="info" %}
Pour apprendre ce que sont les balises UTM et comment les utiliser, nous vous recommandons de lire l’article «[Comment transférer des balises UTM](/doc/fr/faq/questions/...transferer-les-etiquettes-utm.md)."
{% endhint %}

<div data-with-frame="true"><figure><img src="/files/dbb9a4d257813774e2d1fecb07d6ecd946497c57" alt=""><figcaption></figcaption></figure></div>

Saisissez le nom de la balise requise dans le champ prévu à cet effet :

<div data-with-frame="true"><figure><img src="/files/cf625c2caebe90ac0416ce7379a155b310b01a1f" alt=""><figcaption></figcaption></figure></div>

Ensuite, sélectionnez l’opérateur qui correspond à la balise et à la valeur :

<div data-with-frame="true"><figure><img src="/files/195290f74b1f84006959ab8f6ce2f737944a0726" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
Quelle est la différence entre contient/ne contient pas et égale/ n’est pas égal à ?

La principale différence est que l’opérateur « contient/ne contient pas » vérifie si la balise UTM inclut (ou n’inclut pas) une certaine valeur.<br>

En revanche, l’opérateur « égale » nécessite une correspondance exacte, ce qui signifie que le système recherche une balise UTM qui correspond exactement à la valeur spécifiée (et, par conséquent, « n’est pas égal à » fonctionne à l’inverse).
{% endhint %}

Ensuite, saisissez la valeur requise pour la balise UTM :

<div data-with-frame="true"><figure><img src="/files/deb65a191539f80e45ca7c97f06df7d550f4e003" alt=""><figcaption></figcaption></figure></div>

2. Pays

Vous pouvez également choisir la condition « Pays », qui affichera le widget en fonction du pays IP du visiteur.

Sélectionnez le pays souhaité dans la liste, ainsi que le type d’opérateur (« est » ou « n’est pas ») :

3. Appareil

Si nécessaire, appliquez la **condition « Appareil »** pour afficher le widget en fonction du type d’appareil utilisé par le visiteur pour accéder au site :

Les paramètres incluent également une fonctionnalité permettant d’ajouter plusieurs valeurs pour l’affichage du widget. Il suffit de cliquer sur « + Ajouter une valeur » et de définir une ou plusieurs conditions supplémentaires selon les besoins :

## Options du widget

Une fois la configuration du widget terminée, allez dans les **« Options du widget »** :

<div data-with-frame="true"><figure><img src="/files/fc07205862222cff28c518271f20f4be0acf41f6" alt=""><figcaption></figcaption></figure></div>

Dans cet onglet, vous pouvez définir les paramètres d’apparence et de contenu du widget qui seront affichés à vos utilisateurs.

### Contenu

<div data-with-frame="true"><figure><img src="/files/9ebad19d48a49ac9d44d13222b57aa4faf52ef96" alt=""><figcaption></figcaption></figure></div>

Vous pouvez saisir le texte statique ou des variables dynamiques (par ex. : `[name]`, `[sum]`, `[city]`) dans le **Titre** et **Texte principal** champs. Lorsque le widget est actif, le système remplacera automatiquement ces variables par les valeurs réelles configurées dans les paramètres de votre widget.

#### Icône

<div data-with-frame="true"><figure><img src="/files/1d0cc25efa6cb8299c3d2acecc612d6be6ebb90a" alt=""><figcaption></figcaption></figure></div>

L’icône sera affichée à l’intérieur de la notification contextuelle :

<div data-with-frame="true"><figure><img src="/files/b64a9a82e9c1afde4c1c05c57dfc9c418290dfb2" alt=""><figcaption></figcaption></figure></div>

### Apparence

Les paramètres d’apparence incluent généralement des options permettant de choisir les couleurs dans une large palette, d’ajuster l’arrondi des coins et de configurer les niveaux d’ombre et de transparence :

<div data-with-frame="true"><figure><img src="/files/4e96dc3a9822979ae1a7446f8c5a7c9358f910c5" alt=""><figcaption></figcaption></figure></div>

1. Palette de couleurs : choisissez les couleurs pour n’importe quel élément du widget — du texte à l’arrière-plan de l’icône. Vous pouvez également sélectionner des dégradés.
2. L’alignement du texte peut être réglé par rapport au centre, au bord droit ou au bord gauche :

<div data-with-frame="true"><figure><img src="/files/d158b31559026fdaa60e4578ef87343532577314" alt=""><figcaption></figcaption></figure></div>

2. Paramètres des coins de la notification : vous pouvez choisir des coins arrondis, carrés ou entièrement circulaires pour le message sur le site web :

<div data-with-frame="true"><figure><img src="/files/a80a5ba1b3792cca419ec758c77116a79c6d808f" alt=""><figcaption></figcaption></figure></div>

#### Masquer le bouton de fermeture du widget

<div data-with-frame="true"><figure><img src="/files/e0e2fe50b156d70e4647743b01f8e0b2f3672180" alt=""><figcaption></figcaption></figure></div>

Cette case à cocher masquera le bouton de fermeture (×) dans le coin du widget.

<div data-with-frame="true"><figure><img src="/files/702b15324a11b467a877fc9c2cf356ce811bb340" alt=""><figcaption></figcaption></figure></div>

### Position du widget sur le site web

Par défaut, les notifications sont configurées pour apparaître dans le coin inférieur droit de l’écran. Si nécessaire, vous pouvez modifier la position du widget sur votre site web à l’aide des paramètres ci-dessous.

<div data-with-frame="true"><figure><img src="/files/6c3896f63d58a4342a927c6c84c69103bb1c4c9f" alt=""><figcaption></figcaption></figure></div>

La position du widget est calculée à partir des bords inférieur et droit de l’écran. Pour le déplacer vers le bord gauche, définissez le **champ « Marge droite »** sur **60%**.

## Comment intégrer le widget sur le site web

Une fois que vous avez configuré tous les paramètres et personnalisé l’apparence du widget selon votre design unique, cliquez sur le **« Ajouter le widget »** bouton en bas de l’écran.

Vous serez redirigé vers la liste des widgets existants, où vous devez cliquer sur le **« Code d’intégration sur le site web »** bouton :

<div data-with-frame="true"><figure><img src="/files/c9c09b3f3d001f45139120fa8c954f363e6d3543" alt=""><figcaption></figcaption></figure></div>

Une fenêtre modale s’ouvrira et affichera le code du script :

<div data-with-frame="true"><figure><img src="/files/90d0bd1eac2944b2f066d4639975b5a9f235d917" alt=""><figcaption></figcaption></figure></div>

Copiez le script généré, puis rendez-vous dans les paramètres du site web pour le domaine que vous avez précédemment indiqué dans la configuration du widget.

Ensuite, collez le script dans le code HTML à l’intérieur de la section :

<div data-with-frame="true"><figure><img src="/files/5cd332f8cec93b9f5a4821d8cb0c53858be2dcaf" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
Pour intégrer le widget sur un site Tilda, copiez le script du widget à l’aide du bouton « Code d’intégration sur le site web », puis ajoutez-le à la page de votre site.
{% endhint %}

C’est fait ! La configuration et l’installation du widget sur votre site web sont maintenant terminées !


---

# 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://docs.mavibot.ai/doc/fr/websites/widgets/proof.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.