> 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/configuracoes-da-websdk.md). # Configurações da WebSDK Após instalar a WebSDK em seu site, é possível realizar alguns controles de forma programática para controlar o estado e parâmetros da WebSDK em seu site. ## Iniciando a WebSDK Para iniciar a WebSDK, basta inserir o script que você encontra na aba "Avançado" da configuração do seu canal. Por questões de segurança, e para que você controle qual página pode abrir a WebSDK, também é necessário incluir o host da página. {% hint style="info" %} Para obter o host da sua página, você pode abrir ela no seu navegador, ir no console de desenvolvimento, e digitar: `window.location.host` {% endhint %}

Imagem 1 - Dados de integração da WebSDK

## Iniciando a WebSDK com identificador do usuário Por padrão, a WebSDK é iniciada com um identificador de usuário aleatório que é armazenado na sessão do navegador do usuário. Porém você pode inicializar a WebSDK para um usuário específico de maneira segura, garantindo um histórico de conversas e reutilização da sessão. Para iniciar o WebSDK você deverá passar o parâmetro abaixo: ``` Hyperflow.init('SEU_TOKEN', { sender: 'TOKEN_USUARIO'}) ``` O 'TOKEN\_USUARIO' deverá ser um JSON assinado com a chave 'JWT Secret ' que pode ser configurado em 'Canais -> WebSDK -> Avançado' conforme print abaixo.

Imagem 2 - Exemplo de configuração JWT Secret.

O JSON assinado deve necessariamente conter o campo 'id', porém também pode-se adicionar outras propriedades que serão atribuídas automaticamente ao contato gerado na Hyperflow. ``` { "id": "ID_SISTEMA", // ID único do seu sistema, pode ser um hash ou o próprio ID sistémico do seu usuário. "prop1": "value1", // Campo opcional que será automaticamente adicionado ao user variable "prop2": "value2", // Campo opcional que será automaticamente adicionado ao user variable ...outros } ``` No cenário acima, você poderia acessar diretamente no fluxo a propriedade '{{user.prop1}}' por exemplo. **Observação:** A Hyperflow serializa automaticamente o campo 'id' do contato, sendo assim, nas informações do contato, não teremos o id recebido, e sim o serializado, principalmente por questões de segurança, garantindo a integridade do contato. ## Iniciando a WebSDK dentro de uma área específica Por padrão, a WebSDK é iniciada no modo popup. Porém você pode escolher onde inserir a WebSDK, passando configurações adicionais. ``` Hyperflow.init('SEU_TOKEN', { component: 'ID_COMPONENT'}) ``` Dessa forma, você pode falar qual o componente que irá "segurar" a WebSDK. Caso não informe esta opção, ela será iniciada com referência a sua página inteira. ## Reinicialização da WebSDK A qualquer momento, você pode forçar uma reinicialização da WebSDK, chamando o método abaixo: ``` Hyperflow.reinit('SEU_TOKEN', options) ``` ## Eventos disponíveis na WebSDK A WebSDK emite uma série de eventos, para que você consiga manipular e controlar em que etapa o usuário está da sua interação. #### ready Este evento será emitido, quando a WebSDK tiver sido carregada com sucesso, e pronta para ser utilizada. ``` Hyperflow.on('ready', () => { // Seu código que será executado quando o evento for emitido }) ``` #### open/close Este evento será emitido, quando a WebSDK tiver sido aberta, ou fechada pelo usuário. ``` Hyperflow.on('open', () => { // Seu código que será executado quando o evento for emitido }) Hyperflow.on('close', () => { // Seu código que será executado quando o evento for emitido }) ``` #### getStarted Este evento será emitido, quando o usuário interagir com o botão para iniciar uma nova conversa.

Imagem 3 - Exemplo do botão para iniciar conversa.

```javascript Hyperflow.on('getStarted', () => { // Seu código que será executado quando o evento for emitido }) ``` #### Eventos customizados É possível configurar **'Eventos'** no seu WebSDK diretamente pelos módulos de **'Enviar mensagem'** do Builder. Para realizar essa configuração, basta acessar um fluxo e ajustá-lo conforme a necessidade. Na aba **'WebSDK'**, você encontrará a nova opção de definir seus próprios eventos personalizados, facilitando ainda mais o controle sobre as interações da sua plataforma.

Imagem 4 - Configuração de eventos personalizados no WebSDK através do módulo 'Enviar mensagem -> WebSDK'.

Este evento será emitido quando o usuário passar pelo módulo configurado acima. ``` Hyperflow.on('seu_evento', (data) => { // Seu código que será executado quando o evento for emitido // Você pode utilizar as informações vindas do Hyperflow pelo objeto 'data' // Exemplo: data.name }) ``` ## Funções disponíveis na WebSDK A WebSDK também fornece uma série de funções para que você possa abrir, iniciar, fechar, ou passar parâmetros quando necessário. #### open, close ou toggle Utilize esta função para abrir, fechar, ou abrir/fechar a WebSDK. ```javascript // Abrir a WebSDK Hyperflow.open() // Fechar a WebSDK Hyperflow.close() // Abrir/fechar a WebSDK Hyperflow.toggle() ``` #### initFlow Utilize esta função para iniciar um fluxo de forma programática, enviando parâmetros adicionais de forma opcional. ```javascript // Iniciar sem parâmetros adicionais Hyperflow.initFlow('ID_DO_FLUXO') // Iniciar com parâmetros adicionais Hyperflow.initFlow('ID_DO_FLUXO', { "key": "value", ... }) ``` Os parâmetros adicionais, serão entregues no fluxo, após o nó de start, e podem ser acessados através da variável {{input}} para realizar tratativas. **Exemplo:** {{input.key}} **Para obter o ID do fluxo**, basta copiar o ID que aparece no nó de start do fluxo que deseja ativar, conforme a imagem abaixo:

Imagem 5 - Exemplo de onde obter o ID do fluxo

{% hint style="info" %} Ao iniciar o fluxo dessa forma, já será contabilizada uma mensagem do seu plano na Hyperflow. {% endhint %}