Web sitesiyle entegre etme

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

Business Messages widget'ı yalnızca Android 5 ve sonraki sürümlerin yüklü olduğu mobil cihazları destekler. Diğer mobil işletim sistemleri ve masaüstü ortamları desteklenmez.

Web sitelerine Business Messages widget'ı ekleme

Bir web sitesinden görüşmeleri etkinleştirmek için Business Messages'ı yüklemeniz gerekir JavaScript kitaplığı, sayfadaki widget yerleşimini yapılandırın ve bağlamı belirtin değerleri gösterilir.

Kullanılabilirlik işlevleri, özellikler ve etkinliklerin listesi için İşletme Mesajlar widget'ını tıklayın. Görüntüleyin Business Messages widget'ı stil kılavuzu stil önerileri ve tasarım önerileri pek de iyi olmadığını unutmayın.

Widget oluşturma

Eklenecek bir Business Messages widget'ı oluşturmak için aşağıdaki değerleri güncelleyin sitenizi ziyaret edin.

Değer Açıklama
LAYOUT Düğme sitenizi ziyaret edin. button, floating, inline veya advanced olabilir. Alıcı: kendi stillerinizi kullanın, advanced kullanın, stil sayfasını web sayfanıza kopyalayın, ve gerekli değişiklikleri yapın.
AGENT_ID Temsilci kimliğiniz.
BUTTON_TEXT İstediğiniz metin ilgili düğmeyi seçin. 
    <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

Bu widget (Web widget&#39;ı önizlemesi) şu kod tarafından oluşturuldu:

    <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ın ve Kopyaladığınız etiketi hemen her sayfada <head> etiketinin içine yapıştırın Business Messages widget'ı gösterir. Yalnızca bir JavaScript kitaplığına ihtiyacınız vardır dahil edilir.

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

Snippet, ilk kullanıma hazırlayan JavaScript kitaplığını indirip yükler data-bm-widget-agent-id özelliğine sahip mevcut sayfa öğeleri. İlgili içeriği oluşturmak için kullanılan JavaScript kitaplığı, tanımlanan sayfa öğelerini tıklanabilir öğelere dönüştürür dokunulduğunda Business Messages görüşme yüzeyini yükleyenler.

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

Widget yerleşimini yapılandırma

Business Messages JavaScript kitaplığı yüklendiğinde web sitesinde taranan data-bm-widget-agent-id özelliğine sahip öğeleri oluşturur ve bu öğeleri dönüştürür Business Messages widget'ına dönüştürün. Dönüştürülmesini istediğiniz her öğe ekleme özelliği, değeri olan bir data-bm-widget-agent-id özelliği içermelidir temsilcinizin temsilci kimliğine karşılık gelir.

Ö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ği, data-bm-widget-agent-id özelliği için de geçerlidir. Şunun için bir dize değeri belirtin: data-bm-widget-context Webhook'unuza gönderilen mesajlar bağlamı içerir değer.

data-bm-widget-context, değer gibi herhangi bir değere sahip olabilir sayfada gösterildiği yerle alakalı olmalıdır. Sonraki örnekte, "eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==" bir {"product":"dryer","offer-code":"ASDADSA"} öğesinin base64 kodlu JSON dizesi.

data-bm-widget-context, 512 bayt ile sınırlıdır.

Örnek: Bağlam içeren 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, <head> etiketi; bu etiket daha sonra HTML sayfasını otomatik olarak tarar ve dönüşümü &quot;myagentid&quot; Business Messages widget'ına dönüştürebilirsiniz.

<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 başlatma

Kurulumunuz üzerinde daha ayrıntılı kontrol sahibi olmak için programlı olarak açın. Bir öğeyi programlı bir şekilde başlatmak için bmwidget.init inceleyebilirsiniz. Bu biçim başlatma işlemi, öğeleri data-bm-widget-agent-id özelliği için de kullanılmaktadır.

<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 desteğini kontrol etme

Tekliflerinizi otomatikleştirmek ve optimize etmek için window.bmwidget.supported için Business Messages desteğini doğrulayın. Aşağıdaki örnek kontrolleri şu kimliğe sahip HTML öğesini başlatmadan önce cihaz desteği için: "myCustomButton" Business Messages widget'ı olarak kullanın.

<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 başlatma

data-bm-widget-agent-id ayarının kabul edildiği Tek Sayfalık Uygulamalar için özelliği çalışma zamanında oluşturulursa Business Messages JavaScript kitaplığı window.bmwidget global nesnesini ortaya çıkarır.

Sayfaya yeni bir öğe eklendiğinde, window.bmwidget.scan() simgesini tıklayın.

window.bmwidget.scan();

DOM güncelleme geri çağırmasında window.bmwidget.scan() öğesini çağırın: data-bm-widget-agent-id özelliği, sayfa durumu değiştiğinde yeniden başlatılır.

Açısal Örneği

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

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, window.bmwidget.scan() işlevini oluşturma.

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şlatın ve alın Kullanıcılardan gelen mesajlarda widget'a özel bağlam değerleri.