翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

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

次の表は、サポートされているカスタム起動動作オプションの一覧です。フィールドはオプションで、任意に組み合わせて使用できます。


| オプション名 | 型 | 説明 | デフォルトの値 | 
| --- | --- | --- | --- | 
| `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>

次の例は、ユーザーがクリックするのを待たずにウィジェットを開くために必要な、ウィジェット設定 `auto-launch` の変更を示しています。ウェブサイトでホストされているページにデプロイして、共有可能なハイパーリンクを作成できます。

```
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` 変数によって保存されます。この値を、ウィジェットが最初に初期化されるときに新しいタブのセッションストレージにコピーする必要があります。手順は次のとおりです。

ユーザーが別のサブドメインに移動したときに同じチャットセッションに接続できるようにするには、Cookie のドメインプロパティを設定します。例えば、`domain1.example.com` と `domain2.example.com` の 2 つのサブドメインを所有している場合、`domain=.example.com` プロパティを追加することで、すべてのサブドメインから Cookie にアクセスできるようになります。

1. ホストされたウィジェットスニペットの他の amazon\_connect 関数の横に、次のコードをコピーします。これにより、`registerCallback` イベントハンドラーを使って `persistedChatSession` を Cookie として保存し、新しいタブでアクセスできるようにします。また、チャットの終了時には Cookie のクリーンアップも実行します。

   

   ```
   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. Cookie 値が存在する場合に値を取得し、新しいタブでセッションストレージの値を設定します。

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