Customizing public-facing chat

Multimedia Contact Center enables contact centers to customize both the contact-facing and agent-facing chat experience.

Public customizations add options to the chat request form as well as providing avatar options for contacts chatting with contact center agents. For information on customizing contact-facing chat options, see "Customizing chat request forms and chat sessions".

Agent-facing customizations modify chat and SMS handling options in Ignite and provide avatar options for agents handling chat and SMS options. For information on customizing agent-facing chat options, see "Customizing Ignite chat and SMS agent options".

Note:

Chat configuration must be consistent for the fields shared between the different JavaScript files used to customize chat. If you want to use a default public Gravatar image for a queue, for example, you must ensure that the same image is set in both chat.public.config.js and chat.agent.config.js.

Customizing chat request forms and chat sessions

Chat request forms and chat sessions can be customized to match your organizational style and provide different options to contacts. You can customize your chat offering at the contact center level and at the level of individual queues. Chat options are configured using a single JavaScript file, chat.public.config.js, that contains a series of JavaScript variables and properties. This file is hosted in CCMWa’s folder on the Enterprise Server (<drive>\Program Files (x86)\Mitel\MiContact Center\Website\CCMWa\Scripts\).

You can make the following customizations to your chat request forms and chat sessions:
  • Show or hide Estimated Wait Time, Number of Available Agents, Number of Idle Agents, Number of Chats Waiting, and Business Hours queue statistics
  • Enable chats to be submitted after hours
  • Enable chat requests to be submitted when the queue is closed or unavailable
  • Enable chats to be submitted when there are no available agents
  • Enable Gravatar avatars
  • Add a corporate logo and customize its placement on the chat request form
  • Provide a description for the queue that appears both on the chat request form and in the browser title bar
  • Change both the background color and if it displays as a solid color or a gradient
  • Show or hide the topic field, make topics mandatory, and set specific topic choices
  • Set up Gravatar avatars for contacts
  • Configure queue closed messages
  • Configure the LumaThreshold for light or dark icons
To customize chat request forms
Note:

If you customized your chat request form in version 7.0, your customizations will not be retained after an upgrade to version 8.1. For more information, see "Updating chat customization from Version 7.0 to Version ".

Configuring the public-facing chat JavaScript file

Configuration settings for chat request forms are controlled through a single JavaScript file, chat.public.config.js, which can be found at <drive>:\Program Files (x86)\Mitel\MiContact Center\Website\CCMWa\Scripts.

chat.public.config.js settings can be grouped into three categories:
  • Global settings—control chat request form settings and options. These settings are applied universally across chat request forms or are required to enable features at a queue level. The following table outlines the global fields.
  • Queue settings—control chat request form settings for the queue as well as chat session settings for queues. Queue settings are configured in both DefaultConfig and ChatQueues sections of chat.public.config.js. DefaultConfig settings are applied to all queues while ChatQueues settings, available in the advanced version of the Chat.Config file, are applied to individual specific queues. The following table outlines DefaultConfig and ChatQueues settings.
  • Logging and connection settings—provide troubleshooting options as well as set connection retry limits. The following table details the fields available for logging and connection settings.

When adding field values based on the following tables, ensure that they use correct JavaScript formatting and punctuation. If you configure your customized chat request forms using the basic chat.public.config.js and later decide that you want to customize the chat request form for individual queues, you can add the ChatQueues fields to your chat.public.config.js file using a text editor.

Table 1. Global settings fields
Field name Field value Field Description
EnableEstimateWaitTime True or False

This field controls whether or not Estimated Wait Time is available to all chat request forms.

If set to False, the Estimated Wait Time statistic does not display in any chat request form.

If set to True, the value configured under ShowEstimatedWaitTime determines if Estimated Wait Time displays or not.
EnableNumberOfAvailableAgents True or False

This field controls whether or not Number of Available Agents is available to all chat request forms.

If set to False, the Number of Available Agents statistic does not display in any chat request form.

If set to True, the value configured under ShowNumberOfAvailableAgents determines if Number of Available Agents displays or not.
EnableNumberOfIdleAgents True or False

This field controls whether or not Number of Idle Agents is available to all chat request forms.

If set to False, the Number of Idle Agents statistic does not display in any chat request form.

If set to True, the value configured under ShowNumberOfIdleAgents determines if Number of Idle Agents displays or not.
EnableNumberOfChatsWaiting True or False

This field controls whether or not Number of Chats Waiting is available to all chat request forms.

If set to False, the Number of Chats Waiting statistic does not display in any chat request form.

If set to True, the value configured under ShowNumberOfChatsWaiting determines if Number of Chats Waiting displays or not
EnableBusinessHours True or False

This field controls whether or not queue business hours are available to all chat request forms when the queue is outside of business hours.

If set to False, no business hours display for the queue when outside business hours.

If set to True, the value configured under ShowBusinessHours determines if business hours display or not.
EnableQueuingWhenNoAgentsLogin True or False

This field controls whether or not contacts can submit chat requests when no agents are available.

If set to False, no chat requests can be submitted when no agents are logged in.

If set to True, the value configured under AllowQueuingWhenNoAgentsLogin determines if chat requests can be submitted when no agents are logged in.
EnableQueuingInAfterHours True or False

This field controls whether or not contacts can submit chat requests outside of business hours

If set to False, no chat requests can be submitted outside of business hours.

If set to True, the value configured under AllowQueuingInAfterHours determines if chat requests can be submitted when no agents are logged in.
EnablePublicGravatar True or False

This field controls whether or not public users will use avatars provided through Gravatar.

If set to True, Chat sessions will use any Public Gravatar user image associated to the email addresses used in the chat session.

If set to False, no Public Gravatar user images will be used in the chat session.

Note:

This field must have the same value in chat.public.config.js, chat.agent.config.js, and chat.supervisor.config.js.
EnableAgentGravatar True or False

This field controls whether or not Chat will use Gravatar for Agents.

If set to True, Chat sessions will use any Gravatar user image associated to the email addresses used in the chat session or the image configured with DefaultAgentGravatarUrl.

If set to False, no agent Gravatar user images will be used in the chat session.

Note:

This field must have the same value in chat.public.config.js, chat.agent.config.js, and chat.supervisor.config.js.
Table 2. Queue setting fields
Field name Field Value Field description
Enabled True or False

This field enables or disables this configuration record.

If you set to False, the queue’s chat form will use the values from the default file in <drive>\Program Files (x86)\Mitel\MiContact Center\WebSites\CCMWa\Scripts\ Chat.ui.public.config.DEFAULT.js.
QueueId (ChatQueues only) The queue’s GUID, such as ‘26F1A5C3-DD2C-45FF-BE75-2BC7B85012D0’ The GUID for the chat queue to which you want the associated settings to apply. You can use YourSite Explorer to obtain a queue’s GUID. See "Obtaining Queue GUIDs".
LogoImgPath The path to the logo’s image file

The path to the image file containing your organization’s logo. Logo files should be located in the following folder:

<InstallDir>\MiContact Center\WebSites\CCMWa\Content\images\logo\ and must be set in the JavaScript file as /CCMWa/images/<image_file>.gif .

Note:

It is recommended that you keep a copy of your logo image file in a separate location to prevent your logo from being lost during an upgrade or installation in the future.
ShowLogo True or False

If set to True, the Logo image file specified in LogoImgPath will display in the chat request form.

If set to False, the Logo image file specified in LogoImgPath will not display in the chat request form.
QueueLabel The text you want to display as the queue’s label, such as ‘Sales Chat’ The queue label is text that will render both on the chat request form and in the title bar of the browser window title bar
ShowQueueLabel True or False

If set to True, the QueueLabel will display on the chat request form

If set to False, the QueueLabel will not display on the chat request form.
AppendQueueLabelToPageTitle True or False

If set to True, the QueueLabel value is added to the html document title for the page the chat is hosted in.

If set to False, the QueueLabel value is not added to the html document title.
FormatPrechatLogoToForm True or False

This field controls where the logo, if a logo is used, displays.

If set to True, the logo is formatted to be centered to the form fields on the chat request form and match the width of the fields (approximately 220 px).

If set to False, the logo will display statically in the top left corner of the page and its size will not be modified.
Gradient True or False

This field controls whether or not the background uses a gradient or solid color.

If set to True, the values in GradientStartColor and GradientEndColor are used to render a gradient background.

If set to False, the value in GradientStartColor is used to render a solid background.
GradientStartColor The color’s value, such as ‘#000000’

The start color for the background’s gradient or the solid color used for the background

Note:

Depending on the background color selected, the fonts and buttons/icons will automatically render in a dark or light form based on the background color implemented for optimal legibility.
GradientEndColor The color’s value, such as ‘#000000’ The end color for a gradient background
ShowEstimatedWaitTime True or False

Shows or hides the Estimated Wait Time statistic on the chat form.

Note:

EnableEstimatedWaitTime must be set to True.
ShowNumberOfAvailableAgents True or False

Shows or hides the Number of Available Agents statistic on the chat request form.

If set to True and there are no available agents, a message stating that ‘No agents are available to answer this request’ displays in place of the queue statistic.

Note:

EnableNumberOfAvailableAgents must be set to True.
ShowNumberOfIdleAgents True or False

Shows or hides the Number of Idle Agents statistic on the chat request form.

Note:

EnableNumberOfIdleAgents must be set to True.
ShowNumberOfChatsWaiting True or False

Shows or hides the Number of Chats Waiting statistic on the chat request form.

Note:

EnableNumberOfChatsWaiting must be set to True.
ShowBusinessHours True or False

Shows or hides the queue business hours on the chat request form.

Note:

EnableBusinessHours must be set to True.
AllowQueuingWhenNoAgentsLogin True or False

If set to True, chat requests can be submitted when there are no agents logged in.

If set to False, when there are not agents logged in, contacts cannot submit chat requests and receive the message ‘No agents are available to answer this request’.

Note:

EnableQueuingWhenNoAgentsLogin must be set to True.
AllowQueuingInAfterHours True or False

If set to True, chat requests can be submitted outside of the queue’s business hours.

If set to False, contacts are unable to submit chat requests to a queue outside of its business hours and receive a message which states ‘The office is now closed, please contact us during our office hours.’ and lists the business hours for the queue
ShowTopic True or False Show/hide the topic form field on the chat request form
RequireTopic True or False

If set to True, a topic is required for a chat request to be made.

If set to False, contacts may optionally enter or select a topic.
Topic Null or the text you want to display as the topic(s)

If set to null, the Topic field display as a freeform field.

If a single value is entered, the Topic field appears as a static, non-editable value.

If a comma separated list is entered, the Topic field appears as a drop-down list of selectable topics.
DefaultPublicGravatarURL URL of image

This field is used to set the Default Public Gravatar image to be used for contacts without Gravatar accounts in chat sessions.

This image must be hosted on a public website.

Images being used for the Default Public Gravatar image must meet the following requirements:
  • It must be publicly available
  • It must be accessible via HTTP or HTTPS on ports 80 and 443
  • It must be a .jpg, .jpeg, .gif, or .png image file
  • It must not include a querystring
DefaultAgentGravatarURL URL of image

This field is used to set the Gravatar image to be used for all agents in all chat sessions.

The image must be hosted on a public website.

Images being used for the Gravatar image must meet the following requirements:
  • It must be publicly available
  • It must be accessible via HTTP or HTTPS on ports 80 and 443
  • It must be a .jpg, .jpeg, .gif, or .png image file
  • It must not include a querystring.
UseDefaultPublicGravatarForAllPublicUsers True or False

This field is used to determine whether or not all contacts will use the default Gravatar image.

If set to True, all public users will use the image set in DefaultPublicGravatarURL.

If set to False, users will only use the Default Public Gravatar if they have no Gravatar associated to their email address.
UseDefaultAgentGravatarForAllAgents True or False

This field is used to determine whether or not all users will use the default Gravatar image.

If set to True, all agents will use the image set in DefaultAgentGravatarURL (or DefaultSupervisorGravatarURL).

If set to False, users will only use the Default Agent Gravatar (or Default Supervisor Gravatar) if they have no Gravatar associated to their email address.
GravatarSize The size, in pixels, of the Gravatar image This field is used to set the size of the Gravatar, in pixels.
DisableChatRequestIfQueueisNotOpen True or False

This field controls whether or not chat requests can be submitted when the queue is not available.

If set to True, chat requests cannot be submitted when the queue is closed or unavailable.

If set to False, chat requests can be submitted when the queue is closed or unavailable.
OutOfBusinessHoursMsg The text you want to display as the Out of Business Hour message

The text entered in this field displays as the Out of Business Hour message.

Note:

ShowBusinessHours must be set to True
QueueStatusDNDMsg The text you want to display when the queue is in Do Not Disturb The text entered in this field displays when the queue is in Do Not Disturb.
QueueStatusOutOfServiceMsg The text you want to display as the Status Out of Service The text entered in this field displays when the queue is Out of Service.
UsePrechatArea True or False

This field controls whether or not chat uses the default chat request form.

If this field is set to True, the chat will use the default chat request form.

If this field is set to False, the chat will use the user-created chat request form specified under PrechatDataFromUrl

For more information on configuring user-made chat request pages, see the following KB article: https://mitel.custhelp.com.
PrechatDataFromUrl URL or False

If UsePrechatArea is set to False, this field sets the URL of the user-created Prechat form.

For more information on configuring user-made chat request pages, see the following KB article: https://mitel.custhelp.com.
LumaThreshold The luma threshold value

This determines the threshold to determine, based on the luma of the background color, whether or not to use dark or light icons.

If the luma value is equal to or greater than the specified luma threshold value, then dark icons will be used. If the luma value is less than the luma threshold value, light icons will be used.
Table 3. Logging and connection fields
Field name Field value Field description
ChatClientSidelogging True or False

This field controls whether or not a log for chat is available in the client’s browser.

If set to False, there is no client-side log created.

If set to True, a client-side log is created.

Note:

This field must have the same value in chat.public.config.js, chat.agent.config.js, and chat.supervisor.config.js.
MobileDeviceConnectionRetryLimit The number of connections

This field controls how many times a mobile device can attempt to connect to chat.

Note:

This field must have the same value in chat.public.config.js, chat.agent.config.js, and chat.supervisor.config.js.
ConnectionRetryLimit The number of connections

This field controls how many times a desktop device can attempt to connect to chat.

Note:

This field must have the same value in chat.public.config.js, chat.agent.config.js, and chat.supervisor.config.js.
ConnectionRetryIterationCount The count limit

This field sets the number of times a device can attempt to connect before prompting the user that it is unable to connect and that a refresh will occur.

Note:

This field must have the same value in chat.public.config.js, chat.agent.config.js, and chat.supervisor.config.js.
The following procedures outline how to
  • Set up public-facing chat settings using chat.public.config.js
  • Add ChatQueues fields to the chat.public.config.js file
To set up public-facing chat settings using chat.public.config.js
  1. Navigate to <drive>\Program Files (x86)\Mitel\MiContact Center\Website\CCMWa\Scripts\
  2. Open chat.public.config.js in a text editor.
  3. Customize your chat request form settings.

    For a description of the settings and their fields, see the above tables.

  4. Save and close the editor.
To add ChatQueues to chat.public.config.js
  1. In YourSite Explorer, obtain the queue IDs of the chat queues for which you want to customize settings.

    For more information, see "Obtaining Queue GUIDs".

  2. Open your copy of chat.public.config.js file in a text editor.
  3. Locate ChatQueues: [ ] and copy and paste the following fields within ChatQueues’s brackets: 
    {
    Enabled: true,
    QueueId: '',
    LogoImgPath: '',
    ShowLogo: false,
    QueueLabel: '',
    ShowQueueLabel: false,
    AppendQueueLabelToPageTitle: true,
    FormatPrechatLogoToForm: false,
    Gradient: true,
    GradientStartColor: '#000000',
    GradientEndColor: '#444460',
    ShowEstimatedWaitTime: true,
    ShowNumberOfAvailableAgents: false,
    ShowNumberOfIdleAgents: false,
    ShowNumberOfChatsWaiting: false,
    ShowBusinessHours: true,
    AllowQueuingWhenNoAgentsLogin: true,
    AllowQueuingInAfterHours: false,
    ShowTopic: true,
    RequireTopic: true,
    Topic: null,
    DefaultPublicGravatarURL:'',
    DefaultAgentGravatarURL:'',
    UseDefaultPublicGravatarForAllPublicUsers: false,
    UseDefaultAgentGravatarForAllAgents: false,
    GravatarSize: 32,
    DisableChatRequestIfQueueisNotOpen: true,
    OutOfBusinessHoursMsg: 'Sorry but we are currently closed. Please contact us during regular business hours.',
    QueueStatusDNDMsg: 'Sorry but we are currently unavailable. Please try again later.',
    QueueStatusOutOfServiceMsg: 'Sorry but we are currently unavailable. Please try again later',
    UsePrechatArea: true,
    PrechatDataFromUrl: false,
    LumaThreshold:140
    },
  4. Customize the chat queue settings.
  5. For each chat queue’s chat request form you want to customize, add the above fields.

    See the following figure for the proper formatting.

    Figure 1. DefaultConfig with ChatQueues fields


  6. Save and close the text editor.

Hosting chat files on your corporate web server

With enhancements to chat in version 8.1, it is no longer recommended to host chat files on your corporate web server. By default, version 8.1 will use the configuration on the Enterprise Server. It is recommended that you change your configuration to use chat.public.config.js located on the Enterprise Server.

By default, chat uses the configuration files on the Enterprise Server. While this is the recommended configuration, optionally, public-facing chat JavaScript files may be hosted on your corporate web server.

If you do continue to maintain chat files in your corporate website’s file directory, you must manually update it with new fields and settings after every upgrade and you must enable Web.config to use an externally hosted file.

For information on hosting chat files on your Enterprise Server and referencing hosted chat with Contact Us, consult the version 9.2 Multimedia Contact Center Installation and Deployment Guide available at edocs.mitel.com.

To enabled externally hosted chat files
  1. Navigate to <drive>:\Program Files (x86)\Mitel\MiContact Center\WebSites\CCMWa.
  2. Open Web.config in an editor.
  3. Locate UseCcmwaHostedChatPublicClientConfig and set it to false.
  4. Save and close the editor.

Updating chat customization from version 7.0 to version 8.1

Customizations to chat done in version 7.0 within Index.cshtml must be added to the chat.public.config.js to preserve them in version 7.1 and greater.

If you changed the background color in version 7.0, make note of the colors used in the theme Background and theme Background Color css classes in the Chat.public.css file and add them to GradientStartColor and GradientEndColor in chat.public.config.js as appropriate after the upgrade.

If you added a logo, copy your logo image file to the <drive>\Program Files (x86)\Mitel\MiContact Center\WebSites\CCMWa\CCMWa\Content\images\logo\ and configure the LogoImgPath, ShowLogo, and FormatPrechatLogoToForm fields in chat.public.config.js.

For information on configuring your customization in chat.public.config.js, see "Configuring the chat JavaScript file".

Parent topic: Customizing chat
↑