# Widget de agendamento online para site

O widget ajudará os clientes a agendar 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 a um site criado com o MaviBot quanto a uma landing page criada com outros construtores.

## Como criar um widget

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

Para começar, vá para a seção "Widgets", que você pode encontrar no menu superior.

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

Se nenhum widget tiver sido criado ainda 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 principais

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 for construído com o MaviBot).&#x20;

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

Se o site for construído usando o construtor MaviBot, abra a aba “Sites” e copie o link do seu site MaviBot.

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

&#x20;Em seguida, selecione a unidade cujos serviços e equipe serão exibidos no widget.

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

Você também pode adicionar um link para a política de privacidade e um link de consentimento de dados.

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

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

### Análises

Você também pode configurar eventos de análise.

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

Para fazer isso, insira o Pixel do Facebook, o Google Analytics ou o ID do Metrica no campo correspondente e especifique o valor do evento.

<div data-with-frame="true"><figure><img src="/files/80d874537f2dbc2b05677326a67ac9503f4d4abe" alt="" width="325"><figcaption><p>Por exemplo, como inserir os dados</p></figcaption></figure></div>

### Configurações de aparência

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

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

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

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.

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

**Esquema de cores do widget**

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

1. Fundo do widget:.
2. O tema principal da marca do widget exibirá botões, preços e ícones no esquema de cores selecionado.
3. Cor do texto: altera a cor do texto do botão ou do texto principal, dependendo da opção selecionada.
4. Texto do botão.

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

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

### Como incorporar o widget no seu site

Vá para o modo de edição do site.

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

Em seguida, encontre a **"Agendamento online"** na lista e adicione-a.

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

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

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

Se necessário, você pode editar o 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 na **"configuração avançada"** aba.

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

Defina o fundo e as configurações de exibição desejados.

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

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

**Como incorporar o widget em outro site**

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

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

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

Se você estiver usando o widget em seus próprios sites NÃO construídos com o MaviBot, certifique-se de inserir a classe do elemento no campo fornecido.

<div data-with-frame="true"><figure><img src="/files/e1e8742b435e317176c080c64f866313f16de46e" 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/pt/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.