Bu sayfa, Cloud Translation API ile çevrilmiştir.

Web sitesiyle entegre etme

Business Messages temsilcilerinizin erişimini genişletmek için Business Messages widget'ını kullanarak web sitelerinize görüşme giriş noktaları ekleyebilirsiniz.

Business Messages widget'ı yalnızca Android 5 ve sonraki sürümlere sahip mobil cihazları destekler. Diğer mobil işletim sistemleri ve masaüstü ortamları desteklenmemektedir.

Web sitesine Business Messages widget'ı ekleme

Bir web sitesinden görüşmeleri etkinleştirmek için Business Messages JavaScript kitaplığını yükler, sayfadaki widget yerleşimini yapılandırır ve widget'ta bağlam değerlerini belirtirsiniz.

Müsaitlik durumu işlevlerinin, özelliklerinin ve etkinliklerinin bir listesi için İşletmelerden Mesajlar widget'ını inceleyin. Stil ve kullanımla ilgili öneriler için Business Messages widget stil kılavuzuna bakın.

Widget oluşturma

Web sitenize eklenecek bir Business Messages widget'ı oluşturmak için aşağıdaki değerleri güncelleyin.

Değer	Açıklama
`LAYOUT`	Düğmenin web sitenizde nasıl göründüğü. `button`, `floating`, `inline` veya `advanced` olabilir. Kendi stillerinizi kullanmak için `advanced` kullanın, stil sayfasını web sayfanıza kopyalayın ve gerektiği şekilde değiştirin.
`AGENT_ID`	Temsilci kimliğiniz.
`BUTTON_TEXT`	Düğmenin gösterilmesini istediğiniz metin.

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

Örnek widget

Web widget'ı önizlemesi widget'ı aşağıdaki kodla oluşturulur:

    <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 widget entegrasyonunu özelleştirme

JavaScript kitaplığını yükleme

Business Messages JavaScript kitaplığını yüklemek için aşağıdaki kodu kopyalayıp Business Messages widget'ını göstermek istediğiniz her sayfadaki <head> etiketinin hemen içine yapıştırın. Sayfa başına yalnızca bir JavaScript kitaplığına ihtiyacınız vardır.

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

Snippet, mevcut kitaplık öğelerini bir data-bm-widget-agent-id özelliğiyle başlatan JavaScript kitaplığını indirip yükler. JavaScript kitaplığı, tanımlanan sayfa öğelerini, dokunulduğunda Business Messages görüşme yüzeyini yükleyen tıklanabilir öğelere dönüştürür.

İsteğe bağlı cb parametresi, JavaScript kitaplığı yüklendiğinde otomatik olarak çağrılan bir işlevin adını içerir.

Widget yerleşimini yapılandırın

Business Messages JavaScript kitaplığı yüklendiğinde web sitesinde data-bm-widget-agent-id özelliğine sahip öğeler olup olmadığını anlamak için tarama yapar ve bu öğeleri dokunulabilir Business Messages widget'larına dönüştürür. Widget'a dönüştürülmesini istediğiniz her öğe, başlatılan temsilcinizin aracı kimliğine karşılık gelen bir data-bm-widget-agent-id özelliği içermelidir.

Örnek: Widget tanımları

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

Bağlam değerlerini iletme

Widget bağlamını yapılandırmak ve webhook'unuza iletmek için isteğe bağlı data-bm-widget-context özelliğini data-bm-widget-agent-id özelliğini içeren HTML öğesine ekleyin. data-bm-widget-context için bir dize değeri belirtin. Webhook'unuza gönderilen mesajlar bağlam değerini içerir.

data-bm-widget-context, widget'ın sayfada çalışma zamanında gösterildiği konumla alakalı herhangi bir değer (ör. Aşağıdaki örneklerde "eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==" özellik değeri, {"product":"dryer","offer-code":"ASDADSA"} olan base64 kodlu bir JSON dizesidir.

data-bm-widget-context 512 baytla sınırlıdır.

Örnek: Bağlamla ilgili widget tanımları

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

Örnek web sitesi

Aşağıdaki örnek, Business Messages JavaScript kitaplığını <head> etiketine yükler. Daha sonra HTML sayfası otomatik olarak taranır ve "myagentid", Business Messages widget'larına dönüştürülür.

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

Programatik widget'ı ilk kullanıma hazırlama

Ayarlarınız üzerinde ayrıntılı kontrol için widget'ınızı programatik olarak başlatmayı seçebilirsiniz. Bir öğeyi programatik olarak ilk kullanıma hazırlamak için, Business Messages JavaScript kitaplığı yüklendikten sonra bmwidget.init yöntemini çağırın. Bu ilk kullanıma hazırlama yöntemi, öğeleri data-bm-widget-agent-id özelliğiyle işaretlemenizi gerektirmez.

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

Cihaz destek birimine göz atın

Bir cihazda Business Messages desteğini doğrulamak için window.bmwidget.supported aracını kullanın. Aşağıdaki örnek, "myCustomButton" kimliğine sahip HTML öğesinin Business Messages widget'ı olarak başlatılmasından önce cihaz desteğini kontrol eder.

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

Tek Sayfalık Uygulamalar için widget'ları başlatma

Çalışma zamanında data-bm-widget-agent-id özelliğinin oluşturulduğu Tek Sayfalık Uygulamalar uygulamalarında Business Messages JavaScript kitaplığı window.bmwidget genel nesnesiyle karşılaşır.

Sayfaya yeni bir öğe eklendiğinde, yeni öğeyi Business Messages widget'ı olarak başlatmak için window.bmwidget.scan() çağrısı yapın.

window.bmwidget.scan();

Sayfa durumu değiştiğinde data-bm-widget-agent-id özelliğinin yeniden başlatılmasını sağlamak için DOM güncelleme geri çağırma işleminde window.bmwidget.scan() işlevini çağırın.

Angular Örneği

Aşağıdaki kod, Angular'da bileşen yüklenirken geri çağırma sırasında window.bmwidget.scan() öğesini başlatır.

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

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

Tepki Örneği

Aşağıdaki kod, Tepki'de bir öğenin oluşturulması sırasında window.bmwidget.scan() işlevini başlatır.

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

Sonraki adımlar

Business Messages widget'ını web sitenize entegre ettiğinize göre, artık web sitenizden Business Messages görüşmeleri başlatabilir ve kullanıcıların mesajlarında widget'a özel bağlam değerleri alabilirsiniz.