# Widget de réservation en ligne pour site web

Le widget aidera les clients à réserver vos services via Telegram et sur votre site web.

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

Le widget peut être intégré à la fois à un site web créé avec MaviBot et à une page d’atterrissage réalisée avec d’autres constructeurs.

## Comment créer un widget

{% hint style="info" %}
Tout d’abord, vous devez créer une branche et configurer les services en les attribuant aux employés. Nous avons expliqué comment procéder dans l’article « Paramètres du service de réservation ».
{% endhint %}

Pour commencer, allez à la section « Widgets », que vous trouverez dans le menu supérieur.

<div data-with-frame="true"><figure><img src="/files/077f4593cc61fec9562a5aa84aab824d0ca06c2b" alt="" width="563"><figcaption></figcaption></figure></div>

Si aucun widget n’a encore été créé dans le projet, vous verrez quatre boutons au milieu de l’écran dans la section « Widgets ».

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

Cliquez sur le bouton « Widget de réservation en ligne » et vous serez redirigé vers les paramètres du widget.

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

### Informations principales

Dans cet onglet, vous devez saisir le nom du widget (qui sera affiché sur le site web) et le domaine du site sur lequel vous souhaitez faire apparaître le widget de réservation en ligne (si le site n’est pas créé avec MaviBot).&#x20;

<figure><img src="/files/66347f942fcc33e1e5d6a24aac12045818da4fc5" alt="" width="563"><figcaption></figcaption></figure>

Si le site est créé à l’aide du constructeur MaviBot, ouvrez l’onglet « Sites » et copiez le lien de votre site MaviBot.

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

&#x20;Ensuite, sélectionnez la branche dont les services et le personnel seront affichés dans le widget.

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

Vous pouvez également ajouter un lien vers la politique de confidentialité et un lien de consentement aux données.

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

Vous pouvez maintenant passer à la personnalisation du widget.

### Analytique

Vous pouvez également configurer des événements d’analyse.

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

Pour ce faire, saisissez l’ID Facebook Pixel, Google Analytics ou Metrica dans le champ correspondant et indiquez la valeur de l’événement.

<div data-with-frame="true"><figure><img src="/files/2c0c2980b5c14c24ffdf82264385743058cea632" alt="" width="325"><figcaption><p>Par exemple, comment saisir les données</p></figcaption></figure></div>

### Paramètres d’apparence

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

Le logo et le nom du widget seront affichés dans son en-tête.

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

Ensuite, vous pouvez saisir un titre et un sous-titre dans le widget, qui apparaîtront au-dessus des boutons de sélection du service ou du spécialiste.

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

**Palette de couleurs du widget**

Vous pouvez choisir la palette de couleurs du widget selon vos préférences :

1. Arrière-plan du widget :.
2. Le thème principal de la marque du widget affichera les boutons, les prix et les icônes dans la palette de couleurs sélectionnée.
3. Couleur du texte : modifie la couleur du texte du bouton ou du texte principal selon l’option sélectionnée.
4. Texte du bouton.

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

Par défaut, les boutons affichent le texte **« Sélectionner des services »** et **« Sélectionner un spécialiste**», mais vous pouvez personnaliser le texte comme vous le souhaitez :

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

Passez en mode édition du site web.

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

Ensuite, trouvez la section **« Réservation en ligne »** dans la liste et ajoutez-la.

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

Dans les paramètres de contenu, choisissez quel widget afficher sur le site (si vous avez plusieurs widgets de réservation en ligne).

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

Si nécessaire, vous pouvez modifier l’arrière-plan et les paramètres d’affichage de la section du widget. Pour ce faire, survolez la section et cliquez sur l’onglet **« Paramètre avancé »** .

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

Définissez l’arrière-plan souhaité et les paramètres d’affichage.

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

Enregistrez les paramètres du site.
\
Vos clients peuvent désormais réserver des services 24h/24 en visitant simplement votre site web&

**Comment intégrer le widget sur un autre site web**

Après avoir enregistré le widget, actualisez la page pour voir le bloc suivant contenant le script du widget et un champ permettant de saisir le nom de la section.

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

Si vous devez intégrer le code sur votre site web, copiez le script et collez-le dans votre page d’atterrissage .

Si vous utilisez le widget sur vos propres sites qui ne sont PAS créés avec MaviBot, veillez à saisir la classe de l’élément dans le champ prévu à cet effet.

<div data-with-frame="true"><figure><img src="/files/3566ad6ac769743155c1b3136ac286236285e6e3" alt="" width="563"><figcaption></figcaption></figure></div>


---

# 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/booking/widget.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.