Pular para o conteúdo principal

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

  • Atualizado

í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.​chat-adicionar-bot-site-blip-chat-1.png

  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

chat-adicionar-bot-site-blip-chat-2.png

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

chat-adicionar-bot-site-blip-chat-3.png

 

Para contratos clusterizados fora do cluster Take, devemos adicionar uma propriedade indicando qual url ele deve usar. Nessa mesma aba de instalação do canal BlipChat é possível encontrar como usar a url corretamente de acordo com seu contrato. Porém, caso precise, você também pode montá-la.

new BlipChat()

.withAppKey('CHAVE_DO_BOT')

.withCustomCommonUrl('https://NOME_DO_CONTRATO.chat.blip.ai/')

.build();

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

Artigos relacionados