本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

为托管在 Amazon Connect 中的网站自定义小部件启动行为和按钮图标

要进一步自定义网站显示和启动托管小组件图标的方式，您可以配置启动行为并隐藏默认图标。例如，您可以通过编程方式从网站上显示的与我们聊天按钮元素启动小组件。

如何为小组件配置自定义启动行为

要传递自定义启动行为，请使用以下示例代码块并将其嵌入到小组件中。以下示例中显示的所有字段均为可选字段，可以任意组合使用。

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

支持的选项和限制

下表列出了支持的自定义启动行为选项。均为可选字段，可任意组合使用。

为自定义用例配置小组件启动

自定义小组件启动按钮

以下示例显示了您需要在小组件中做出的更改，以便将编程启动配置为仅在用户选择网站上任意位置显示的自定义按钮元素时才打开。例如，他们可以选择名为联系我们或与我们聊天的按钮。或者，您可以隐藏默认 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>

支持超链接

以下示例显示了您需要在小组件配置 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>

点击按钮时加载小组件资产

以下示例显示了您需要在小组件中做出的更改，以便在用户单击与我们聊天按钮时通过获取小组件的静态资产来加快网站页面的加载速度。通常，只有一小部分访问联系我们页面的客户会打开 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>