Se usó la API de Cloud Translation para traducir esta página.

Cómo realizar la integración con un sitio web

Para ampliar el alcance de tus agentes de Business Messages, puedes agregar puntos de entrada de conversación en tus sitios web con el widget de Business Messages.

El widget Business Messages solo admite dispositivos móviles que ejecutan Android 5+. No se admiten otros sistemas operativos móviles ni entornos de escritorio.

Cómo agregar un widget de Business Messages a un sitio web

Para habilitar las conversaciones desde un sitio web, carga la biblioteca de JavaScript de Business Messages, configura la posición del widget en la página y especifica los valores de contexto dentro del widget.

Para obtener una lista de las funciones, las propiedades y los eventos de disponibilidad, consulta el widget de Business Messages. Consulta la guía de estilo del widget de Business Messages para ver las recomendaciones de estilo y uso.

Crear un widget

Actualiza los siguientes valores a fin de crear un widget de Business Messages para insertar en tu sitio web.

Valor	Descripción
`LAYOUT`	Cómo aparece el botón en tu sitio web. Puede ser `button`, `floating`, `inline` o `advanced`. Para usar tus propios estilos, usa `advanced`, copia la hoja de estilo en tu página web y modifícala según sea necesario.
`AGENT_ID`	Tu ID del agente.
`BUTTON_TEXT`	El texto que deseas que se muestre en el botón.

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

Widget de ejemplo

Este widget Vista previa del widget web se genera con el siguiente 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>

Cómo personalizar la integración del widget de Business Messages

Carga la biblioteca JavaScript

Para cargar la biblioteca de Business Messages de JavaScript, copia el siguiente código y pégalo de inmediato en la etiqueta <head> de cada página en la que desees mostrar un widget de Business Messages. Solo necesitas una inclusión de la biblioteca de 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>

El fragmento descarga y carga la biblioteca JavaScript, que inicializa los elementos de página existentes con un atributo data-bm-widget-agent-id. La biblioteca de JavaScript convierte los elementos identificados de la página en elementos en los que se puede hacer clic y que cargan la superficie de conversación de Business Messages cuando se presiona.

El parámetro opcional cb contiene el nombre de una función a la que se llama automáticamente una vez que se carga la biblioteca de JavaScript.

Configurar la ubicación del widget

Cuando se carga la biblioteca JavaScript de Business Messages, se analiza el sitio web en busca de elementos con un atributo data-bm-widget-agent-id y los convierte en widgets que se pueden presionar. Cada elemento que deseas convertir en un widget debe incluir un atributo data-bm-widget-agent-id con un valor correspondiente al ID de agente para el agente iniciado.

Ejemplo: Definiciones de widgets

<!-- 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>

Pasa valores de contexto

Para configurar el contexto del widget y pasarlo a tu webhook, incluye el atributo opcional data-bm-widget-context en el elemento HTML que contiene el atributo data-bm-widget-agent-id. Especifica un valor de string para data-bm-widget-context. Los mensajes enviados a tu webhook incluyen el valor de contexto.

data-bm-widget-context puede tener cualquier valor, como un valor relevante en el lugar en el que se muestra el widget en el tiempo de ejecución en la página. En los siguientes ejemplos, el valor del atributo de "eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==" es una string JSON codificada en base64 de {"product":"dryer","offer-code":"ASDADSA"}.

data-bm-widget-context tiene un límite de 512 bytes.

Ejemplo: Definiciones de widgets con 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>

Sitio web de muestra

En el siguiente ejemplo, se carga la biblioteca JavaScript de Business Messages dentro de la etiqueta <head>, que, luego, escanea automáticamente la página HTML y convierte "myagentid" en widgets de 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>

Inicialización de widgets programáticos

Para un control más detallado de tu configuración, puedes optar por inicializar tu widget de manera programática. Para inicializar un elemento de manera programática, llama a bmwidget.init después de que se cargue la biblioteca de JavaScript de Business Messages. Esta forma de inicialización no requiere que marques elementos con el 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>

Cómo verificar la compatibilidad de tus dispositivos

Usa window.bmwidget.supported para verificar la compatibilidad de Business Messages con un dispositivo. En el siguiente ejemplo, se comprueba la compatibilidad de los dispositivos antes de inicializar el elemento HTML con el ID "myCustomButton" como un widget de 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>

Inicialización de widgets para aplicaciones de una sola página

En el caso de las aplicaciones para aplicaciones de una sola página, en las que el atributo data-bm-widget-agent-id se crea en el entorno de ejecución, la biblioteca JavaScript de Business Messages expone un objeto global window.bmwidget.

Cuando se agregue un nuevo elemento a la página, llama a window.bmwidget.scan() para inicializarlo como un widget de Business Messages.

window.bmwidget.scan();

Llama a window.bmwidget.scan() en la devolución de llamada de actualización del DOM para asegurarte de que el atributo data-bm-widget-agent-id se vuelva a inicializar cuando la página cambie de estado.

Ejemplo de Angular

El siguiente código inicializa window.bmwidget.scan() durante la devolución de llamada de carga de componentes en Angular.

import { Component, OnInit} from '@angular/core';

export class AppComponent implements onInit {
  ngOnInit() {
    // Initialize tag on re-render
    window.bmwidget.scan();
  }
}

Ejemplo de React

El siguiente código inicializa la función window.bmwidget.scan() durante la renderización de un elemento en 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óximos pasos

Ahora que integraste un widget de Business Messages con tu sitio web, puedes iniciar conversaciones de Business Messages desde tu sitio web y recibir valores de contexto específicos del widget en mensajes de los usuarios.