> For the complete documentation index, see [llms.txt](https://help.hyperflow.global/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.hyperflow.global/docs/canais-de-atendimento/websdk/como-conectar-seu-bot-no-websdk.md).

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