हम 31 जुलाई, 2024 को Google Business Messages की सेवा बंद कर देंगे. यहां ज़्यादा जानकारी दी गई है.

इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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-context एट्रिब्यूट जिसमें data-bm-widget-agent-id एट्रिब्यूट की वैल्यू सबमिट करें. इसके लिए एक स्ट्रिंग मान दर्ज करें 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>

सैंपल वेबसाइट

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

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

window.bmwidget.scan();

डीओएम अपडेट कॉलबैक पर window.bmwidget.scan() को कॉल करें, ताकि यह पक्का किया जा सके कि पेज की स्थिति बदलने पर, 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 पर बातचीत शुरू करना और पाएं उपयोगकर्ताओं के मैसेज में विजेट के हिसाब से कॉन्टेक्स्ट वैल्यू.