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

웹사이트와 통합

Business Messages 위젯을 사용하여 웹사이트에 대화 시작 지점을 추가하여 Business Messages 에이전트의 도달범위를 넓힐 수 있습니다.

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

웹사이트에 Business Messages 위젯 추가하기

웹사이트에서 대화를 사용 설정하려면 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 위젯 통합 맞춤설정

자바스크립트 라이브러리 로드

Business Messages 자바스크립트 라이브러리를 로드하려면 다음 코드를 복사하여 Business Messages 위젯을 표시하려는 모든 페이지의 <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 라이브러리를 사용하여 기존 페이지 요소를 초기화하는 자바스크립트 라이브러리를 다운로드하고 로드합니다. 자바스크립트 라이브러리는 식별된 페이지 요소를 탭할 때 Business Messages 대화형 영역을 로드하는 클릭 가능한 요소로 변환합니다.

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

위젯 배치 구성

Business Messages 자바스크립트 라이브러리가 로드될 때 웹사이트에서 data-bm-widget-agent-id 속성이 있는 요소를 검색하고 이러한 요소를 탭 가능한 Business Messages 위젯으로 변환합니다. 위젯으로 변환하려는 모든 요소에는 실행된 에이전트의 에이전트 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>

컨텍스트 값 전달

위젯 컨텍스트를 구성하여 웹훅에 전달하려면 data-bm-widget-agent-id 속성이 포함된 HTML 요소에 data-bm-widget-context 속성(선택사항)을 포함합니다. 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> 태그 내에 Business Messages 자바스크립트 라이브러리를 로드한 다음, 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>

프로그래매틱 위젯 초기화

설정을 세밀하게 제어하기 위해 프로그래매틱 방식으로 위젯을 초기화하도록 선택할 수 있습니다. 프로그래매틱 방식으로 요소를 초기화하려면 Business Messages 자바스크립트 라이브러리가 로드된 후 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를 사용하여 기기의 Business Messages 지원을 확인합니다. 다음 샘플은 ID가 '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 속성이 생성되는 단일 페이지 애플리케이션 애플리케이션의 경우 Business Messages 자바스크립트 라이브러리가 전역 객체 window.bmwidget를 노출합니다.

새 요소가 페이지에 추가될 때마다 window.bmwidget.scan()를 호출하여 새 요소를 Business Messages 위젯으로 초기화합니다.

window.bmwidget.scan();

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

Angular 예시

다음 코드는 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 예시

다음 코드는 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 대화를 시작하고 사용자의 메시지에서 위젯 관련 컨텍스트 값을 수신할 수 있습니다.