> ## Documentation Index
> Fetch the complete documentation index at: https://docs.toolzz.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget

> Módulo de Widget lida com o gerenciamento e configuração visual do embed onde os usuários finais poderão conversar diretamente com o Agente. Dentro do módulo o Administrador consegue utilizar vários Agentes para diferentes Widgets.

## Pré-Requisitos

1. Estar autenticado na plataforma
2. Possuir uma instituição vinculada
3. Possuir uma unidade
4. Estar vinculado à um plano na ToolzzAI

## Gerenciamento de Widgets

Para gerenciar os Widgets o Usuário poderá ativar ou desativar qual visual de Widget será ou não utilizado, assim como: criar, editar, duplicar ou apagar.

<Note>Usuário deve ter atenção ao vincular o mesmo agente à diferentes widgets e eles ainda estarem ativados, podendo gerar conflito.</Note>

Caso o Admin possua muitos widgets na unidades, a ToolzzAI possui o recurso de favoritar ⭐, que prioriza visualmente os widgets favoritados ⭐na tela.

<Frame>
  <img className="block dark:hidden" src="https://mintcdn.com/labzzllc/iq5t3nq3ykOlxv9d/images/widget/fav.png?fit=max&auto=format&n=iq5t3nq3ykOlxv9d&q=85&s=6d48886e49864beaa0f278957b2de3bf" alt="Chatbot empty-state" width="528" height="364" data-path="images/widget/fav.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/labzzllc/iq5t3nq3ykOlxv9d/images/widget/fav.png?fit=max&auto=format&n=iq5t3nq3ykOlxv9d&q=85&s=6d48886e49864beaa0f278957b2de3bf" alt="Hero Dark" width="528" height="364" data-path="images/widget/fav.png" />
</Frame>

### Criar um Widget

Para criar um Widget o usuário pode criar diretamente pelo Agente ou poderá criar seguindo pelo menu lateral da unidade e selecionando “Widget“ e clicando em “Criar Widget“.

<Frame>
  <img className="block dark:hidden" src="https://mintcdn.com/labzzllc/iq5t3nq3ykOlxv9d/images/widget/create.png?fit=max&auto=format&n=iq5t3nq3ykOlxv9d&q=85&s=6fdf2c73388d7351365864aabd2b9d01" alt="Chatbot empty-state" width="1855" height="888" data-path="images/widget/create.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/labzzllc/iq5t3nq3ykOlxv9d/images/widget/create.png?fit=max&auto=format&n=iq5t3nq3ykOlxv9d&q=85&s=6fdf2c73388d7351365864aabd2b9d01" alt="Hero Dark" width="1855" height="888" data-path="images/widget/create.png" />
</Frame>

Para criar um novo Widget o usuário deve completar o seguinte formulário:

<Frame>
  <img className="block dark:hidden" src="https://mintcdn.com/labzzllc/iq5t3nq3ykOlxv9d/images/widget/form.png?fit=max&auto=format&n=iq5t3nq3ykOlxv9d&q=85&s=da34bf6b0b51f48c6c5e644a04d05d34" alt="Chatbot empty-state" width="1835" height="968" data-path="images/widget/form.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/labzzllc/iq5t3nq3ykOlxv9d/images/widget/form.png?fit=max&auto=format&n=iq5t3nq3ykOlxv9d&q=85&s=da34bf6b0b51f48c6c5e644a04d05d34" alt="Hero Dark" width="1835" height="968" data-path="images/widget/form.png" />
</Frame>

1. **Selecionar Bot**
   * Deverá selecionar qual Agente utilizará esse Widget

2. **Configurar Cabeçalho**
   * **Título:** Inserir qual será o título exibido no Widget
   * **Subtítulo:** Inserir o subtítulo que será exibido embaixo do título
   * **Logo do Cabeçalho:** Imagem que será utilizada de logo do widget
   * **Ícone do Avatar:** Imagem que será exibida para representar o perfil do Agente
   * **Cor Primária:** Seletor Hexadecimal para a cor principal do Widget
   * **Cor Secundária:** Seletor Hexadecimal para cor dos elementos no cabeçalho do Widget

3. **Configurar Chat**
   * **Logo do Chat:** Imagem que será utilizada para representar o usuário que está enviando as mensagens no widget
   * **Primeira Mensagem:** Campo para configuração de qual será a primeira mensagem enviada pelo Agente no Widget
   * **Cor do Balão da IA:** Define a cor de fundo das mensagens enviadas pela IA no widget
   * **Cor do Texto do Balão da IA:** Configura a cor do texto exibido nas mensagens da IA
   * **Cor do Balão do Usuário:** Especifica a cor de fundo das mensagens enviadas pelo usuário no chat
   * **Cor do Texto do Balão do Usuário:** Define a cor do texto nas mensagens do usuário

4. **Iniciador de Conversa**
   * Define de forma rápida quais poderão ser as primeiras mensagens enviadas pelo usuário ao entrar no Widget, podendo alterar a ordem de exibição e adicionar mais iniciadores

5. **Selecionar Voz**
   * Campo para escolher a Voz que você deseja usar no widget

Após preencher os campos básicos para criação de um Widget (Título, Subtítulo e Primeira Mensagem) o Admin poderá criar um widget e o sistema irá gerar um Widget em 3 formatos:

<Frame>
  <img className="block dark:hidden" src="https://mintcdn.com/labzzllc/iq5t3nq3ykOlxv9d/images/widget/widget.gif?s=ac74728d3338244de994c2305fbe4b2b" alt="Chatbot empty-state" width="1920" height="1080" data-path="images/widget/widget.gif" />

  <img className="hidden dark:block" src="https://mintcdn.com/labzzllc/iq5t3nq3ykOlxv9d/images/widget/widget.gif?s=ac74728d3338244de994c2305fbe4b2b" alt="Hero Dark" width="1920" height="1080" data-path="images/widget/widget.gif" />
</Frame>

#### Descrição de Cada Formato

<AccordionGroup>
  <Accordion title="Código">
    Embed do Widget em código para ser inserido diretamente no corpo do projeto que irá ser implementado
  </Accordion>

  <Accordion title="Embed - Link Privado ou Público">
    Link Privado ou Público: Embed do Widget em formato de link para que os usuário sejam direcionados diretamente para o Widget, sendo Link Público para todos os usuário e Link Privado apenas para usuários Membros da instituição
  </Accordion>

  <Accordion title="Web - Link Privado ou Público">
    Widget é direcionado para a interface web onde usuário poderá interagir com o Agente, podendo ser gerado um Link Público para todos os usuário e Link Privado apenas para usuários Membros da instituição
  </Accordion>
</AccordionGroup>

<Note>O Administrador só conseguirá testar a comunicação com o Agente via Widget diretamente pela configuração do Agente (Chatbot)</Note>

### Editar um Widget

<Frame>
  <img className="block dark:hidden" src="https://mintcdn.com/labzzllc/iq5t3nq3ykOlxv9d/images/widget/crud.png?fit=max&auto=format&n=iq5t3nq3ykOlxv9d&q=85&s=b41f1e2bb85544386906056c7df9733c" alt="Chatbot empty-state" width="1012" height="535" data-path="images/widget/crud.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/labzzllc/iq5t3nq3ykOlxv9d/images/widget/crud.png?fit=max&auto=format&n=iq5t3nq3ykOlxv9d&q=85&s=b41f1e2bb85544386906056c7df9733c" alt="Hero Dark" width="1012" height="535" data-path="images/widget/crud.png" />
</Frame>

1. Para editar o Admin pode apenas clicar em cima no Widget na listagem dos Widgets criados ou poderá clicar no 3 pontinhos superiores ao Widget e selecionar a opção “Editar“
2. Após clicar em “Editar“ o Admin poderá visualizar os campos preenchidos com o que já havia configurado na criação do Widget, assim podendo alterar e visualizar em tempo real suas alterações.
3. Para salvar a edição o Admin precisa apenas clicar em “Concluir“.

### Duplicar um Widget

1. Selecione os três pontinho superiores ao Widget
2. Selecione a opção “Duplicar“
3. Widget duplicado com sucesso

### Deletar um Widget

1. Selecione os três pontinho superiores ao Widget
2. Selecione a opção “Deletar“
3. Widget deletado com sucesso

### Chat

1. Selecione os três pontinho superiores ao Widget
2. Selecione a opção “Chat“
3. Sistema abre o widget na versão Chatweb