किसी वेबसाइट के साथ इंटिग्रेट करना

Business Messages के एजेंट की पहुंच बढ़ाने के लिए, अपनी वेबसाइटों पर Business Messages विजेट की मदद से, बातचीत के एंट्री पॉइंट जोड़ें.

Business Messages विजेट सिर्फ़ Android 5 और उसके बाद के वर्शन वाले मोबाइल डिवाइसों पर काम करता है. अन्य मोबाइल ऑपरेटिंग सिस्टम और डेस्कटॉप वर्शन काम नहीं करते.

किसी वेबसाइट पर Business Messages का विजेट जोड़ना

किसी वेबसाइट से बातचीत करने की सुविधा चालू करने के लिए, Business Messages की JavaScript लाइब्रेरी लोड की जाती है, पेज पर विजेट प्लेसमेंट को कॉन्फ़िगर किया जाता है, और विजेट में संदर्भ की वैल्यू तय की जाती है.

उपलब्धता फ़ंक्शन, प्रॉपर्टी, और इवेंट की सूची के लिए, कारोबार मैसेज विजेट देखें. स्टाइल करने और इस्तेमाल करने के सुझावों के लिए, 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>

विजेट का उदाहरण

यह विजेट वेब विजेट की झलक कोड से जनरेट किया गया है:

    <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 लाइब्रेरी लोड करना

Business Messages JavaScript लाइब्रेरी को लोड करने के लिए, इस कोड को कॉपी करें. इसके बाद, इसे हर उस पेज के <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 लाइब्रेरी लोड होने के बाद अपने-आप कॉल किया जाता है.

विजेट प्लेसमेंट को कॉन्फ़िगर करें

जब Business Messages की JavaScript लाइब्रेरी लोड होती है, तो यह वेबसाइट पर 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>

पास की जानकारी देना

विजेट के संदर्भ को कॉन्फ़िगर करने और इसे अपने वेबहुक में भेजने के लिए, data-bm-widget-agent-id एट्रिब्यूट वाले एचटीएमएल एलिमेंट में वैकल्पिक data-bm-widget-context एट्रिब्यूट शामिल करें. data-bm-widget-context के लिए स्ट्रिंग की वैल्यू डालें. आपके वेबहुक को भेजे गए मैसेज में संदर्भ वैल्यू शामिल होता है.

data-bm-widget-context में कोई भी मान हो सकता है, जैसे कि वह मान जो पेज पर रनटाइम के दौरान विजेट दिखाता है. यहां दिए गए उदाहरणों में, "eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==" की विशेषता का मान {"product":"dryer","offer-code":"ASDADSA"} की Base64-एन्कोड की गई JSON स्ट्रिंग है.

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> टैग में Business Messages की JavaScript लाइब्रेरी लोड करता है. इसके बाद, यह एचटीएमएल पेज को अपने-आप स्कैन करता है और "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>

प्रोग्रामेटिक विजेट शुरू करना

अपने सेटअप पर ज़्यादा कंट्रोल के लिए, आप अपने विजेट को प्रोग्राम के हिसाब से शुरू करने का विकल्प चुन सकते हैं. प्रोग्राम के ज़रिए किसी एलिमेंट को शुरू करने के लिए, Business Messages JavaScript लाइब्रेरी के लोड होने के बाद, 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>

डिवाइस सहायता देखना

किसी डिवाइस पर Business Messages की मदद पाने के लिए, window.bmwidget.supported का इस्तेमाल करें. Business Profile विजेट के तौर पर आईडी "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 एट्रिब्यूट बनाया जाता है, तो Business Messages JavaScript लाइब्रेरी में ग्लोबल ऑब्जेक्ट window.bmwidget दिखता है.

जब भी पेज में कोई नया एलिमेंट जोड़ा जाएगा, तब window.bmwidget.scan() को कॉल करें. इससे, नए एलिमेंट को Business Messages विजेट के तौर पर शुरू किया जा सकेगा.

window.bmwidget.scan();

पेज के स्टेटस में बदलाव होने पर, data-bm-widget-agent-id एट्रिब्यूट को फिर से शुरू करने के लिए, DOM अपडेट कॉलबैक पर window.bmwidget.scan() को कॉल करें.

ऐंगुलर का उदाहरण

नीचे दिया गया कोड, ऐंगुलर में कॉम्पोनेंट लोड होने वाले कॉलबैक के दौरान 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() फ़ंक्शन को शुरू करता है.

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 पर बातचीत शुरू की जा सकती है. साथ ही, उपयोगकर्ताओं के मैसेज में विजेट की खास वैल्यूदेखी जा सकती है