Google Business Messages는 2024년 7월 31일에 지원 중단됩니다. 자세히 알아보기

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

웹사이트와 통합

Business Messages 에이전트의 도달범위를 넓히기 위해 대화를 추가할 수 있습니다. 웹사이트의 진입점을 만들 수 있습니다.

Business Messages 위젯은 Android 5 이상을 실행하는 휴대기기만 지원합니다. 다른 모바일 운영체제 및 데스크톱 환경은 지원되지 않습니다.

웹사이트에 Business Messages 위젯 추가

웹사이트에서 대화를 사용 설정하려면 Business Messages를 로드합니다. JavaScript 라이브러리, 페이지에서 위젯 배치 구성, 컨텍스트 지정 값을 설정할 수 있습니다.

가용성 함수, 속성, 이벤트의 목록은 비즈니스를 참고하세요. 메시지 위젯으로 이동합니다. 자세한 내용은 Business Messages 위젯 스타일 가이드 스타일 지정 및 사용합니다

위젯 만들기

다음 값을 업데이트하여 에 삽입할 Business Messages 위젯을 만듭니다. 확인할 수 있습니다

값	설명
`LAYOUT`	버튼이 표시되는 방식 확인할 수 있습니다 `button`, `floating`, `inline` 또는 `advanced`일 수 있습니다. 받는사람 나만의 스타일 사용, `advanced` 사용, 웹페이지에 스타일시트 복사 필요에 따라 수정할 수 있습니다
`AGENT_ID`	내 상담사 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 라이브러리는 식별된 페이지 요소를 클릭 가능한 요소로 변환합니다. 를 사용합니다.

선택사항인 cb 매개변수에는 자바스크립트 라이브러리가 로드되면 자동으로 호출됩니다.

위젯 배치 구성

Business Messages JavaScript 라이브러리가 로드되면 웹사이트를 스캔하여 요소를 data-bm-widget-agent-id 속성으로 변환하고 이러한 요소를 변환합니다. 탭 가능한 Business Messages 위젯에 넣으세요. 변환하려는 모든 요소 값이 있는 data-bm-widget-agent-id 속성을 포함해야 합니다. 해당하는 에이전트 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>

샘플 웹사이트

다음 샘플에서는 <head> 태그: 그러면 HTML 페이지를 자동으로 스캔하여 "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 지원을 확인하세요. 다음 샘플에서는 ID가 포함된 HTML 요소를 초기화하기 전에 기기 지원 '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();

DOM 업데이트 콜백에서 window.bmwidget.scan()를 호출하여 data-bm-widget-agent-id 속성은 페이지가 상태를 변경하면 다시 초기화됩니다.

Angular 예시

다음 코드는 구성요소를 로드하는 동안 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 대화를 시작하고 받기 위젯별 컨텍스트 값을 포함합니다.