Web Chat Schedule examples

Genesys Cloud Web Chat
1

I would like to know if you have an example of implementation of the WebChat schedules?
We have a button to choose to start the chat widget or not.
I did a few try but I see that the schedules are only changing the class of the button when the chat is started. I would like to do the check before starting the chat.
Could you please explain when is the class added to the element?

2

Does the Web chat schedules documentation have the information you need?

3

I checked the documentation, but I don't manage to get the class changed for unavailable without actually starting the chat. Hence a better example would be welcomed.

4

It sounds like you are not calling the create function until the chat button is clicked.

An important change to make to capitalize on Scheduled Availability is to create the webchat on page load so that it can configure the class of your button. Then, when the button is clicked, render the frame or popup using renderFrame or renderPopup respectively.

An improved example is forthcoming.

1 Like
5

Thaks @charles.wall for the explanation. I will wait for the new example.

6

Here is a more complete example to try:

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Web chat schedules example</title>
    <style type="text/css">
        #chatButton {
            display: none;
        }
        #chatButton.purecloud-chat-available {
            display: inline;
        }

    </style>
</head>
<body>
    <h1>Web chat schedules example</h1>
    <form>

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

    </form>
    <div id="chat-container" style="height:600px"></div>

    <script src="https://apps.mypurecloud.com/webchat/jsapi-v1.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></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: 1234,

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

                // Target agent email (OPTIONAL)
                agentEmail: 'alex.agent@example.com',

                // Log level
                logLevel: 'DEBUG',

                // Locale code
                locale: 'en',

                // Logo used within the chat window
                companyLogoSmall: {
                    width: 149,
                    height: 149,
                    url: 'https://dhqbrvplips7x.cloudfront.net/webchat/1.0.23/company-logo-small-9c9fe09b.png'
                },

                // Text displayed with chat window is displayed
                welcomeMessage: 'Thanks for chatting.',

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

                // Custom style applied to the chat window
                css: {
                    width: '100%',
                    height: '100%'
                },

                onlineSchedules: [{
                    day: 'Monday-Friday',
                    time: '0800-1800',
                    city: 'America/Chicago'
                }],

                // Element that will have 'purecloud-chat-available' class added to it when
                // intersection of online and not offline schedules
                chatNowElement: chatButton,

            };
            var chatButton = document.getElementById('chat-button');

            ININ.webchat.create(chatConfig)
                .then(function (webchat) {
                    chatButton.onclick = function () {
                        webchat.renderFrame({
                            containerEl: 'chat-container'
                        });
                    };
                })
                .catch(function (err){
                    console.log(err);
                });

        });

    </script>

</body>
</html>
7

Thank you, I wil ltry that.

8

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