> 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="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2F0lMuqdI2CQe4hWHlHpGu%2Fcanais-websdk.png?alt=media&amp;token=67a46b75-ad6f-4153-b0a2-3529b67a5eb7" 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="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FWTH9sFybwxsrwFLYKaIO%2Fapresentacao-websdk.png?alt=media&amp;token=7233a092-c851-4422-af8d-94859d02195c" 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="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FApBFDE3vXPovlwZCgHjY%2Finicio-websdk.png?alt=media&amp;token=7e673003-abd5-4430-bc47-3fb10e826dab" 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="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FncGBvvhvKaQeMCxVUYhA%2Fchat-websdk.png?alt=media&amp;token=d3862246-70ae-4977-9181-c57ec5181dc8" 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="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FNDlA89nBcfza9jCMwGSk%2Fice-breakers-websdk.png?alt=media&amp;token=5cc93ca7-464e-4231-b1d3-45b3020c77d3" 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="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FJisKmuaTdOzlfJd3qgb8%2Favan%C3%A7ado-websdk.png?alt=media&amp;token=db6a4496-96ec-4b6b-934e-8d50d4be461b" 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="https://3829578295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRWteFkm020DS5IbXoSgj%2Fuploads%2FDlRDlatEVDm5EUlOMCU8%2Fjson-config-websdk.png?alt=media&amp;token=60813468-a815-4989-87a6-67da086b4d51" 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.