# Widget de agendamento online para site

O widget ajudará os clientes a agendarem seus serviços pelo Telegram e no seu site.

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

O widget pode ser integrado tanto em um site criado com o MaviBot quanto em uma landing page criada com outros construtores.

## Como criar um widget

{% hint style="info" %}
Primeiro, você precisa criar uma filial e configurar os serviços, atribuindo-os aos funcionários. Explicamos como fazer isso no artigo "Configurações do Serviço de Reserva".
{% endhint %}

Para começar, vá até a seção "Widgets", que você encontra no menu superior.

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

Se ainda não houver widgets criados no projeto, você verá quatro botões no meio da tela na seção "Widgets".

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

Clique no botão "Widget de Agendamento Online" e você será levado às configurações do widget.

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

### Informações básicas

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

Nesta aba, você precisa inserir o nome do widget (que será exibido no site) e o domínio do site onde você quer que o widget de agendamento online apareça (se o site não foi criado com o MaviBot). Se o site foi criado usando o construtor do MaviBot, você não precisa informar o domínio.
&#x20;Em seguida, selecione a filial cujos serviços e equipe serão exibidos no widget:

<figure><img src="/files/0577ab0a362ecd60f90adf4d2b4520ba0d9102af" alt=""><figcaption></figcaption></figure>

Agora você pode passar para a personalização do widget.

<figure><img src="/files/40249ee24f1bc3f5b59118c005ec246ba4734cd3" alt=""><figcaption></figcaption></figure>

### Configurações de aparência

O logo e o nome do widget serão exibidos no cabeçalho:

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

Em seguida, você pode inserir um título e um subtítulo no widget, que aparecerão acima dos botões de seleção de serviço ou especialista:

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

**Esquema de cores do widget**

Você pode escolher o esquema de cores do widget de acordo com sua preferência:

1. Fundo do widget:

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

2. O tema principal da marca do widget exibirá botões, preços e ícones no esquema de cores selecionado:

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

3. Cor do texto: altera a cor do texto do botão ou do texto principal, dependendo da opção selecionada.

<figure><img src="/files/1908659b226932272ee6a5321eb0e7d9575750c2" alt="" width="311"><figcaption></figcaption></figure>

4. Texto do botão:

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

Por padrão, os botões exibem o texto **"Selecionar Serviços"** e **"Selecionar Especialista**", mas você pode personalizar o texto como quiser:

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

Agora salve suas configurações:

<figure><img src="/files/100916ac73b9f56896d617c09a25a20ee37525f7" alt=""><figcaption></figcaption></figure>

### Como incorporar o widget no seu site

Acesse o modo de edição do site:

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

Em seguida, encontre a seção **"Agendamento Online"** na lista e adicione-a:

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

Nas configurações de conteúdo, escolha qual widget exibir no site (se você tiver vários widgets de agendamento online):

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

Se necessário, você pode editar o plano de fundo e as configurações de exibição da seção do widget. Para fazer isso, passe o mouse sobre a seção e clique no **"Configurações"** botão:

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

Defina o plano de fundo desejado e as configurações de exibição:

<figure><img src="/files/58d527a7792a23c2eae5f471f120a79e20103bad" alt=""><figcaption></figcaption></figure>

Salve as configurações do site.
\
Agora seus clientes podem agendar serviços 24 horas por dia simplesmente visitando seu site:

<figure><img src="/files/01b25116029e3f29955e57444aa8af671745adb2" alt=""><figcaption></figcaption></figure>

**Como incorporar o widget em outro site**

Depois de salvar o widget, atualize a página para ver o seguinte bloco com o script do widget e um campo para inserir o nome da seção:

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

Se você precisar incorporar o código no seu site, copie o script e cole-o na sua landing page. <br>

Se você estiver usando o widget nos seus próprios sites que NÃO foram criados com o MaviBot, não deixe de inserir a classe do elemento no campo fornecido:

<figure><img src="/files/76bc777708d0fe3f5c976ddfee3c351c23370310" alt=""><figcaption></figcaption></figure>

## Widget do Telegram

Agora que você sabe como criar um widget e incorporá-lo no seu site, você pode criar um **botão Web App no Telegram** que abre seu site como um aplicativo dentro do mensageiro.

{% hint style="info" %}
Em vez de um site completo, você pode criar uma landing page com uma única seção apresentando o widget de agendamento online e compartilhá-la com seus clientes como um botão do Telegram usando o botão Web App.
{% endhint %}

Você precisa usar a função `quiz_link(mini_landing_page_id, display_my_domain)`, mas apenas o parâmetro `mini_landing_page_id` é obrigatório.<br>

Em seguida, crie um bloco em que, na calculadora, você atribui uma variável (neste exemplo, a variável se chama `booker_link`) que usa a função `quiz_link(mini_landing_page_id)`, com o ID da página do site passado como parâmetro:

**Passo 1. Criando o bloco com a função**<br>

Crie um bloco no construtor e, na calculadora, defina uma variável com a função assim: booker\_link = quiz\_link('SEU\_ID\_DO\_SITE')

<figure><img src="/files/273be432133c8fae5866ff5a666cc32dc61bc72f" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Atenção!

Não se esqueça de salvar as configurações do bloco.
{% endhint %}

**Passo 2. Encontre o ID necessário da página do site.** <br>

Para encontrar o ID da página do site, vá para a seção correspondente:

<figure><img src="/files/18638427156fd15e91a264f844d2c0ea06f3dff9" alt=""><figcaption></figcaption></figure>

Clique no bloco do site desejado para ir até as configurações da página desse site:

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

Em seguida, passe o mouse sobre a linha com a página em que você criou a **"Agendamento Online"** seção:

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

Copie o ID e cole-o no bloco no construtor do funil:

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

**Passo 3. Adicione um botão ao bloco no construtor.** <br>

Em seguida, expanda a aba de configurações "Botões" (clique em "Botões") e clique em **"+ Adicionar Botão"**:

<figure><img src="/files/933531038f7306fe5dbc679b9a1c71ed9615d886" alt=""><figcaption></figcaption></figure>

Após clicar, as configurações do botão para adicionar um novo botão serão abertas:

<figure><img src="/files/5650c5afacca7ff816afc4c67fbdf3c88e18c6d5" alt=""><figcaption></figcaption></figure>

Aqui você precisa:

* Definir o nome do botão: pode ser qualquer nome que você quiser.
* Definir a função do botão: ele deve ser um botão Telegram Web App.

<figure><img src="/files/1bafc91ba8488f3c94894afd400207b477809dc8" alt=""><figcaption></figcaption></figure>

* Especificar o link para abrir o site quando o botão for clicado:

O link já está armazenado em uma variável usando a calculadora e a `quiz_link` função, então no campo URL, insira a variável atribuída `booker_link` usando interpolação — ou seja, inclua a variável dentro de `#{}`, que contém o link para o seu site e widget.

<figure><img src="/files/360413fc52e104247d7597490b3281a3c1a8abec" alt=""><figcaption></figcaption></figure>

Em seguida, clique no botão **“Adicionar”** para salvar as configurações do botão e adicioná-lo ao bloco. Certifique-se de clicar em **“Salvar”** depois, para garantir que as configurações do bloco não sejam perdidas.

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

O bloco totalmente configurado fica assim:

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

{% hint style="success" %}
**Dica útil!**\
Não é necessário criar um bloco condicional (como uma verificação de condição principal ou início de conversa) especificamente para o botão Web App. Você pode criar o botão e adicionar a `quiz_link` função em qualquer bloco do seu funil — seja um bloco de estado, bloco sem estado etc. (veja o exemplo "Bloco de Estado de Diálogo com Botão Telegram Web App").
{% endhint %}

<figure><img src="/files/26724feb2c0d5b1ee304be877f60e7cd5796e24e" alt=""><figcaption><p>Exemplo: "Bloco de Estado de Diálogo" com um Botão Telegram Web App</p></figcaption></figure>

O botão Web App com o widget de agendamento online ficará então disponível no bot:

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

## Callback de reserva

Depois que um cliente agendar uma consulta, uma notificação de callback sobre a reserva será enviada na conversa, com a seguinte aparência:

<figure><img src="/files/607d4169ca5dc95a0c0b2b51a57a4f16fc3358aa" alt="" width="464"><figcaption></figcaption></figure>

<mark style="color:laranja;">**new\_order\_in\_calendar**</mark> - a parte imutável do callback&#x20;

&#x20;<mark style="color:amarelo;">**\[489046159]**</mark> - order\_id ID da reserva

<mark style="color:vermelho;">**Appointment\_date\_and\_time added**</mark>

<mark style="color:roxo;">**por 30 minutos**</mark> - duração do serviço&#x20;

<mark style="color:vermelho;">**Objeto: Teste 30**</mark> - a qual objeto específico a reserva foi adicionada

A aparência da mensagem de callback:

*new\_order\_in\_calendar: \[489046159] Um agendamento foi adicionado de 2025-06-01 14:00 até 2025-06-01 14:30 por 30 minutos. Objeto: Teste 30*

Você pode configurar uma reação ao callback especificando seu valor na condição do bloco:

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

No bloco, você pode especificar a mensagem de resposta desejada para enviar ao cliente.


---

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