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

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 2 - Exemplo do botão para iniciar conversa.

Hyperflow.on('getStarted', () => {
    // Seu código que será executado quando o evento for emitido
})

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 3 - Exemplo de onde obter o ID do fluxo

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