שילוב עם אתר

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

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

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

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

לרשימת הפונקציות, המאפיינים והאירועים של הזמינות, קראו את המאמר ווידג'ט Business 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, יש לכלול את המאפיין האופציונלי data-bm-widget-context ברכיב ה-HTML שמכיל את המאפיין 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 וממירה את "myagentid" לווידג'טים של 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 עם המזהה mymyButton כווידג'ט של 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() בקריאה החוזרת לעדכון של ה-DOM כדי לוודא שהמאפיין data-bm-widget-agent-id יופעל מחדש כשדף ישנה את מצבו.

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

הקוד הבא מפעיל את window.bmwidget.scan() במהלך הקריאה החוזרת של הרכיב ב-Angular.

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 ולקבל ערכי הקשר ספציפיים לווידג'טים בהודעות ממשתמשים.