ادغام با یک وب سایت

برای گسترش دسترسی نمایندگان پیام‌های تجاری خود، می‌توانید با ویجت پیام‌های تجاری، نقاط ورودی مکالمه را در وب‌سایت‌های خود اضافه کنید.

ویجت Business Messages فقط از دستگاه‌های همراه با Android نسخه ۵ و بالاتر پشتیبانی می‌کند. سایر سیستم عامل های تلفن همراه و محیط های دسکتاپ پشتیبانی نمی شوند.

ویجت پیام های تجاری را به وب سایت اضافه کنید

برای فعال کردن مکالمات از یک وب‌سایت، کتابخانه جاوا اسکریپت پیام‌های تجاری را بارگیری می‌کنید، قرار دادن ویجت را در صفحه پیکربندی می‌کنید، و مقادیر زمینه را در ویجت مشخص می‌کنید.

برای فهرستی از توابع، ویژگی‌ها و رویدادهای در دسترس بودن، به ویجت پیام‌های تجاری مراجعه کنید. برای توصیه‌هایی در مورد استایل و استفاده ، راهنمای سبک ویجت پیام‌های تجاری را ببینید.

یک ویجت ایجاد کنید

مقادیر زیر را برای ایجاد ویجت 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>

ویجت نمونه

این ویجت پیش نمایش ویجت وب توسط کد زیر تولید می شود:

    <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

کتابخانه جاوا اسکریپت را بارگیری کنید

برای بارگیری کتابخانه جاوا اسکریپت پیام‌های تجاری، کد زیر را کپی کرده و بلافاصله در تگ <head> در هر صفحه‌ای که می‌خواهید ویجت پیام‌های تجاری را نمایش دهید، جای‌گذاری کنید. شما تنها به یک گنجاندن کتابخانه جاوا اسکریپت در هر صفحه نیاز دارید.

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

این قطعه کتابخانه جاوا اسکریپت را بارگیری و بارگیری می کند، که عناصر صفحه موجود را با ویژگی data-bm-widget-agent-id مقداردهی اولیه می کند. کتابخانه جاوا اسکریپت عناصر صفحه شناسایی شده را به عناصر قابل کلیک تبدیل می کند که با ضربه زدن، سطح مکالمه Business Messages را بارگیری می کند.

پارامتر cb اختیاری حاوی نام تابعی است که به‌محض بارگیری کتابخانه جاوا اسکریپت به‌طور خودکار فراخوانی می‌شود.

پیکربندی قرار دادن ویجت

هنگامی که کتابخانه جاوا اسکریپت پیام‌های تجاری بارگیری می‌شود، وب‌سایت را برای عناصر دارای ویژگی data-bm-widget-agent-id اسکن می‌کند و این عناصر را به ویجت‌های پیام‌های تجاری قابل لمس تبدیل می‌کند. هر عنصری که می‌خواهید به ویجت تبدیل شود باید دارای ویژگی 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>

مقادیر زمینه را پاس کنید

برای پیکربندی زمینه ویجت و ارسال آن به هوک خود، ویژگی اختیاری data-bm-widget-context را در عنصر HTML که حاوی ویژگی data-bm-widget-agent-id اضافه کنید. یک مقدار رشته برای data-bm-widget-context مشخص کنید. پیام‌هایی که به وب هوک شما ارسال می‌شوند شامل مقدار متن هستند.

data-bm-widget-context می تواند هر مقداری داشته باشد، مانند مقدار مربوط به جایی که ویجت در زمان اجرا در صفحه نشان داده می شود. در مثال‌های زیر، مقدار مشخصه "eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==" یک رشته JSON با کد پایه 64 از {"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>

نمونه وب سایت

نمونه زیر کتابخانه جاوا اسکریپت پیام های تجاری را در تگ <head> بارگیری می کند، که سپس به طور خودکار صفحه HTML را اسکن می کند و "myagentid" را به ویجت های پیام های تجاری تبدیل می کند.

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

مقداردهی اولیه ویجت برنامه ای

برای کنترل دقیق بر تنظیمات خود، ممکن است انتخاب کنید که ویجت خود را به صورت برنامه ای مقداردهی اولیه کنید. برای مقداردهی اولیه یک عنصر، پس از بارگیری کتابخانه جاوا اسکریپت Business Messages، bmwidget.init را فراخوانی کنید. این شکل اولیه نیازی به علامت گذاری عناصر با ویژگی 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 با شناسه "myCustomButton" به عنوان ویجت 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 در زمان اجرا ایجاد می‌شود، کتابخانه جاوا اسکریپت پیام‌های تجاری یک شی سراسری window.bmwidget را نشان می‌دهد.

هر زمان که یک عنصر جدید به صفحه اضافه می شود، window.bmwidget.scan() را فراخوانی کنید تا عنصر جدید به عنوان ویجت Business Messages مقداردهی شود. 

window.bmwidget.scan();

برای اطمینان از اینکه صفت data-bm-widget-agent-id زمانی که صفحه حالت خود را تغییر می‌دهد، مجدداً مقداردهی اولیه می‌شود window.bmwidget.scan() را در بازگشت به‌روزرسانی DOM فراخوانی کنید.

مثال زاویه ای

کد زیر در حین بارگذاری مجدد کامپوننت در Angular، window.bmwidget.scan() را مقداردهی اولیه می کند. 

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

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

React مثال

کد زیر تابع 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>);
}

مراحل بعدی

اکنون که ویجت پیام‌های تجاری را با وب‌سایت خود ادغام کرده‌اید، می‌توانید مکالمات «پیام‌های تجاری» را از وب‌سایت خود شروع کنید و مقادیر زمینه خاص ویجت را در پیام‌های کاربران دریافت کنید .