Para ampliar o alcance dos seus agentes do Business Messages, você pode adicionar conversas pontos de entrada nos seus sites com o widget do Business Messages.
O widget Business Messages só é compatível com dispositivos móveis com Android 5 ou mais recente. Outros sistemas operacionais para dispositivos móveis e ambientes de desktop não são compatíveis.
Adicionar um widget do Business Messages a um site
Para ativar as conversas em um site, carregue o Business Messages biblioteca JavaScript, configurar o posicionamento do widget na página e especificar o contexto no widget.
Para uma lista de funções, propriedades e eventos de disponibilidade, consulte Empresa Mensagens widget. Consulte o guia de estilo do widget Business Messages. para conferir recomendações sobre estilo e usar.
Criar um widget
Atualize os valores a seguir para criar um widget do Business Messages para ser inserido no seu site.
| Valor | Descrição |
|---|---|
Como o botão aparece
seu site. Pode ser button, floating, inline ou advanced. Para
usar seus próprios estilos, usar advanced, copiar a folha de estilo para sua página da Web,
e modifique conforme necessário. |
|
| Seu ID do agente. | |
| O texto que você como o botão a ser exibido. |
<script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js"></script>
Exemplo de widget
O widget 
é gerado pelo seguinte código:
<script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js"></script>
Como personalizar a integração do widget Business Messages
Carregar a biblioteca JavaScript
Para carregar a biblioteca JavaScript do Business Messages, copie o código a seguir e
cole-o imediatamente na tag <head> em todas as páginas em que você
exibir um widget do Business Messages. Você só precisa de uma biblioteca JavaScript
inclusão por página.
<!-- Global Business Messages widget library reference - Business Messages -->
<script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js?cb=callback">
</script>
O snippet faz o download e carrega a biblioteca JavaScript, que inicializa
elementos de página existentes com um atributo data-bm-widget-agent-id. A
A biblioteca JavaScript converte os elementos de página identificados em elementos clicáveis
que carregam a superfície de conversa do Business Messages quando tocadas.
O parâmetro cb opcional contém o nome de uma função que é
chamado automaticamente assim que a biblioteca JavaScript é carregada.
Configurar o posicionamento do widget
Quando a biblioteca JavaScript do Business Messages é carregada, ela verifica se há
elementos com um atributo data-bm-widget-agent-id e converte esses elementos
nos widgets do Business Messages. Todos os elementos que você quer converter
a um widget precisa incluir um atributo data-bm-widget-agent-id com um valor
correspondente ao ID do agente lançado.
Exemplo: definições de widget
<!-- Example div element that converts into a Business Messages widget -->
<div data-bm-widget-agent-id="myagentid">
Click for Business Messages
</div>
<!-- Example button element that converts into a Business Messages widget -->
<button data-bm-widget-agent-id="myagentid">
Click for Business Messages
</button>
Transmitir valores de contexto
Para configurar o contexto do widget e transmiti-lo ao webhook, inclua o parâmetro
atributo data-bm-widget-context no elemento HTML que contém o
data-bm-widget-agent-id. Especifique um valor de string para
data-bm-widget-context: As mensagens enviadas ao webhook incluem o contexto
.
data-bm-widget-context pode ter qualquer valor, como um valor
relevantes para o local em que o widget é mostrado na página durante a execução. Nos seguintes
exemplos, o valor do atributo
"eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1CREATOR2RlIjoiQVNEQURTQSJ9Cg=="
é um
string JSON codificada em base64 de {"product":"dryer","offer-code":"ASDADSA"}.
data-bm-widget-context tem um limite de 512 bytes.
Exemplo: definições de widget com contexto
<!-- Example div element that converts into a Business Messages widget -->
<div
data-bm-widget-agent-id="myagentid"
data-bm-widget-context="eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==">
Click for Business Messages
</div>
<!-- Example button element that converts into a Business Messages widget -->
<button
data-bm-widget-agent-id="myagentid"
data-bm-widget-context="eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==">
Click for Business Messages
</button>
Site de exemplo
O exemplo a seguir carrega a biblioteca JavaScript do Business Messages no
<head>, que verifica automaticamente a página HTML e converte
"myagentid" nos widgets do Business Messages.
<html>
<head>
<script
crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js">
</script>
</head>
<body>
This is a test widget:
<div
data-bm-widget-agent-id="myagentid"
data-bm-widget-context="eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==">
Click for Business Messages
</div>
Click it.
And this is a widget:
<button
data-bm-widget-agent-id="myagentid"
data-bm-widget-context="VGhpcyBpcyBhIGJ1dHRvbiB0ZXN0Lgo=">
Click for Business Messages
</button>
</body>
</html>
Inicialização programática de widgets
Para um controle preciso da configuração, você pode optar por inicializar seu
o widget de maneira programática. Para inicializar um elemento programaticamente, chame
bmwidget.init
depois que a biblioteca JavaScript do Business Messages for carregada. Essa forma de
não exige que você marque elementos com o
data-bm-widget-agent-id.
<head>
<!-- Global Business Messages widget library reference - Business Messages -->
<script
crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js?cb=initWidget">
</script>
<script type="text/javascript">
// Convert HTML element with ID = myCustomButton into a Business Messages widget
function initWidget() {
window.bmwidget.init(document.getElementById('myCustomButton'), {
'agentId': 'myagentid',
'context': 'eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg=='
});
};
</script>
</head>
Verificar a compatibilidade do dispositivo
Usar
window.bmwidget.supported
para verificar a compatibilidade com o recurso Business Messages em um dispositivo. O exemplo a seguir verifica
para suporte do dispositivo antes de inicializar o elemento HTML com ID
"myCustomButton" como um widget do Business Messages.
<head>
<!-- Global Business Messages widget library reference - Business Messages -->
<script
crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js?cb=initWidget">
</script>
<script type="text/javascript">
// Convert HTML element with ID = myCustomButton into a Business Messages widget
function initWidget() {
// Check that the user has a supported device
if (window.bmwidget.supported) {
window.bmwidget.init(document.getElementById('myCustomButton'), {
'agentId': 'myagentid',
'context': 'eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg=='
});
}
};
</script>
</head>
Inicialização de widgets para aplicativos de página única
Para aplicativos de página única, em que data-bm-widget-agent-id
é criado durante a execução, a biblioteca JavaScript do Business Messages
expõe um objeto global window.bmwidget.
Sempre que um novo elemento for adicionado à página, chame
window.bmwidget.scan()
para inicializar o novo elemento como um widget do Business Messages.
window.bmwidget.scan();
Chame window.bmwidget.scan() no callback de atualização do DOM para garantir que
O atributo data-bm-widget-agent-id é reinicializado quando a página muda de estado.
Exemplo do Angular
O código abaixo inicializa window.bmwidget.scan() durante o carregamento do componente.
no Angular.
import { Component, OnInit} from '@angular/core';
export class AppComponent implements onInit {
ngOnInit() {
// Initialize tag on re-render
window.bmwidget.scan();
}
}
Exemplo de reação
O código a seguir inicializa a função window.bmwidget.scan() durante a
a renderização de um elemento no React.
import React, { useState, useEffect } from 'react';
function WrapperComponent() {
...
useEffect(() => {
// Initialize on re-render
window.bmwidget.scan();
});
return (<div><button data-bm-widget-agent-id="myagentid">Chat with us</button></div>);
}
Próximas etapas
Agora que você integrou um widget do Business Messages ao seu site, é possível iniciar conversas do Business Messages no seu site e receber valores de contexto específicos do widget em mensagens dos usuários.