שילוב עם אתר

כדי להרחיב את פוטנציאל החשיפה של נציגי Business Messages, אפשר להוסיף שיחה את נקודות הכניסה לאתרים שלכם באמצעות הווידג'ט של Business Messages.

הווידג'ט של Business Messages תומך רק במכשירים ניידים עם Android 5 ואילך. אין תמיכה במערכות הפעלה אחרות לנייד ובסביבות עבודה אחרות.

הוספת ווידג'ט של Business Messages לאתר

כדי להפעיל שיחות מהאתר, צריך לטעון את Business Messages ספריית JavaScript, הגדרת מיקום הווידג'ט בדף וציון הקשר בווידג'ט.

לרשימת פונקציות, נכסים ואירועים זמינים במאמר עסק Google Messages לווידג'ט הזה. צפייה מדריך הסגנון לווידג'ט של Business Messages לקבלת המלצות בסגנון לשימוש.

יצירת ווידג'ט

צריך לעדכן את הערכים הבאים כדי ליצור ווידג'ט של Business Messages להוספה אל באתר שלך.

ערך תיאור
LAYOUT איך הלחצן מופיע ב- באתר שלך. יכול להיות button, floating, inline או advanced. שפת תרגום להשתמש בסגנונות משלך, להשתמש ב-advanced, להעתיק את גיליון הסגנון לדף האינטרנט שלך, ולשנות אותו לפי הצורך.
AGENT_ID מזהה הנציג:
BUTTON_TEXT הטקסט שניתן לסמן לייק על הלחצן שמוצג. 
    <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>

ווידג'ט לדוגמה

הווידג'ט תצוגה מקדימה של ווידג&#39;ט האינטרנט נוצר באמצעות הקוד הבא:

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

התאמה אישית של שילוב הווידג'ט של Business Messages

טעינת ספריית JavaScript

כדי לטעון את ספריית ה-JavaScript של Business Messages, צריך להעתיק את הקוד הבא מדביקים אותו מיד בתוך התג <head> בכל דף שבו רוצים להציג את הווידג'ט של Business Messages. צריך רק ספריית JavaScript אחת לכל דף.

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

קטע הקוד מוריד וטוען את ספריית JavaScript, שמאתחלת רכיבי דף קיימים עם המאפיין data-bm-widget-agent-id. ספריית JavaScript ממירה את רכיבי הדף שזוהו לרכיבים קליקביליים שטוענים את שטח השיחה של Business Messages כשמקישים עליהם.

הפרמטר האופציונלי cb מכיל שם של פונקציה נקרא באופן אוטומטי אחרי שספריית ה-JavaScript נטענת.

הגדרת המיקום של הווידג'ט

כשספריית ה-JavaScript של Business Messages נטענת, האתר נסרק אלמנטים עם המאפיין data-bm-widget-agent-id וממירים את הרכיבים האלה לווידג'טים של Business Messages שאפשר להקיש עליהם. כל רכיב שרוצים להמיר לווידג'ט חייב לכלול מאפיין data-bm-widget-agent-id עם ערך שתואם למזהה הנציג שהופעל.

דוגמה: הגדרות ווידג'ט

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

העברת ערכי הקשר

כדי להגדיר הקשר של הווידג'ט ולהעביר אותו ל-webhook, צריך לכלול את הרכיבים האופציונליים ברכיב ה-HTML שמכיל את המאפיין data-bm-widget-context data-bm-widget-agent-id. ציון ערך מחרוזת עבור data-bm-widget-context הודעות שנשלחות ל-webhook כוללות את ההקשר עם ערך מסוים.

לפונקציה data-bm-widget-context יכול להיות כל ערך, כמו ערך שרלוונטיות למיקום שבו הווידג'ט מוצג בזמן הריצה בדף. בתוך לדוגמה, ערך המאפיין של "eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==" היא מחרוזת JSON בקידוד base64 של {"product":"dryer","offer-code":"ASDADSA"}.

הגודל של data-bm-widget-context מוגבל ל-512 בייטים.

דוגמה: הגדרות ווידג'ט עם הקשר

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

אתר לדוגמה

בדוגמה הבאה נטען ספריית ה-JavaScript של Business Messages בתוך התג <head>, שסורק באופן אוטומטי את דף ה-HTML ומשלים המרה &quot;myagentid&quot; לווידג'טים של 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>

אתחול ווידג'ט פרוגרמטי

לקבלת שליטה פרטנית על ההגדרות, תוכלו לאתחל את את הווידג'ט באופן פרוגרמטי. כדי לאתחל רכיב באופן פרוגרמטי, קוראים bmwidget.init אחרי שספריית ה-JavaScript של Business Messages נטענת. הטופס הזה של האתחול לא מחייב אתכם לסמן רכיבים עם מאפיין 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>

בדיקת התמיכה במכשיר

כדאי להשתמש window.bmwidget.supported כדי לאמת את התמיכה ב-Business Messages במכשיר מסוים. הבדיקות לדוגמה לתמיכה במכשירים לפני אתחול רכיב ה-HTML עם מזהה "לחצן ההתאמה האישית שלי" בתור ווידג'ט של 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>

אתחול ווידג'ט לאפליקציות בדף יחיד

באפליקציות עם דף יחיד, שבהן data-bm-widget-agent-id נוצר בזמן הריצה, ספריית ה-JavaScript של Business Messages חושפת אובייקט גלובלי window.bmwidget.

בכל פעם שרכיב חדש מתווסף לדף, ניתן לקרוא window.bmwidget.scan() כדי לאתחל את הרכיב החדש כווידג'ט של Business Messages.

window.bmwidget.scan();

קוראים לפונקציה window.bmwidget.scan() בקריאה חוזרת (callback) של עדכון DOM כדי לוודא המאפיין data-bm-widget-agent-id מתחיל מחדש כשהמצב של הדף משתנה.

דוגמה זוויתית

הקוד הבא מאתחל את window.bmwidget.scan() במהלך טעינת הרכיב ב-Agular.

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

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

דוגמה לתגובה

הקוד הבא מאתחל את הפונקציה window.bmwidget.scan() במהלך ברינדור של רכיב ב-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>);
}

השלבים הבאים

אחרי שמשלבים את הווידג'ט של Business Messages באתר, אפשר להתחיל שיחות ב-Business Messages מהאתר שלכם קבלה ערכי הקשר ספציפיים לווידג'ט בהודעות ממשתמשים.