기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

# Amazon Connect에서 호스팅되는 웹 사이트의 위젯 시작 동작 및 버튼 아이콘 사용자 지정
<a name="customize-widget-launch"></a>

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

**Topics**
+ [위젯의 사용자 지정 실행 동작을 구성하는 방법](#config-widget-launch)
+ [지원되는 옵션 및 제약 조건](#launch-options-constraints)
+ [사용자 지정 사용 사례에 맞게 위젯 실행 구성](#launch-usage)
+ [탭 간 채팅 세션 지속성 활성화](#chat-persistence-across-tabs)

## 위젯의 사용자 지정 실행 동작을 구성하는 방법
<a name="config-widget-launch"></a>

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

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

## 지원되는 옵션 및 제약 조건
<a name="launch-options-constraints"></a>

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


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

## 사용자 지정 사용 사례에 맞게 위젯 실행 구성
<a name="launch-usage"></a>

### 사용자 지정 위젯 실행 버튼
<a name="custom-launch-button"></a>

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

### 하이퍼링크 지원
<a name="hyperlink-support"></a>

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

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

### 버튼 클릭 시 위젯 에셋 로드
<a name="load-assets"></a>

다음은 사용자가 **채팅하기** 버튼을 클릭할 때 위젯의 정적 자산을 가져와서 웹 사이트 페이지를 더 빠르게 로드하기 위해 위젯에서 변경해야 하는 사항을 보여 주는 예입니다. 일반적으로 **문의하기** 페이지를 방문하는 고객 중 극히 일부만이 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
    });
});
```

### 브라우저 창에서 새 채팅을 시작합니다.
<a name="new-chat-browser-window"></a>

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

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

## 탭 간 채팅 세션 지속성 활성화
<a name="chat-persistence-across-tabs"></a>

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

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

사용자가 다른 하위 도메인으로 이동할 때 동일한 채팅 세션에 연결하려면 쿠키의 도메인 속성을 설정하면 됩니다. 예를 들어, `domain1.example.com` 및 `domain2.example.com`라는 두 개의 하위 도메인을 소유합니다. 모든 하위 도메인에서 쿠키에 액세스할 수 있도록 `domain=.example.com` 속성을 추가할 수 있습니다.

1. 호스팅된 위젯 코드 조각의 다른 amazon\$1connect 함수 옆에 다음 코드를 복사합니다. 그러면 `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";
   }
   });
   ```

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

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