Eseguire l'integrazione con un sito web

Per ampliare la copertura dei tuoi agenti Business Messages, puoi aggiungere i punti di contatto nei siti web con il widget Business Messages.

Il widget Business Messages supporta solo i dispositivi mobili con Android 5 o versioni successive. Non sono supportati altri sistemi operativi per dispositivi mobili e ambienti desktop.

Aggiungere un widget Business Messages a un sito web

Per attivare le conversazioni da un sito web, carica Business Messages libreria JavaScript, configurare il posizionamento del widget nella pagina e specificare il contesto all'interno del widget.

Per un elenco di funzioni di disponibilità, proprietà ed eventi, consulta Messaggi widget. Consulta La guida di stile per il widget Business Messages per consigli su stile e per gli utilizzi odierni.

Crea un widget

Aggiorna i valori seguenti per creare un widget Business Messages da inserire del tuo sito web.

Valore Descrizione
LAYOUT Come viene visualizzato il pulsante del tuo sito web. Può essere button, floating, inline o advanced. A utilizzare stili personalizzati, usare advanced, copiare il foglio di stile nella pagina web, e modificarli secondo necessità.
AGENT_ID Il tuo ID agente.
BUTTON_TEXT Il testo che vuoi come il pulsante da visualizzare. 
    <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 di esempio

Questo widget Anteprima del widget web viene generato dal codice seguente:

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

Personalizzazione dell'integrazione del widget Business Messages

Carica la libreria JavaScript

Per caricare la libreria JavaScript di Business Messages, copia il seguente codice e incollalo immediatamente all'interno del tag <head> in ogni pagina in cui vuoi visualizzare un widget Business Messages. È necessaria una sola libreria JavaScript inclusione per pagina.

<!-- Global Business Messages widget library reference - Business Messages -->
<script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js?cb=callback">
</script>

Lo snippet scarica e carica la libreria JavaScript, che inizializza elementi di pagina esistenti con un attributo data-bm-widget-agent-id. La La libreria JavaScript converte gli elementi della pagina identificati in elementi cliccabili che caricano la superficie di conversazione di Business Messages quando vengono toccati.

Il parametro facoltativo cb contiene il nome di una funzione che è viene richiamata automaticamente una volta caricata la libreria JavaScript.

Configura il posizionamento del widget

Quando viene caricata la libreria JavaScript Business Messages, analizza il sito web per elementi con un attributo data-bm-widget-agent-id e li converte in widget Business Messages toccabili. Ogni elemento da convertire a un widget deve includere un attributo data-bm-widget-agent-id con un valore corrispondente all'ID agente dell'agente che hai avviato.

Esempio: definizioni dei 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>

Trasmettere valori di contesto

Per configurare il contesto del widget e passarlo al webhook, includi la sezione facoltativa Attributo data-bm-widget-context nell'elemento HTML che contiene l'oggetto Attributo data-bm-widget-agent-id. Specifica un valore di stringa per data-bm-widget-context. I messaggi inviati al webhook includono il contesto valore.

data-bm-widget-context può avere qualsiasi valore, ad esempio un valore pertinente al punto in cui il widget viene mostrato in fase di runtime sulla pagina. Nel seguente esempi, il valore dell'attributo "eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==" è un Stringa JSON con codifica base64 di {"product":"dryer","offer-code":"ASDADSA"}.

data-bm-widget-context ha un limite di 512 byte.

Esempio: definizioni dei widget con contesto

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

Sito web di esempio

L'esempio seguente carica la libreria JavaScript di Business Messages all'interno del file <head>, che a sua volta scansiona automaticamente la pagina HTML e converte &quot;myagentid&quot; nei widget 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>

Inizializzazione del widget programmatico

Per un controllo più dettagliato sulla configurazione, puoi scegliere di inizializzare widget in modo programmatico. Per inizializzare un elemento in modo programmatico, richiama bmwidget.init dopo il caricamento della libreria JavaScript di Business Messages. Questa forma di l'inizializzazione non richiede di contrassegnare gli elementi con Attributo 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>

Controlla il supporto dei dispositivi

Utilizza le funzionalità di window.bmwidget.supported per verificare il supporto di Business Messages per un dispositivo. I seguenti controlli di esempio per il supporto del dispositivo prima di inizializzare l'elemento HTML con ID "myCustomButton" come 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>

Inizializzazione del widget per applicazioni a pagina singola

Per le applicazioni a pagina singola, in cui l'data-bm-widget-agent-id viene creato in fase di runtime, la libreria JavaScript di Business Messages espone un oggetto globale window.bmwidget.

Ogni volta che viene aggiunto un nuovo elemento alla pagina, richiama window.bmwidget.scan() per inizializzare il nuovo elemento come widget Business Messages.

window.bmwidget.scan();

Chiama window.bmwidget.scan() al callback dell'aggiornamento del DOM per assicurarti che L'attributo data-bm-widget-agent-id si reinizializza quando la pagina cambia il proprio stato.

Esempio Angular

Il seguente codice inizializza window.bmwidget.scan() durante il caricamento del componente in Angular.

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

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

Esempio di reazione

Il seguente codice inizializza la funzione window.bmwidget.scan() durante il di un elemento in 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>);
}

Passaggi successivi

Ora che hai integrato il widget Business Messages nel tuo sito web, puoi avviare conversazioni di Business Messages dal tuo sito web e ricevere valori di contesto specifici del widget nei messaggi inviati dagli utenti.