local-testing/index.html

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="amazon-connect-chat-interface.js"></script>
    <script src="backendEndpoints.js"></script>
</head>
<body>

    <div>
        <section class="section-main" id="section-main" style="position: absolute; float: left; width: 50%;">
            <header>
                <h1>Amazon Connect - Custom Implementation of Customer Chat</h1>
            </header>

            <form name="contactDetails" id="contactDetails" style="padding-top: 30px">
                <fieldset>
                    <div>
                        <table>
                            <tbody>
                                <tr>
                                    <td>
                                        <label for="firstName"
                                            style="width: 128px; padding-right: 25px; padding-bottom: 10px;">Name:</label>
                                    </td>
                                    <td>
                                        <input name="firstName" type="text" id="firstName" placeholder="First Name"
                                            style="width:161px;">
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <input type="submit" style="padding-left: 10px;" class="submit" id="startChat"
                                            value="Start Chat"></input>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </fieldset>
            </form>
        </section>
        <section class="section-chat" id="section-chat" style="float: right; width: 50%; transition: opacity 1s; opacity: 0;">
            <div id="root"></div>
        </section>
    </div>
    <script>
        (function () {
            connect.ChatInterface.init({
                containerId: 'root' // This is the id of the container where you want the widget to reside
            });

            document.getElementById('contactDetails').addEventListener('submit', function (e) {
                e.preventDefault();

                customerName = document.getElementById('firstName').value;
                if (!customerName) {
                    alert('you must enter a name & username');
                    document.getElementById("contactDetails").reset();
                } else {
                    console.log("this is the first name:" + customerName);
                    document.getElementById("contactDetails").reset();

                    connect.ChatInterface.initiateChat({
                        name: customerName,
                        region,
                        apiGatewayEndpoint,
                        contactAttributes: JSON.stringify({
                            "customerName": customerName
                        }),
                        featurePermissions: {
                            "ATTACHMENTS": false,  // this is the override flag from user for attachments
                        },
                        supportedMessagingContentTypes: "text/plain,text/markdown", // enable rich messaging
                        contactFlowId,
                        instanceId
                    },successHandler, failureHandler);
                }
            });
        })();

        function successHandler(chatSession) {
            console.log("success!");
            document.getElementById('section-chat').style.opacity = 1;

            chatSession.onChatDisconnected(function(data) {
                document.getElementById('section-chat').style.opacity = 0;
            });
        }

        function failureHandler(error) {
            console.log("There was an error: ");
            console.log(error);
        }
    </script>

</body>