একটি ওয়েবসাইটের সাথে সংহত করুন

আপনার বিজনেস মেসেজ এজেন্টদের নাগালের পরিধি বাড়াতে, আপনি আপনার ওয়েবসাইটগুলিতে বিজনেস মেসেজ উইজেট দিয়ে কথোপকথনের এন্ট্রি পয়েন্ট যোগ করতে পারেন।

ব্যবসা বার্তা উইজেট শুধুমাত্র Android 5+ সহ মোবাইল ডিভাইস সমর্থন করে। অন্যান্য মোবাইল অপারেটিং সিস্টেম এবং ডেস্কটপ পরিবেশ সমর্থিত নয়।

একটি ওয়েবসাইটে একটি ব্যবসা বার্তা উইজেট যোগ করুন

একটি ওয়েবসাইট থেকে কথোপকথন সক্ষম করতে, আপনি ব্যবসা বার্তা জাভাস্ক্রিপ্ট লাইব্রেরি লোড করুন, পৃষ্ঠায় উইজেট বসানো কনফিগার করুন এবং উইজেটের মধ্যে প্রসঙ্গ মানগুলি নির্দিষ্ট করুন৷

প্রাপ্যতা ফাংশন, বৈশিষ্ট্য এবং ইভেন্টগুলির একটি তালিকার জন্য, ব্যবসা বার্তা উইজেট দেখুন। স্টাইলিং এবং ব্যবহারে সুপারিশের জন্য বিজনেস মেসেজ উইজেট স্টাইল গাইড দেখুন।

একটি উইজেট তৈরি করুন

আপনার ওয়েবসাইটে সন্নিবেশ করার জন্য একটি ব্যবসা বার্তা উইজেট তৈরি করতে নিম্নলিখিত মানগুলি আপডেট করুন৷

মান বর্ণনা
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>

বিজনেস মেসেজ উইজেট ইন্টিগ্রেশন কাস্টমাইজ করা

জাভাস্ক্রিপ্ট লাইব্রেরি লোড করুন

ব্যবসা বার্তা জাভাস্ক্রিপ্ট লাইব্রেরি লোড করতে, নিম্নলিখিত কোডটি অনুলিপি করুন এবং প্রতিটি পৃষ্ঠায় যেখানে আপনি একটি ব্যবসা বার্তা উইজেট প্রদর্শন করতে চান সেখানে <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 অ্যাট্রিবিউট সহ বিদ্যমান পৃষ্ঠা উপাদানগুলিকে আরম্ভ করে। জাভাস্ক্রিপ্ট লাইব্রেরি চিহ্নিত পৃষ্ঠা উপাদানগুলিকে ক্লিকযোগ্য উপাদানগুলিতে রূপান্তর করে যা ট্যাপ করার সময় ব্যবসা বার্তা কথোপকথন পৃষ্ঠ লোড করে।

ঐচ্ছিক 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>

প্রসঙ্গ মান পাস

উইজেট প্রসঙ্গ কনফিগার করতে এবং এটিকে আপনার ওয়েবহুকে পাস করতে, HTML উপাদানে ঐচ্ছিক 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>

নমুনা ওয়েবসাইট

নিম্নলিখিত নমুনাটি <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>

প্রোগ্রাম্যাটিক উইজেট আরম্ভ

আপনার সেটআপের উপর সূক্ষ্ম নিয়ন্ত্রণের জন্য, আপনি আপনার উইজেটটি প্রোগ্রাম্যাটিকভাবে শুরু করতে বেছে নিতে পারেন। প্রোগ্রাম্যাটিকভাবে একটি উপাদান শুরু করতে, বিজনেস মেসেজ জাভাস্ক্রিপ্ট লাইব্রেরি লোড হওয়ার পরে 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 ব্যবহার করুন। নিম্নলিখিত নমুনাটি একটি ব্যবসা বার্তা উইজেট হিসাবে আইডি "myCustomButton" সহ HTML উপাদান শুরু করার আগে ডিভাইস সমর্থনের জন্য পরীক্ষা করে। 

<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() এ কল করুন। 

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

প্রতিক্রিয়া উদাহরণ

নিম্নলিখিত কোডটি প্রতিক্রিয়াতে একটি উপাদানের রেন্ডারিংয়ের সময় 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>);
}

পরবর্তী পদক্ষেপ

এখন আপনি আপনার ওয়েবসাইটের সাথে একটি ব্যবসায়িক বার্তা উইজেট সংহত করেছেন, আপনি আপনার ওয়েবসাইট থেকে ব্যবসায়িক বার্তা কথোপকথন শুরু করতে পারেন এবং ব্যবহারকারীদের কাছ থেকে বার্তাগুলিতে উইজেট-নির্দিষ্ট প্রসঙ্গ মানগুলি পেতে পারেন ৷