# Como conectar seu bot no WebSDK

Para estabelecer a conexão com o WebSDK, siga o passo-a-passo abaixo:

### Passo 1

No Portal Hyperflow, selecione o chatbot que deseja ativar sua conta e na guia de “**Canais**” selecione “**Conectar**” no card do WebSDK, como mostra a imagem abaixo.

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

### Passo 2

Após clicar em "Conectar", basta preencher as informações das abas.

Em "**Apresentação**", o usuário deve preencher campos como, título, descrição, tema, etc.

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

**Título**: título principal do chat.

**Subtítulo**: localizado abaixo do título em tamanho menor.

**Theme**: tema (claro ou escuro).

**Main color**: escolha na paleta de cores disponível a cor principal que irá compor o chat.

**Cover**: faça o upload de um arquivo que deseja utilizar para compor a capa.

**Avatar**: faça o upload de um arquivo que deseja utilizar como avatar (foto redonda).

**Descrição**: dê uma breve descrição ao seu chat. Ela aparecerá logo abaixo do subtítulo.

**Rótulo para o botão iniciar**: texto que será exibido ao lado do botão de iniciar conversa.

**Descrição para o botão iniciar**: breve descrição que será exibida um pouco acima do botão de iniciar conversa.

### Passo 3

Em "**Início**", configure as informações do botão flutuante e do popup.

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

**Botão flutuante**: faça o upload de um arquivo que deseja utilizar como imagem do botão flutuante que dá acesso ao chat.

**Cor de fundo do badge**: na paleta de cores disponível, escolha uma cor de fundo para o badge do botão flutuante.

**Cor de texto do badge**: na paleta de cores disponível, escolha uma cor para o texto do badge do botão flutuante.

**Opções**:

* **Ícone com tamanho total**: fazer com que a imagem do botão flutuante preencha toda a área do ícone.
* **Permitir esconder botão flutuante**: adiciona botão que "esconde" o botão flutuante.
* **Mostrar popup na primeira vez**: exibir popubup do botão flutuante na primeira vez ao acessar o site.

**Canto da tela**: escolha em qual canto da tela (esquerda ou direita) irá aparecer o botão flutuante.

**Posição do chat relativa ao botão**: escolha se o chat será disposto no topo ou lado em relação ao botão.

### Passo 4

Em "**Chat**", estilize as bordas dos quick replies e também os balões e textos do remetente e do destinatário.

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

**Estilo de borda para quick replies**: escolha uma borda *quadrada* ou *arredondada* para os quick replies.

Opções:

* **Permitir upload de arquivos**: permite também o usuário enviar arquivos.
* **Mostrar powered by: exibe o texto**: *powered by: "exemplo de entrada"* logo abaixo da caixa de enviar mensagens.

Ao lado direito, selecione as **cores** desejadas para os **textos** e **balões** do **remetente** e do **recebedor** das mensagens.

### Passo 5

Em "**Ice Breakers**", configure o **enunciado** e o **fluxo** em que será utilizado o "quebra-gelo". É possível definir no máximo 4 perguntas como quebra-gelos.

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

**Enunciado**: insira o enunciado para seu quebra-gelo.

**Fluxo**: selecione um fluxo ja existente para qual o usuario será direcionado após interagir com um quebra-gelo.

### Passo 6

Em "**Avançado**", selecione o fluxo desejado e utilize o código disponível no final da tag BODY do seu site. Por fim, preencha o campo "Host".

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

**Fluxo**:

**Enviar parâmetros de URL no início do chat**:&#x20;

**Permitir transmissão**:

**Integração**:

* **BODY**:&#x20;
* **Host**:&#x20;

### Passo 7

Em "**JSON Config**", é possível editar todas as opções e configurações do web chat no JSON.

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

### Observação

Caso deseje visualizar como está ficando seu web chat durante o processo de configuração, utilize o botão "**Mostrar prévia**" para obter uma prévia do resultado final.

### Passo 8

Por fim, basta clicar no botão "**Salvar**" para que sua conexão com WebSDK seja concluída com sucesso.


---

# 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://help.hyperflow.global/docs/canais-de-atendimento/websdk/como-conectar-seu-bot-no-websdk.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.