Adicionando ao Javascript

Para seguir com esta leitura, é recomendável uma noção mínima de Javascript e HTML.

Basta adicionar o seguinte script à sua página HTML:

Lembre-se de substituir "ID da Suri" pelo ID encontrado na página de configuração de seu chatbot, mantendo-o dentro de aspas. Caso ainda não possua o identificador, veja a seção Configuração.

<script>
    window.cbAsyncInit = function () {
        CBM.ChatbotId = "ID da Suri"; // Exemplo: CBM.ChatbotId = "cb123"
        CBM.StartWebChat().then(webChat => {
               
        }).catch(reason => {

        });
    };
    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) { return; }
        js = d.createElement(s); js.id = id;
        js.src = "https://webchat.chatbotmaker.io/cbm-jssdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'cbm-jssdk'));
</script>

Lembre-se também: o script pode ser adicionado em qualquer ponto do seu site, mas recomendamos que seja inserido dentro do header ou footer de sua página ou em algum outro elemento compartilhado entre todas as páginas do site, caso você deseje ter o WebChat funcionando em todas elas.

Para um melhor desempenho do WebChat no navegador Safari, em dispositivos mobile Apple, recomendamos adicionar a seguinte tag no header do seu site:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Caso esta tag não esteja presente, é provável que usuários de iOS 10+ tenham problemas com Zoom indesejado ao digitarem no campo de texto do WebChat.

Ao salvar as alterações em seu site, o WebChat já deve aparecer ao recarregar a página do site onde ele deve ser visualizado e já deve ser possível trocar mensagens com sua Suri e equipe de atendimento!

Configurações adicionais

Esta etapa é opcional.

Você pode configurar 3 itens referentes ao WebChat na página do site:

• Dados do usuário a ser criado

• Habilitar/desabilitar modo aberto/fechado

• Renderizar WebChat dentro de um elemento HTML pré-determinado

Todos os 3 itens são parâmetros do método StartWebChat. Para mais informações sobre este método e como utilizar seus parâmetros, consulte sua definição na página Conceitos e métodos.

Explorando as possibilidades

Se chegou aqui você já deve ter seu WebChat configurado e funcionando em seu site, mas deseja saber mais sobre o que ele oferece. Isso é ótimo! Para se aprofundar pelos conceitos e possibilidades do WebChat, recomendamos a leitura das seguintes páginas:

Conceitos e métodosConfigurações avançadas