Chatbot

Uma organização adiciona um chatbot do Keural ao seu site. Quando um visitante clica no botão em um canto da tela, uma janela de chat se abre. Cole no site o código de instalação criado na tela de administração.

Criar chatbotCopiar link da âncora

1. Um proprietário ou administrador da organização clica em Adicionar chatbot em Gerenciamento da organização → Chatbots.
2. Informe um nome para o chatbot e um domínio base (por exemplo, https://example.com) e cadastre-o.
3. Abra o chatbot e configure as três abas.

4. Cole o código de instalação no seu site.

Código de instalaçãoCopiar link da âncora

Na aba Token e instalação, copie o código para HTML ou para Next.js. O código tem duas partes.

• Carregador: define primeiro a função Keural e, quando a página termina de carregar, carrega de forma assíncrona o script do chatbot (/plugin/keural-widget@1.0.1.js). Os comandos chamados antes da chegada do script são guardados na fila e executados em ordem.
• Comando de inicialização: Keural('boot', { token: '…' }). O token começa com wgt_.

A versão do script fica fixada no endereço. Quando uma nova versão for lançada, copie o código de instalação novamente e substitua o antigo. Se o código de instalação for colado duas vezes na mesma página, a segunda cópia é ignorada e o console registra um erro.

<script id="keural-one-script">
  /* Código copiado da aba Token e instalação */
</script>

No Next.js, coloque-o com <Script id="keural-one-script" strategy="afterInteractive"> do next/script. Para exibi-lo em todas as páginas, coloque-o no layout raiz.

Opções de inicializaçãoCopiar link da âncora

Os valores passados para boot têm prioridade sobre as configurações da tela de administração. Use-os para alterar a aparência página a página.

Keural('boot', {
  token: 'wgt_…',
  theme: 'system',
  header: { enabled: true, extended: true, draggable: true, title: 'Atendimento ao cliente', color: '#495BD8' },
  button: { visible: true, iconUrl: 'https://example.com/icon.png', color: '#495BD8', position: 'right', offsetX: 30, offsetY: 30 },
});

Os padrões de um chatbot novo são: cabeçalho exibido e expandido, cor do cabeçalho e do botão #495BD8, à direita, deslocamento de 30 px, tema system.

Controle pela páginaCopiar link da âncora

Métodos como Keural.open() só funcionam depois que o script é carregado. Se a chamada for feita logo após o carregamento da página, use a forma de função Keural('open'), que é executada em ordem.

<button onclick="Keural('open')">Falar com o atendimento</button>

Também é possível ocultar o botão padrão (button.visible: false) e abrir o chatbot por um botão da própria página.

Tamanho da telaCopiar link da âncora

A janela do chatbot tem 390×800 px e, se a largura da tela for de 480 px ou menos, abre em tela cheia. Use o botão de ampliar no cabeçalho para aumentar a janela.

Domínios de exibiçãoCopiar link da âncora

• O chatbot abre em páginas cujo host corresponde ao domínio base. O host é comparado incluindo a porta, sem diferenciar maiúsculas de minúsculas. Um endereço com www. e um subdomínio são hosts diferentes. Para testar em um servidor de desenvolvimento, crie outro chatbot com esse endereço como domínio base.
• O domínio base não pode ser alterado depois de criado. Para mudá-lo, crie um novo chatbot.
• Se os domínios permitidos em Avançado ficarem em branco, o chatbot abre em todas as páginas do domínio base. Se houver domínios permitidos, ele abre somente nas páginas que começam com esses endereços. Incluir um caminho, como https://example.com/help, restringe a abertura às páginas abaixo dele. Os domínios permitidos começam com http:// ou https:// e podem ser até 5.
• O token do código de instalação fica exposto na página. Conecte ao chatbot somente conteúdo que possa ser público.

Política de segurança de conteúdo (CSP)Copiar link da âncora

Se o seu site aplicar Content-Security-Policy, permita o seguinte. Os endereços são baseados em keural.ai.