Como adicionar um bot em um site utilizando o Blip Chat?

índice:

1. Integrar um bot a um site como um widget
2. Integrar um bot a um site de forma embutida

Para integrar seu o bot a uma página web com o Blip é muito simples. Para isso, você precisará publicar o seu bot no canal Blip Chat.

O canal permite que um bot seja integrado em um site de duas formas diferentes: como um widget ou de forma embutida (embedded) ao site, junto ao corpo html do site.

Antes de começar, acesse o portal e escolha o bot que deseja colocar em seu site.

Integrar um bot a um site como um widget

1. Clique no módulo Canais (no portal do Blip) e escolha o canal Blip Chat.​

2. Clique na aba Configurações e informe o domínio do(s) site(s) que deseja colocar o Blip Chat.

Observação: Essa é uma operação obrigatória. Por uma questão de segurança, seu bot funcionará apenas nas páginas cujo domínio tenha sido previamente habilitado no portal do Blip. No exemplo da imagem abaixo, o Blip Chat será carregado apenas em páginas cujo domínio seja seudominio.com

3. Clique na aba Instalação, copie o script apresentado e cole-o dentro do body da sua página web.

Integrar um bot a um site de forma embutida

1. Repita os mesmos 3 passos do modo de integração como widget.
2. Realize uma alteração no script copiado no portal

O script padrão de integração do Blip Chat é idêntico ao script abaixo (com a exceção da chave, que é única para cada bot).

<script src="https://unpkg.com/blip-chat-widget" type="text/javascript">
</script>
<script>
   (function () {
      window.onload = function () {
         new BlipChat()
                    .withAppKey('YOUR-BLIP-CHAT-KEY')
                    .withButton({"color":"#2CC3D5"})
                    .build();
      }
})();
</script>

Para embutir a interface em um elemento html com o id 'your-element-id' do seu site altere o script conforme abaixo:

<script src="https://unpkg.com/blip-chat-widget" type="text/javascript">
</script>
<script>
   (function () {
      window.onload = function () {
         new BlipChat()
                    .withAppKey('YOUR-BLIP-CHAT-KEY')
                    .withButton({"color":"#2CC3D5"})
                    .withTarget('your-element-id')
                    .build(options);
      }
})();
</script>

Observações:

* Independentemente da forma de integração, são possíveis ainda algumas customizações para personalizar a experiência do usuário com a interface do Blip Chat. Para verificar todos os detalhes, clique aqui.

* Para configurações avançadas do scritpt do Blip Chat na web, consulte o projeto no Github.

Para mais informações, acesse a discussão sobre o assunto em nossa comunidade ou os vídeos no nosso canal. 😃