API do Widget

Para desenvolvedores, ou qualquer pessoa que queira que o chat abra a partir do seu próprio botão.

Instalando

<script src="https://keyda.in/business/widget.js"
        data-key="kb_live_your_key_here" async></script>

A tag de script precisa apenas de src e data-key. Tudo o mais — cores, posição, saudação, idioma — vem do seu painel, então você nunca precisa reimplantar seu site para mudá-los.

O widget é exibido no idioma definido em Instalar → Idioma do seu bot: seu botão, textos de espaço reservado e avisos, e a direção do layout (árabe e urdu são da direita para a esquerda). Os textos chegam junto com a configuração do widget, então não há uma segunda requisição nem nada para você traduzir.

Modos

Flutuante (padrão). Um botão de atalho no canto, que abre um painel de chat.

Embutido. Coloque um contêiner vazio na página e o chat o preenche:

<div data-keyda-bot style="height:520px"></div>

O contêiner precisa de uma altura. No modo embutido, o chat fica sempre visível, então não há nada para abrir ou fechar.

API JavaScript

Disponível em window.KeydaBot assim que o script for carregado:

Exemplo — abra o chat a partir do seu próprio botão "Fale conosco":

<button onclick="KeydaBot.open()">Chat with us</button>

Como ele se comporta na sua página

• O painel abre acima do botão do disparador, que permanece onde está e se torna o controle de fechar. Tocar nele novamente, no ✕ no cabeçalho ou pressionar Esc fecha o chat.
• Um visitante pode expandir o painel a partir do cabeçalho — ele ocupa a altura da janela e até 760px de largura —, e a escolha é lembrada no navegador dele. Em celulares, o painel já ocupa a tela inteira, portanto esse controle não é exibido lá.
• Sua configuração de tamanho do logo muda o logo, não o botão: o launcher mantém seu tamanho e o logo cresce dentro dele. Tamanho do botão (Instalar → Aparência) é o que redimensiona o botão em si — pequeno, médio ou grande — seja qual for o formato.
• Quatro formatos de botão: uma pílula com seu texto, uma bolha redonda, um quadrado arredondado e um balão de chat com uma ponta. A ponta fica na lateral voltada para sua página.
• Tudo é renderizado dentro de um shadow root, para que o seu CSS não quebre o widget e o CSS do widget não afete o seu site.
• O painel carrega apenas quando um visitante o abre, portanto ele não deixa sua página mais lenta.
• A conversa de um visitante continua por 24 horas se ele voltar, e depois recomeça do zero. Reabrir o painel restaura a conversa — arquivos incluídos, e uma pergunta do fluxo de boas-vindas que ainda estava esperando resposta.
• O clipe de papel no campo de digitação permite que um visitante anexe até três fotos ou documentos a uma mensagem (tamanhos e tipos em Limites e segurança). As fotos são reduzidas no navegador antes do envio, então uma foto de 12 megapixels sai da página com apenas algumas centenas de kilobytes. Desative os arquivos em Instalar e o botão some.
• Um fluxo de boas-vindas roda como balões comuns: as opções viram botões abaixo do balão, um botão Pular aparece quando uma etapa é opcional, e o texto de espaço reservado do campo de digitação vira a pergunta. Um fluxo concluído é lembrado no navegador do visitante por 30 dias.
• Se o assistente estiver inacessível, o widget exibe uma mensagem curta e nunca gera um erro na sua página.

Dentro dos SDKs de aplicativos

O mesmo chat roda em todos os SDKs, então anexos e fluxos de boas-vindas chegam ao seu aplicativo sem nova versão — com uma exceção. Abrir um seletor de arquivos a partir de uma web view é responsabilidade do host. Os pacotes iOS, React Native e Ionic já fazem isso; Android e Flutter precisam do SDK 0.1.4 ou posterior. Em versões mais antigas, o widget reconhece o shell e esconde o clipe de papel em vez de mostrar um botão que não faz nada.