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

# Embedding (Widget)

> Incorpore interfaces de chat e gravação de áudio diretamente no seu site ou cards do Pipefy.

# Embedding

Incorpore uma interface de chat diretamente no seu site ou nos cards do Pipefy usando iframe.

## Tipos de Incorporação

<CardGroup cols={2}>
  <Card title="Chat Widget no Card" icon="message">
    Interface completa com histórico de mensagens e gravação de áudio, incorporada no card do Pipefy.
  </Card>

  <Card title="Página de Gravação" icon="microphone">
    Ao clicar no botão de áudio, abre página dedicada à gravação com URLs temporárias (15min).
  </Card>
</CardGroup>

## Configurar no Pipefy (Recomendado)

<Steps>
  <Step title="Configurar Campos">
    Crie dois campos no Pipefy:

    * Campo **Telefone** → "Número de Contato"
    * Campo **Texto Longo** → "Código do Widget de Chat"
  </Step>

  <Step title="Criar Automação">
    * **Gatilho**: "Quando um card for criado ou atualizado"
    * **Ação**: "Modificar campo" → Código do Widget de Chat
    * **Valor**: Código HTML do iframe com variável do telefone
  </Step>

  <Step title="Exibir Widget">
    Na fase desejada:

    1. Edite a fase → aba "Campos"
    2. Arraste o campo "Conteúdo Dinâmico"
    3. Configure: `{{card.fields.codigo_do_widget_de_chat}}`
  </Step>

  <Step title="Ocultar Campo Auxiliar">
    Use condicionais de campo para ocultar o campo "Código do Widget de Chat" da visualização do card.
  </Step>
</Steps>

## Como obter URLs de incorporação

Acesse **Dashboard → Instância → Gerador de Embedding** para criar URLs seguras com ID do cartão e telefone específicos.

<Info>
  Duas variantes disponíveis: uma **apenas com número de telefone** e outra com **telefone + ID do card** para filtrar cada thread de mensagem como ticket individual.
</Info>