# Widget de génération de leads

Le widget générateur de prospects vous aidera à collecter les demandes des utilisateurs de votre site 24 h/24. Voyons comment vous pouvez installer et configurer le widget.

## Paramètres

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

Dans les paramètres du widget, dans la section « Informations de base », vous devez remplir les champs obligatoires suivants :

1. **Nom du widget ;**
2. **Le domaine du site web où vous placez le widget :** il peut s’agir soit d’un site web conçu sur Mavibot, soit sur le service Tilda, ainsi que du vôtre.

Ensuite, il y a des cases à cocher qui aideront à envoyer les retours d’appel au système après que le client a envoyé la demande, ainsi qu’à afficher le logo.

Les champs de paramètres suivants vous aideront à déterminer quelles informations doivent être demandées au client :

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

Si nécessaire, le formulaire envoyé aux clients ne sera pas envoyé à votre site web tant que le client n’aura pas rempli le champ obligatoire.

## Conditions de déclenchement

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

### Intervalle de temps

Vous pouvez définir le temps d’affichage du widget sur le site web. Pour ce faire, utilisez la fonction « Quand afficher le widget » :

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

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

Le widget sera affiché sur le site web après qu’un certain nombre de secondes se soit écoulé depuis la visite du client sur le site web.

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

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

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

La condition « Après défilement » signifie que dès que l’utilisateur effectue une action pour faire défiler le site, qu’il ait fait défiler tout le site jusqu’à la fin ou seulement une petite partie, le widget sera affiché sur le site après un nombre de secondes défini.

La valeur minimale de l’intervalle de temps est de 1 seconde ; la maximale est de 15.

## Apparence visuelle

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

Utilisez la fonction de téléversement d’image dans les paramètres d’apparence pour ajouter une couverture.
\
Nous recommandons de choisir un design lumineux et intéressant afin d’attirer un maximum l’attention des utilisateurs.

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

Ensuite, positionnez l’image en l’alignant par rapport aux bords supérieur, gauche et droit :

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

Ensuite, les champs vides sont définis : vous en aurez besoin si vous souhaitez spécifier le titre et le sous-titre du widget :

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

Ensuite, rédigez un texte de motivation pour intéresser l’utilisateur à votre offre :

<div><figure><img src="/files/48a96f551acaff9a35622a669530907d7e4a7a48" alt=""><figcaption></figcaption></figure> <figure><img src="/files/35b971c4b23eead4c4319a36a1bc3600a755bfb1" alt=""><figcaption></figcaption></figure></div>

#### **Personnalisation graphique**

Dans les paramètres d’apparence, vous pouvez utiliser vos compétences en design graphique pour créer un widget totalement unique.

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

Vous avez accès à une palette de couleurs complète.

Nous vous recommandons également d’expérimenter avec des motifs uniques pour l’arrière-plan du widget afin d’améliorer son attrait visuel.

## **Comment ajouter votre widget à un site web**

Après avoir défini tous les paramètres et modifié l’apparence du widget selon son design unique, cliquez sur le bouton « Ajouter le widget » en bas de l’écran :

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

Ensuite, vous accéderez à la liste des widgets prêts à l’emploi, où vous devrez cliquer sur le bouton « Code d’intégration sur le site » :

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

Après cela, vous verrez une fenêtre modale avec un script :

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

Ensuite, copiez le script et allez dans les paramètres du site web (le domaine indiqué dans la configuration de votre widget). Insérez le script dans le HTML `<head>` section.

{% hint style="info" %}
**Pour intégrer le widget sur un site web Tilda :**

1. Copiez le script du widget en cliquant sur le **« Code d’intégration sur le site web »** .
2. Dans votre éditeur Tilda, collez le script dans les paramètres du projet ou dans un bloc HTML sur la page concernée.
   {% endhint %}

**Parfait !** La configuration et l’installation de votre widget 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/leads.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.