Overview

The MaxContact chat application is a self-contained JavaScript application which can be placed on a website. In order to embed a live chat widget, a few simple steps can be followed to allow the website to connect to the contact centre, send messages and resolve issues.

Implementation

Before the live chat widget can be used, a channel must first be created in the Manager Portal application under the Channel Admin page.


The channel must be set as a 'Chat' channel type. 


The URL which is to be used to host the chat application should also be included in the authorised domains list (found on the 'Chat' tab) e.g. www.mywebsite.com

Web page

A HTML tag must be added to your page which will include details of the channel, obtained from the Channel Admin page.

<div data-channel-key="" data-intro-message="Intro Message" class="default-form"></div>


data-channel-key

  • A unique key for the channel, this will mean any chats created will be associated to the channel
    • This channel should already be created within manager portal (channels page).
    • The key is displayed on each page of the chat channel.
    • Needs to be a chat channel to generate a key.


data-intro-message

  • When a chat is routed this will be the first message presented to the customer, “Welcome to CompanyName Chat” for example.


class

  • This is used for theming, 'default-form' is the only theme supported at this time.


You will need to add in the additional line anywhere within the code – 

<script type="text/javascript" src="https://chat.maxcontact.com/CUSTOMERNAME-chat/max.chat.application.min.js"></script>


Overrides

To override the styling of the application the following CSS classes can be used;

  • section: 'max-chat-section',
  • button: 'max-chat-btn',
  • buttonLarge: 'max-chat-btn max-btn-large',
  • smallImage: 'max-image-small',
  • mediumImage: 'max-image-medium',
  • largeImage: 'max-image-large',
  • input: 'max-chat-input',
  • label: 'max-chat-label',
  • panel: 'max-chat-panel',
  • message_section: 'max-chat-message',
  • message_bubble: 'max-chat-bubble',
  • message_info: 'max-chat-info',
  • clearfix: 'max-chat-clearfix'

Cookies

The MaxContact chat application stores a cookie for the duration of the interaction session, the cookie will have an expiry of 20 minutes and is kicked along whilst the chat session is open and activity is taking place e.g. requests to the server. Once the chat application is closed by the customer the cookie is destroyed. The cookie is a hash of details which are required to keep chat sessions secure and unique from other users. The cookie is required for the chat application to function correctly and is checked when requests are made to the MaxContact system.

Customisation

Our web chat application has 2 configurable options for the UI in version 4.6.2 and above.

  1. Changing the primary colour
  2. Changing the text that appears next to the start icon 

This is demonstrated here using the ‘Chat to us’ text and the dark blue as the primary colour.

Note: This is also the default UI if no changes are made.


These options need to be changed in the <body> tag by adding the following…

<div id="max-chat-form-container" data-channel-key="x334FfCdZzEqa6Sm+okvVbqTe2qa2phQyURJzWbp3QGDeyLgQyaUS3M0X1K7Y0XjR33" data-start-text="Chat to us" data-primary-colour="#031447" class="default-form"></div>

PLEASE NOTE, THE CHANNEL KEY ABOVE WILL BE DIFFERENT FOR YOUR SITE. ENSURE YOU USE THE CORRECT ONE AND YOU DON'T USE THE ABOVE. CHANNEL KEYS ARE OBTAINED FROM THE CHANNELS PAGE IN THE PORTAL.


IF YOU ARE USING A CHANNEL HUB YOU DO NOT NEED THE CHANNELS KEY YOU NEED THE HUBS KEY OBTAINED FROM THE CHANNEL HUBS PAGE IN THE PORTAL.


data-start-chat is for the text.


data-primary-colour is for the colour.


If you don’t want to have any text and just have the icon on its own, then use a blank value like this…

data-start-text=””



Changing the colour will also change the primary colour and non-chat-window text across the application as shown below in red…


data-primary-colour=”red”