Integrar com um site

Para ampliar o alcance dos agentes do Business Messages, você pode adicionar pontos de entrada de conversas nos seus sites com o widget Business Messages.

O widget do Business Messages só é compatível com dispositivos móveis com o Android 5 ou versões mais recentes. Outros sistemas operacionais e dispositivos móveis não são compatíveis.

Adicionar um widget do Business Messages a um site

Para ativar as conversas de um site, carregue a biblioteca JavaScript do Business Messages, configure o posicionamento do widget na página e especifique valores de contexto nele.

Para ver uma lista de funções, propriedades e eventos de disponibilidade, consulte Widget do Business Messages. Consulte o guia de estilo do widget Business Messages para ver recomendações de estilo e uso.

Criar um widget

Atualize os valores a seguir para criar um widget do Business Messages que será inserido no seu site.

Valor Descrição
LAYOUT como o botão aparece no seu site. Pode ser button, floating, inline ou advanced. Para usar seus próprios estilos, use advanced, copie a folha de estilo para sua página da Web e modifique conforme necessário.
AGENT_ID Seu ID do agente.
BUTTON_TEXT O texto que você quer exibir no botão. 
    <script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js"></script>
    <button data-bm-widget-layout="LAYOUT" data-bm-widget-agent-id="AGENT_ID">
      <span class="bm-widget-button-text">BUTTON_TEXT</span>
    </button>

Exemplo de widget

O widget Visualização do widget da Web é gerado pelo seguinte código:

    <script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js"></script>
    <button data-bm-widget-layout="button" data-bm-widget-agent-id="abcdefghijkl">
      <span class="bm-widget-button-text">Chat with us</span>
    </button>

Como personalizar a integração do widget Business Messages

Carregar a biblioteca JavaScript

Para carregar a biblioteca JavaScript do Business Messages, copie e cole o código a seguir imediatamente na tag <head> em todas as páginas em que você quer exibir um widget do Business Messages. Você só precisa de uma inclusão da biblioteca JavaScript 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 os elementos de página existentes com um atributo data-bm-widget-agent-id. 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 tocados.

O parâmetro opcional cb contém o nome de uma função que é chamada automaticamente quando a biblioteca JavaScript é carregada.

Configurar posição do widget

Quando a biblioteca JavaScript do Business Messages é carregada, ela verifica o site em busca de elementos com um atributo data-bm-widget-agent-id e os converte em widgets tocáveis do Business Messages. Cada elemento que você quer converter em um widget precisa incluir um atributo data-bm-widget-agent-id com um valor correspondente ao ID do agente lançado.

Exemplo: definições do 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 atributo opcional data-bm-widget-context no elemento HTML que contém o atributo data-bm-widget-agent-id. Especifique um valor de string para data-bm-widget-context. As mensagens enviadas para o webhook incluem o valor de contexto.

data-bm-widget-context pode ter qualquer valor, como um valor relevante para onde o widget é mostrado durante a execução na página. Nos exemplos a seguir, o valor do atributo de "eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci12RlIjoiQVNEQURTQSJ9Cg==" é uma 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 na tag <head>, que verifica automaticamente a página HTML e converte "myagentid" em 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 do widget programático

Para ter um controle refinado sobre sua configuração, você pode inicializar o widget de forma programática. Para inicializar um elemento de forma programática, chame bmwidget.init depois que a biblioteca JavaScript do Business Messages for carregada. Essa forma de inicialização não exige que você marque elementos com o atributo 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

Use window.bmwidget.supported para verificar se o dispositivo oferece suporte ao Business Messages. O exemplo a seguir verifica o suporte do dispositivo antes de inicializar o elemento HTML com o código "myCustomButton" como um widget 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 o atributo 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 inicializá-lo 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 seja reinicializado quando a página mudar de estado.

Exemplo do Angular

O código a seguir inicializa o window.bmwidget.scan() durante o callback do 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 do React

O código a seguir inicializa a função window.bmwidget.scan() durante 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 integrou um widget do Business Messages ao seu site, você pode iniciar conversas do Business Messages no seu site e receber valores de contexto específicos do widget nas mensagens dos usuários.