Blip chat widget iniciar aberto no site

Olá Blippers tudo bão com vocês?
:grinning:
Hoje vou mostrar como colocar o BlipChat para iniciar aberto no seu website/blog ou sistema e ainda como fazer para que ele já inicie com uma mensagem enviada pelo contato.

Caso de uso: Iniciar o BlipChat aberto no site. Copie o código abaixo para o script do blip chat alterando a “chave de comunicação do bot”:

<script src="https://unpkg.com/blip-chat-widget" type="text/javascript">
</script>
<script>
    (function () {
        window.onload = function () {
		
           blipClient  = new BlipChat()
            .withAppKey('chave de comunicação do bot')
            .withButton({"color":"#2CC3D5","icon":""})
            .withCustomCommonUrl('https://chat.blip.ai/')
             
			
			blipClient.build();
			window.setTimeout(function() { blipClient.toogleChat() }, 500); 
			const blipChatButton = document.getElementById('blip-chat-open-iframe')
			blipChatButton.classList.remove('opened')


        }
    })();
	
</script>

- Para pegar a chave de comunicação do bot acesse o portal do Blip: https://portal.blip.ai/ Acesse o seu bot depois vá na aba de canais .
image
Após isso Clique no BlipChat.
image
Clique na aba de Configuração.

image
E copie o valor que está em aspa simple na variavel withAppKey.

O resultado é esse :
image
Gif:
chrome-capture-2022-4-22

Observação : As imagens acima demonstram apenas que está iniciando aberto no site a pagina em questão foi feito em um código puramente em html pro isso o chat do bot não apareceu e o site está em branco.

Caso de uso que é iniciar dentro do site de forma aberta e ainda com possibilidade de já chamar o bot sem necessário interação do usuário, para que ele entenda que ali é uma canal de comunicação e ele pode ser atendido.

Copie o código abaixo e troque a chave de comunicação conforme explicado anteriomente :

<script src="https://unpkg.com/blip-chat-widget" type="text/javascript">
</script>
<script>
    (function () {
        window.onload = function () {
		
           blipClient  = new BlipChat()
            .withAppKey('chave de comunicação do bot')
			.withEventHandler(BlipChat.LOAD_EVENT, function () {
      blipClient.sendMessage({
                "type": "text/plain",
                "content": "Olá poderia me ajudar"
        });
		})
            .withButton({"color":"#2CC3D5","icon":""})
            .withCustomCommonUrl('https://chat.blip.ai/')
             
			
			blipClient.build();
			window.setTimeout(function() { blipClient.toogleChat() }, 500); 
			const blipChatButton = document.getElementById('blip-chat-open-iframe')
			blipChatButton.classList.remove('opened')


        }
    })();
	
</script>

O resultado é esse :
image
Gif:
chrome-capture-2022-4-22 (3)

Espero que esse código ajude vocês.

Referência : https://github.com/takenet/blip-chat-widget

7 curtidas

Muito bommm :raised_hands:

2 curtidas