الدمج مع موقع إلكتروني

لتوسيع نطاق وصول موظّفي الدعم في ميزة "الرسائل التجارية"، يمكنك إضافة محادثة. نقاط الدخول إلى مواقعك الإلكترونية باستخدام أداة "الرسائل التجارية"

يتوافق تطبيق "الرسائل التجارية" المصغّر فقط مع الأجهزة الجوّالة التي تعمل بنظام التشغيل Android 5 أو الإصدارات الأحدث. ولا يتم دعم أنظمة تشغيل الأجهزة الجوّالة وبيئات سطح المكتب الأخرى.

إضافة تطبيق مصغّر لميزة "الرسائل التجارية" إلى موقع إلكتروني

لتفعيل المحادثات من موقع إلكتروني، عليك تحميل "الرسائل التجارية". مكتبة JavaScript، وضبط موضع التطبيق المصغّر على الصفحة، وتحديد السياق والقيم ضمن التطبيق المصغّر.

للحصول على قائمة بوظائف مدى التوفّر والخصائص والأحداث، يُرجى الاطّلاع على النشاط التجاري الرسائل التطبيق المصغّر. عرض دليل التصميم المصغّر لميزة "الرسائل التجارية" للحصول على توصيات حول الأنماط استخدامها.

إنشاء تطبيق مصغّر

عدِّل القيم التالية لإنشاء تطبيق مصغّر لميزة "الرسائل التجارية" لإدراجه في موقعك الإلكتروني.

القيمة الوصف
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>

تخصيص عملية دمج تطبيق "الرسائل التجارية" المصغّر

تحميل مكتبة JavaScript

لتحميل مكتبة JavaScript في ميزة "الرسائل التجارية"، انسخ الرمز التالي الصقه مباشرةً ضمن العلامة <head> في كل صفحة تريد عرض تطبيق مصغّر لميزة "الرسائل التجارية" تحتاج إلى مكتبة 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 على تحويل عناصر الصفحة المحدّدة إلى عناصر قابلة للنقر. التي تحمِّل مساحة المحادثة في ميزة "الرسائل التجارية" عند النقر عليها

تحتوي معلمة cb الاختيارية على اسم دالة يتم استدعاؤه تلقائيًا عند تحميل مكتبة JavaScript.

ضبط موضع التطبيق المصغّر

عند تحميل مكتبة JavaScript في "الرسائل التجارية"، تفحص هذه المكتبة الموقع الإلكتروني بحثًا عن من العناصر ذات السمة 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 بترميز 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 للرسائل التجارية ضمن علامة <head>، التي تفحص بعد ذلك صفحة HTML تلقائيًا وتحوّل &quot;myagentid&quot; إلى تطبيقات مصغّرة لميزة "الرسائل التجارية"

<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 في "الرسائل التجارية". يُعد هذا الشكل من إلى أنك لا تتطلب منك وضع علامة على العناصر 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 للتأكّد من توافق ميزة "الرسائل التجارية" مع الجهاز عمليات التحقق النموذجية التالية لدعم الجهاز قبل تهيئة عنصر HTML باستخدام المُعرّف "myCustomButton" كأداة لميزة "الرسائل التجارية"

<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 للرسائل التجارية تعرض كائنًا عموميًا window.bmwidget.

وعند إضافة عنصر جديد إلى الصفحة، يتم استدعاء window.bmwidget.scan() لإعداد العنصر الجديد كأداة للرسائل التجارية

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>);
}

الخطوات التالية

الآن بعد أن دمجت أداة "الرسائل التجارية" مع موقعك الإلكتروني، يمكنك بدء محادثات من خلال ميزة "الرسائل التجارية" من موقعك الإلكتروني استلام قيم السياق الخاصة بالأداة في رسائل المستخدمين.