Configurações da WebSDK

Configura as principais configurações disponíveis para a 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.

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

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.

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.

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

// 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

Ao iniciar o fluxo dessa forma, já será contabilizada uma mensagem do seu plano na Hyperflow.