Web chat schedules

Use web chat schedules to specify when chat is available to users on your site.

The Web Chat Schedules feature only applies to version 1.0 and 1.1 widgets

The following optional web chat configuration properties define web chat schedules:

offlineSchedules: The days and times that the chat button is disabled.
onlineSchedules: The days and times that the chat button is enabled.
chatNowElement: The id of an element that will have the purecloud-chat-available class added to it when schedules indicate that chat is available.

If the offline and online schedules conflict, the offline schedule takes precedence.

If no schedules are set, web chat defaults to always on. If you only set an online schedule, then web chat treats all other times as offline hours.

Schedule format

Define schedules as an array of objects. You can use any combination of the following properties to define schedules. For example, if you list days but not times, then chat is closed for the entire day listed.

Use day to define days chat is available or unavailable.

Use dashes for ranges: Monday-Friday
Use commas for a list of days: Monday, Wednesday, Friday
Optionally use day abbreviations or numbers as shorthand: M,W,F or 1-5. Sunday is 0.

Use time to specify the hours chat is available or unavailable. Hours use a 24-hour format: 0900-1700
Use date to specify a day of the month: 25 or 24-27
Use year to specify the year: 2017
Use city to specify the time zone. Acceptable values are tz database time zones: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
Use month to specify entire months: June or June-August`5-8` January is 0.

Full example

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Web chat schedules example</title>
    <style type="text/css">
        #chat-button {
            display: none;
        }
        #chat-button.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: 'chat-button',

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

Online and offline example

// Other web chat configuration here

// Set up times chat is not available
// Removes 'purecloud-chat-available' class from chatNowElement
// Chat is not available Saturday or Sunday, using the Los Angeles time zone
offlineSchedules: [{
    day: 'Saturday,Sunday',
    city: 'America/Los_Angeles'
}],

// Set up times chat is available.
// Adds 'purecloud-chat-available' class to chatNowElement when available
// Chat is available Monday through Friday, 9 a.m. to 5 p.m., using the Los Angeles time zone.
onlineSchedules: [{
    day: 'Monday-Friday',
    time: '0900-1700',
    city: 'America/Los_Angeles'
}],

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

Holiday closed schedules example

offlineSchedules: [{
    day: 'Saturday,Sunday',
    city: 'America/Los_Angeles'
},
{
    date: 25,
    month: 11,
    year: 2017,
    city: 'America/Los_Angeles'
},
{
    date: 24-27,
    month: 10,
    year: 2017,
    city: 'America/Los_Angeles'
}],


onlineSchedules: [{
    day: 'Monday-Friday',
    time: '0900-1700',
    city: 'America/Los_Angeles'
}]

Holiday extended hours example

In this example, only online schedules are listed, and web chat treats all other hours as offline. This is done so that an offline schedule does not conflict with extended holiday hours, because offline schedules take precedence.

//Usual business hours
onlineSchedules: [{
    day: 'Monday-Friday',
    time: '0900-1700',
    city: 'America/Los_Angeles'
},
//Extra business hours on Black Friday
{
  date: 24,
  time: '0600-2000',
  city: 'America/Los_Angeles'
}]