Customizing the Built-in Customer Chat Form

'$value -rootpath$images/clientLogo.jpg' | '$value -rootpath$images/agent.png'

becomes ..

'https://URLToNewLogo'  to use a URL for the logo, OR

'data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWN' to use a Base64 encoded image (recommended)

Example:

var logoURL = 'http://eshop.1to1service.com/Portals/0/logo-dnn.png';

Will produce the following customer chat window.

Built In Chat Form With Customer Logo

Example:

var faceURL = 'http://iservice.info/images/iService_logo_small.jpg';

Will load a small iService logo where the agent picture was previously shown.

The built in chat form generates a list of topics from your tenant. The list will include the same topics that are presented by default for the website (base URL) when submitting an Ask a Question form. This is limited to public topics in the segment assigned to that iService Website.

However, in many cases you'll want to customize the list with better descriptions and a more limited selection of topics. You can customize the list by updating the following section of the sample code that was shown above.

var topics = [ 

    { 'id': '4', 'name': 'Cars' },               4 is the topidID for the topic Cars

    { 'id': '16', 'name': 'Trucks' },           16 is the topidID for the topic Trucks

    { 'id': '14', 'name': 'Spaceships' } ];     14 is the topidID for the topic Spaceships

The values Cars, Trucks, and Spaceships are the names shown in the drop down, The values 4, 16 and 14 are the corresponding topicIDs for those topics. Replace this with your own values. The value name is an ID used in the generated HTML that should not be changed.

Example:

var topics = [ 

    { 'id': '1', 'name': 'Sales' },

    { 'id': '12', 'name': 'Support' },

    { 'id': '7', 'name': 'Other' } ];

Will produce the following drop down menu.

Built In Chat Form With Custom Topic List

Always double check the topicIDs for your tenant when making these edits. You can find the topic IDs in the Segments>Topics page of Admin Tools.

If you have a single topic for chat requests, you can take advantage of the Agent Availability code to toggle an image between online and offline.

Remove the Var topics section and use the following format for the URL

/f/chat#?topicID=14  where 14 is the topidID for the chats.

This will bypass the Topic / Department selection phase and go straight to the pre-chat survey or the offline message form where the customer enters their email address.

NOTE: When using a customized chat form, you will replace f/chat with f/# where # is the ID of your customized form.

To present the full list of topics, remove the Var topics section shown above. The default is to present the list of topics that the user would see in the standard Ask a Question form.

The builtin customer chat form (webapp-userchat) is constructed using AngularJS templates that can be replaced in a new form.  For an example of overriding code from the builtin chat form, see the example at https://gist.githubusercontent.com/scottwhitsitt/cc71bc1b97eb6975d2fc22f6c0e6217a/raw/b166dc5fa58f1db9cf62fbf7a3edefca1ad59236/gistfile1.txt. This example includes the base chat form and overrides two sections with new content.

The first section replaces the label Email with UserID in the live chat phase. The second section replaces the label Email with UserID in the offline message phase. This same approach can be used to override any content in the builtin form, including JavaScript.

NOTE: You can include multiple $if overrides within your customized chat form. For example, the form body below would override both the JS and CSS within the builtin webapp-userchat form.

$include -formID'webapp-userchat'$

$if -fieldregex'form'='^js$'$$header -filetype(js)$

var logoURL = '$value -rootpath$images/clientLogo.jpg';

var faceURL = '$value -rootpath$images/agent.png';

var topics = [ 

    { 'id': '4', 'name': 'Cars' },

    { 'id': '16', 'name': 'JLRNA' },

    { 'id': '14', 'name': 'Spaceships' } ];

$endif$

$if -fieldregex'form'='^css$'$$header -filetype(css)$

.header { background: #8f8; }

$endif$