Amazon Connect에서 호스팅되는 웹 사이트의 위젯 시작 동작 및 버튼 아이콘 사용자 지정

PDFRSS

웹 사이트에서 호스팅된 위젯 아이콘을 렌더링하고 실행하는 방법을 추가로 사용자 지정하려면 실행 동작을 구성하고 기본 아이콘을 숨기면 됩니다. 예를 들어 웹 사이트에 렌더링되는 채팅하기 버튼 요소에서 위젯을 프로그래밍 방식으로 시작할 수 있습니다.

위젯의 사용자 지정 실행 동작을 구성하는 방법

사용자 지정 실행 동작을 전달하려면 다음 예제 코드 블록을 사용하여 위젯에 임베드하세요. 다음 예에 표시된 모든 필드는 선택 사항이며 어떤 조합이든 사용할 수 있습니다.

amazon_connect('customLaunchBehavior', {
    skipIconButtonAndAutoLaunch: true,
    alwaysHideWidgetButton: true,
    programmaticLaunch: (function(launchCallback) {
        var launchWidgetBtn = document.getElementById('launch-widget-btn');
        if (launchWidgetBtn) {
            launchWidgetBtn.addEventListener('click', launchCallback);
            window.onunload = function() {
            launchWidgetBtn.removeEventListener('click', launchCallback);
            return;
            }
        }
    })
});

지원되는 옵션 및 제약 조건

다음 테이블에는 지원되는 사용자 지정 실행 동작 옵션이 나와 있습니다. 필드는 선택 사항이며 어떤 조합이든 사용할 수 있습니다.

옵션 이름	유형	설명	기본값
skipIconButtonAndAutoLaunch	불	사용자가 페이지 로드를 클릭하지 않고도 위젯을 자동으로 실행할 수 있도록 활성화/비활성화하는 플래그.	정의되지 않음
alwaysHideWidgetButton	불	위젯 아이콘 버튼의 렌더링을 활성화/비활성화하기 위한 플래그(진행 중인 채팅 세션이 없는 경우).	정의되지 않음
programmaticLaunch	함수		정의되지 않음

사용자 지정 사용 사례에 맞게 위젯 실행 구성

사용자 지정 위젯 실행 버튼

다음은 사용자가 웹 사이트의 아무 곳에나 렌더링된 사용자 지정 버튼 요소를 선택할 때만 열리도록 프로그래밍 방식의 실행을 구성하기 위해 위젯에서 변경해야 할 사항을 보여 주는 예입니다. 예를 들어 문의하기 또는 채팅하기라는 버튼을 선택할 수 있습니다. 원하는 경우 위젯이 열릴 때까지 기본 Amazon Connect 위젯 아이콘을 숨길 수 있습니다.

<button id="launch-widget-btn">Chat With Us</button>

<script type="text/javascript">
 (function(w, d, x, id){
    s=d.createElement("script");
    s.src="./amazon-connect-chat-interface-client.js"
    s.async=1;
    s.id=id;
    d.getElementsByTagName("head")[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
  amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
  amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true,
        alwaysHideWidgetButton: true,
        programmaticLaunch: (function(launchCallback) {
            var launchWidgetBtn = document.getElementById('launch-widget-btn');
            if (launchWidgetBtn) {
                launchWidgetBtn.addEventListener('click', launchCallback);
                window.onunload = function() {
                launchWidgetBtn.removeEventListener('click', launchCallback);
                return;
                }
            }
        }),
    });
</script>

하이퍼링크 지원

다음은 사용자가 클릭할 때까지 기다리지 않고 위젯을 여는 위젯 구성에서 변경해야 할 사항을 보여 주는 예입니다. 웹 사이트가 호스팅하는 페이지에 배포하여 공유 가능한 하이퍼링크를 만들 수 있습니다.

https://example.com/contact-us?autoLaunchMyWidget=true

<script type="text/javascript">
 (function(w, d, x, id){
    s=d.createElement("script");
    s.src="./amazon-connect-chat-interface-client.js"
    s.async=1;
    s.id=id;
    d.getElementsByTagName("head")[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
  amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
  amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true
    });
</script>

버튼 클릭 시 위젯 에셋 로드

다음은 사용자가 채팅하기 버튼을 클릭할 때 위젯의 정적 자산을 가져와서 웹 사이트 페이지를 더 빠르게 로드하기 위해 위젯에서 변경해야 하는 사항을 보여 주는 예입니다. 일반적으로 문의하기 페이지를 방문하는 고객 중 극히 일부만이 Amazon Connect 위젯을 엽니다. 고객이 위젯을 열지 않더라도 위젯이 CDN에서 파일을 가져와 페이지 로딩에 지연 시간을 추가할 수 있습니다.

다른 해결책은 버튼 클릭 시 코드 조각을 비동기적으로(또는 전혀 실행하지 않는) 실행하는 것입니다.

<button id="launch-widget-btn">Chat With Us</button>

var buttonElem = document.getElementById('launch-widget-btn');

buttonElem.addEventListener('click', function() {
    (function(w, d, x, id){
        s=d.createElement("script");
        s.src="./amazon-connect-chat-interface-client.js"
        s.async=1;
        s.id=id;
        d.getElementsByTagName("head")[0].appendChild(s);
        w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
    })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
    amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
    amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
    amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true
    });
});

브라우저 창에서 새 채팅을 시작합니다.

다음은 새 브라우저 창을 시작하고 전체 화면에서 채팅을 자동 실행하기 위해 위젯에서 변경해야 하는 사항을 보여 주는 예입니다.

<button id="openChatWindowButton">Launch a Chat</button>

<script> // Function to open a new browser window with specified URL and dimensions
    function openNewWindow() {
        var url = 'https://mycompany.com/support?autoLaunchChat=true';

        // Define the width and height
        var width = 300;
        var height = 540;

        // Calculate the left and top position to center the window
        var left = (window.innerWidth - width) / 2;
        var top = (window.innerHeight - height) / 2;

        // Open the new window with the specified URL, dimensions, and position
        var newWindow = window.open(url, '', 'width=${width}, height=${height}, left=${left}, top=${top}');
    }

    // Attach a click event listener to the button
    document.getElementById('openChatWindowButton').addEventListener('click', openNewWindow);
</script>

탭 간 채팅 세션 지속성 활성화

기본적으로 채팅이 한 탭에서 열린 다음 사용자가 새 탭을 열고 다른 채팅을 시작하면 기존 채팅에 연결하는 대신 새 채팅이 시작됩니다. 사용자가 초기 탭에서 시작된 기존 채팅에 연결하도록 하려면 탭 간에 채팅 세션 지속성을 활성화할 수 있습니다.

채팅 세션은 변수의 브라우저에 있는 세션 스토리지에 저장됩니다persistedChatSession. 위젯을 처음 초기화할 때이 값을 새 탭의 세션 스토리지에 복사해야 합니다. 다음은 지침입니다.

1. 호스팅된 위젯 코드 조각의 다른 amazon_connect 함수 옆에 다음 코드를 복사합니다. 그러면 registerCallback 이벤트 핸들러가를 쿠키persistedChatSession로 저장하여 새 탭에서 액세스할 수 있습니다. 또한 채팅이 종료될 때 쿠키를 정리합니다.

   amazon_connect('registerCallback', {
   'CONNECTION_ESTABLISHED': (eventName, { chatDetails, data }) => {
    document.cookie = `activeChat=${sessionStorage.getItem("persistedChatSession")}; SameSite=None; Secure`;
   }, 
   'CHAT_ENDED': () => {
     document.cookie = "activeChat=; SameSite=None; Secure";
   }
   });

2. 쿠키 값이 있는 경우 해당 값을 검색하고 새 탭에서 세션 스토리지 값을 설정합니다.

   const cookie = document.cookie.split('; ').find(c => c.startsWith('activeChat='));
   if (cookie) {
     const activeChatValue = cookie.split('=')[1];
     sessionStorage.setItem('persistedChatSession', activeChatValue);
   }
   
   //Your hosted widget snippet should be on this page