# 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 dans un site web créé avec MaviBot et dans une page d’atterrissage créée avec d’autres builders.

## 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 faire dans l’article « Paramètres du service de réservation ».
{% endhint %}

Pour commencer, allez à la section « Widgets », que vous pouvez trouver 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 de base

<figure><img src="/files/2e0ae672e039261ae086b67ab2a9224271fd8e8b" alt=""><figcaption></figcaption></figure>

Dans cet onglet, vous devez saisir le nom du widget (qui s’affichera sur le site web) ainsi que le domaine du site où vous souhaitez faire apparaître le widget de réservation en ligne (si le site n’est pas créé avec MaviBot). Si le site est créé à l’aide du builder MaviBot, vous n’avez pas besoin de spécifier le domaine.
&#x20;Ensuite, sélectionnez la branche dont les services et le personnel seront affichés dans le widget :

<figure><img src="/files/99e5ca2b41f9854058fd37932bfd8a06f5fcf82b" alt=""><figcaption></figcaption></figure>

Vous pouvez maintenant passer à la personnalisation du widget.

<figure><img src="/files/6f1e7d7ba10fd254da15ea18e004de6785e5f329" alt=""><figcaption></figcaption></figure>

### Paramètres d’apparence

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

<figure><img src="/files/5bfd50b195ac9f22529f6a6c5ac8db34361de8cb" alt="" width="563"><figcaption></figcaption></figure>

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 :

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

**Schéma de couleurs du widget**

Vous pouvez choisir le schéma de couleurs du widget selon vos préférences :

1. Arrière-plan du widget :

<figure><img src="/files/f4319803d885a2838a533a12a945404642356319" alt="" width="349"><figcaption></figcaption></figure>

2. Le thème principal de la marque du widget affichera les boutons, les prix et les icônes dans le schéma de couleurs sélectionné :

<figure><img src="/files/846bd0eb63ff55ce5a3fb2588a79335566e7edda" alt="" width="349"><figcaption></figcaption></figure>

3. Couleur du texte : modifie la couleur du texte du bouton ou du texte principal selon l’option sélectionnée.

<figure><img src="/files/410e8322758384d66b83acfe4a996bd9459013c6" alt="" width="311"><figcaption></figcaption></figure>

4. Texte du bouton :

<figure><img src="/files/c015d59a6b3a5b58989415293c9d31ec5940ed86" alt="" width="375"><figcaption></figcaption></figure>

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 :

<figure><img src="/files/4e37d5b4f570e24f3361564edc1d1e8e39138698" alt="" width="375"><figcaption></figcaption></figure>

Enregistrez maintenant vos paramètres :

<figure><img src="/files/0c72a922205653ed975c69cb24f4c35391d6dd36" alt=""><figcaption></figcaption></figure>

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

Passez au mode d’édition du site web :

<figure><img src="/files/445bbdc72552e378ce077fe3c8f8b6caa1edaec4" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/e0d4b50e06b0f72d5e96121b9a7c8dfa5736888a" alt="" width="351"><figcaption></figcaption></figure>

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

<figure><img src="/files/3eb9324339ef76aa80e4e236cf7b6bdb41b1dd33" alt=""><figcaption></figcaption></figure>

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 le bouton **« Paramètres »** :

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

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

<figure><img src="/files/d5e151e6c1e02e7650d0df205a3438096a85c6a8" alt=""><figcaption></figcaption></figure>

Enregistrez les paramètres du site.
\
Désormais, vos clients peuvent réserver des services 24 h/24 et 7 j/7 simplement en visitant votre site web :

<figure><img src="/files/46e41015d8591cfefe4057f7af97add2b61ce363" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/2e55ade17032f81b1d4f02b4b7af3b78df985626" alt="" width="375"><figcaption></figcaption></figure>

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

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

<figure><img src="/files/05826502756e7f4b95014a6eda29925073a6c2d2" alt=""><figcaption></figcaption></figure>

## Widget Telegram

Maintenant que vous savez comment créer un widget et l’intégrer à votre site web, vous pouvez créer un **bouton Web App dans Telegram** qui ouvre votre site comme une application dans la messagerie.

{% hint style="info" %}
Au lieu d’un site web complet, vous pouvez créer une page d’atterrissage avec une seule section contenant le widget de réservation en ligne et la partager avec vos clients sous forme de bouton Telegram à l’aide du bouton Web App.
{% endhint %}

Vous devez utiliser la fonction `quiz_link(mini_landing_page_id, display_my_domain)`mais seul le paramètre `mini_landing_page_id` est requis.<br>

Ensuite, créez un bloc dans lequel, dans le calculateur, vous attribuez une variable (dans cet exemple, la variable s’appelle `booker_link`) qui utilise la fonction `quiz_link(mini_landing_page_id)`, avec l’ID de la page du site passé en paramètre :

**Étape 1. Création du bloc avec la fonction**<br>

Créez un bloc dans le builder et, dans le calculateur, définissez une variable avec la fonction comme ceci : booker\_link = quiz\_link('YOUR\_SITE\_ID')

<figure><img src="/files/ab494df77b16c13a05a8e7c68b8b358b2b3cd72c" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Remarque !

N’oubliez pas d’enregistrer les paramètres du bloc.
{% endhint %}

**Étape 2. Trouvez l’ID de la page du site requis.** <br>

Pour trouver l’ID de la page du site, allez dans la section correspondante :

<figure><img src="/files/8d5c2468a2f44fe701192a6b8e7590d7272cf0ae" alt=""><figcaption></figcaption></figure>

Cliquez sur la tuile du site souhaité pour accéder aux paramètres de la page de ce site :

<figure><img src="/files/49ea1e112984f1a339b45552ed557531877e0497" alt=""><figcaption></figcaption></figure>

Ensuite, survolez la ligne contenant la page où vous avez créé la **« Réservation en ligne »** section :

<figure><img src="/files/a0d7d14c44ae5b07256b335f9fd6f7e2a8589d4b" alt=""><figcaption></figcaption></figure>

Copiez l’ID et collez-le dans le bloc du builder d’entonnoir :

<figure><img src="/files/9c748daa7dcc832544e6859a3910a47c413ef19e" alt=""><figcaption></figcaption></figure>

**Étape 3. Ajoutez un bouton au bloc dans le builder.** <br>

Ensuite, développez l’onglet de paramètres « Boutons » (cliquez sur « Boutons ») et cliquez sur **« + Ajouter un bouton »**:

<figure><img src="/files/458ffc304e76d132209032645d29da7b278407c1" alt=""><figcaption></figcaption></figure>

Après avoir cliqué, les paramètres du bouton pour ajouter un nouveau bouton s’ouvriront :

<figure><img src="/files/546ac93159629fdbef2193f452c7bedbd75fa0f9" alt=""><figcaption></figcaption></figure>

Ici, vous devez :

* Définir le nom du bouton : il peut s’agir du nom de votre choix.
* Définir la fonction du bouton : il doit s’agir d’un bouton Telegram Web App.

<figure><img src="/files/076f044faa8ac0728d426b91b1e41b1f385b8bb9" alt=""><figcaption></figcaption></figure>

* Spécifier le lien pour ouvrir le site lorsque le bouton est cliqué :

Le lien est déjà stocké dans une variable à l’aide du calculateur et de la fonction `quiz_link` ; ainsi, dans le champ URL, saisissez la variable attribuée `booker_link` en utilisant l’interpolation — c’est-à-dire en incluant la variable dans `#{}`qui contient le lien vers votre site et votre widget.

<figure><img src="/files/b54f96cc4ea3d94d348b8a760f068a12d4e3866f" alt=""><figcaption></figcaption></figure>

Ensuite, cliquez sur le bouton **« Ajouter »** pour enregistrer les paramètres du bouton et l’ajouter au bloc. Assurez-vous ensuite de cliquer sur **« Enregistrer »** afin de garantir que les paramètres du bloc ne soient pas perdus.

<figure><img src="/files/2678a9fde0cb768d8932c448c6da777d8f64c852" alt="" width="563"><figcaption></figcaption></figure>

Le bloc entièrement configuré ressemble à ceci :

<figure><img src="/files/8836ee3c5cdaf2c3f4ce621ee12950a4b1648b17" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Astuce utile !**\
Il n’est pas nécessaire de créer un bloc conditionnel (comme une vérification de condition principale ou le début d’une conversation) spécifiquement pour le bouton Web App. Vous pouvez créer le bouton et ajouter la `quiz_link` fonction dans n’importe quel bloc de votre entonnoir — qu’il s’agisse d’un bloc d’état, d’un bloc sans état, etc. (voir l’exemple « Bloc d’état de dialogue avec bouton Telegram Web App »).
{% endhint %}

<figure><img src="/files/e3b1d1c96988c9f523f838a026ac9193ddc8c999" alt=""><figcaption><p>Exemple : « Bloc d’état de dialogue » avec un bouton Telegram Web App</p></figcaption></figure>

Le bouton Web App avec le widget de réservation en ligne sera alors disponible dans le bot :

<figure><img src="/files/50840f68f6e482f06cbba0160ff9a65ebca02d62" alt="" width="375"><figcaption></figcaption></figure>

## Callback de réservation

Après qu’un client a réservé un rendez-vous, une notification de callback concernant la réservation sera envoyée dans le dialogue, comme ceci :

<figure><img src="/files/8cd5160327d0584c2547488f8e2ab271b8303bfb" alt="" width="464"><figcaption></figcaption></figure>

<mark style="color:orange;">**new\_order\_in\_calendar**</mark> - la partie immuable du callback&#x20;

&#x20;<mark style="color:jaune;">**\[489046159]**</mark> - order\_id  identifiant de la réservation

<mark style="color:rouge;">**Appointment\_date\_and\_time ajouté**</mark>

<mark style="color:violet;">**pour 30 minutes**</mark> - durée du service&#x20;

<mark style="color:rouge;">**Objet : Test 30**</mark> - à quel objet précis la réservation a été ajoutée

L’apparence du message de callback :

*new\_order\_in\_calendar: \[489046159] Un rendez-vous a été ajouté du 2025-06-01 14:00 au 2025-06-01 14:30 pour 30 minutes. Objet : Test 30*

Vous pouvez configurer une réaction au callback en spécifiant sa valeur dans la condition du bloc :

<figure><img src="/files/84a1f224892c427c1b49136a33b611d2e29eccda" alt=""><figcaption></figcaption></figure>

Dans le bloc, vous pouvez spécifier le message de réponse souhaité à envoyer au client.


---

# 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/settings/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.