Webchat Won't Connect

Hello,

We've enabled webchat with the PureCloud platform for our queue but when attempting to launch the chat in our browser, nothing happens.

We are modifying the sample code from: https://developer.mypurecloud.com/api/webchat/

In the console we get the error:

Can you confirm the current list of optional variables and advise as to what may be causing the issue? Note that we have commented out some text from the original sample code.

Thanks,

Jamie

======================

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>PureCloud Webchat Demo</title>
    
</head>

<body>
<form id="chatForm">
    <h3>Enter Your Name to Chat</h3>

    <table class="webchat-config">
       <tbody>
       <tr>
           <th>First Name:</th>
           <td><input type="text" id="first-name" value="Test" /></td>
       </tr>
       <tr>
           <th>Last Name:</th>
           <td><input type="text" id="last-name" value="Test" /></td>
       </tr>
       <!-- <tr>
           <th>Agent Email:</th>
           <td><input type="text" id="agent-email" value="Test@test.com" /></td>
       </tr> -->
       </tbody>
   </table>
   

        <button type="button" id="chat-button">Start Chat</button>

    </form>
    <div id="chat-container" style="height:600px"></div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--<script  id="purecloud-webchat-js"  type="text/javascript"  src="https://apps.mypurecloud.com/webchat/jsapi-v1.js"  region="us-east-1"  org-guid="46186676-f379-4f9d-8771-2ccfd73721a8"  deployment-key="52c6aafa-e652-4ee7-b258-f32b3bc73741"></script> -->
<script src="https://apps.mypurecloud.com/webchat/jsapi-v1.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function initializeChat () {
        var chatConfig = {
            // Web chat application URL
            webchatAppUrl: 'https://apps.mypurecloud.com/webchat',

            // Web chat service URL
            webchatServiceUrl: 'https://realtime.mypurecloud.com:443',

            // Numeric organization ID
            orgId: 17199,

            // Organization name. Replace with your org name.
            orgName: 'DependableIT',

            
            // Priority
            priority: 10,

            // Queue Name
            queueName : 'ESupport Queue',

            // Target agent email (OPTIONAL)
            // agentEmail: '',

            // Whether to show submit button or send message on Enter keypress
            showSubmitButton: true,

            // Log level
            logLevel: 'DEBUG',

            // Locale code
            locale: 'en',

            // Whether to allow reconnects
            reconnectEnabled: true,

            //Allowed reconnect origins
            reconnectOrigins: ['https://dependableit.com', 'file:///C:/Users/jmallory/Documents/PCWC_dependableITv3.html', 'http://dependableit.com', 'http://www.dependableit.com', 'https://www.dependableit.com'],

            // Logo used within the chat window
            companyLogoSmall: {
                width: 149,
                height: 149,
                url: 'http://dependableit.com/wp-content/uploads/2018/05/logo-colored.png'
				},
				
            // Fallback image used for agent if no agent image is defined in the agent's PureCloud profile
            agentAvatar: {
                width: 462,
                height: 462,
                url: 'http://dependableit.com/wp-content/uploads/2018/05/logo-colored.png'
            },

            // Text displayed with chat window is displayed
            welcomeMessage: 'Welcome to DependableIT support',

            // CSS class applied to the chat window
            cssClass: 'webchat-frame',

            // Custom style applied to the chat window
            css: {
                width: '100%',
                height: '100%'
            }
        };
        var chatButton = document.getElementById('chat-button');

        // Required if reconnects are enabled
        window.PURECLOUD_WEBCHAT_FRAME_CONFIG = {
            containerEl: 'chat-container'
        };

        ININ.webchat.create(chatConfig)
            .then(function (webchat) {
                // Optionally use isAutoJoined if reconnects are enabled
                if (webchat.isAutoJoined()) {
                    // Do something to disable chat button
                }
                chatButton.onclick = function () {
                    var firstName = document.getElementById('first-name').value;
                    var lastName = document.getElementById('last-name').value;
                    //var agentEmail = document.getElementById('agent-email').value;

                    // Use getConfig.setConfigProperty() for any web chat configuration property to dynamically set config values.
                    //webchat.getConfig().setData({
                        //firstName: firstName,
                        //lastName: lastName,
                        //addressStreet: '64472 Brown Street',
                        //addressCity: 'Lindgrenmouth',
                        //addressPostalCode: '50163-2735',
                        //addressState: 'FL',
                        //phoneNumber: '1-916-892-2045 x293',
                        //phoneType: 'Cell',
                        //customerId: 59606
                    //});

                    //Use the updateConfig function to update batches of properties by passing in a partially filled chatConfig object
                    //webchat.updateConfig({
                        //agentEmail: 'debrah.agent@example.com',
                        //locale: 'es',
                        //welcomeMessage: 'Welcome to DependableIT support',
                    //});

                    // Alternatively, call webchat.renderPopup here. Note that reconnects do not apply to popup chat.
                    webchat.renderFrame({
                        containerEl: 'chat-container'
                    });
                };
            })
            .catch(function (err){
                console.log(err);
            });

    });

</script>

</body>
</html>

Hi,

Have you tried to use the chat configuration settings provided to you from https://developer.mypurecloud.ie/developer-tools/#/webchat?

I would test the chat there first and if that works try the same settings on a custom page. That way you can at least be sure that your settings are configured correctly.

Please open a ticket with PureCloud Support to report this issue.

To update the resolution here: we were attempting to put the Purecloud chat on an unsecured page but once moved to https:// it worked.

Thanks

This topic was automatically closed 31 days after the last reply. New replies are no longer allowed.