How to use custom Live Chat UI templates
Wednesday, November 30, 2016 2:38 PM

When presenting FocalScope's Live Chat feature to customers and prospects that visit your website, you may wish to alter the default Live Chat UI templates and substitute your own. This article details how to create, modify, implement, and use custom Live Chat UI templates in FocalScope.

Prerequisites

Tutorial


Live Chat UI templates explained

A Live Chat UI template is a set of HTML pages, each of which contains some set of fields with predefined names. When FocalScope loads such a template, it looks for those predefined fields and uses them to collect, display, and submit information required for a Live Chat session. Any other fields are submitted 'as is' and appear as custom fields in the Live Chat window.

For every chat page, all fields must be enclosed in an HTML form tag for FocalScope to recognize them. Any page of the template can be omitted, in which case FocalScope will use the default Live Chat UI template page stored in the FocalScope installation folder. The following is a list of the Live Chat UI template pages:

  • registration.htm
    • Description: collects customer / prospect information before the chat session starts
    • Predefined fields: input#Email, input#Name, input#Company, input#TicketNo, button#Ok
    • Mandatory fields: either the Name or Email field must be present on the page to identify the customer
  • chat.htm
    • Description: implements the Live Chat conversation UI (chat window)
    • Predefined fields: div#Log, textarea#Body, button#Send
    • Mandatory fields: all predefined fields are mandatory
  • offline.htm
    • Description: implements the UI that informs customers / prospects that a Live Chat group is offline or that all Live Chat agents are busy - offering the customer / prospect the option to leave an offline chat message
    • Predefined fields:
      • div#OffMsgLine1 - %1 placeholder in the div is automatically replaced with the name of the Live Chat group that is online
      • button#Send - navigates to the configured or default offline message page for the Live Chat group
      • button#Close - closes the page
    • Mandatory fields: none
  • offlineMessage.htm
    • Description: implements the UI where the customer / prospect can leave an offline message
    • Predefined fields: input#Email, input#Name, textarea#Body, button#Close, button#Send
    • Mandatory fields: Body and either Name or Email fields must be present on the page to identify the customer / prospect
  • customstate.htm
    • Description: is shown when a Live Chat group is in a custom state
    • Predefined fields: none
    • Mandatory fields: none

To prepare a custom Live Chat UI template, you need to create one or more of the above pages and place them in a zip archive (do not place the page files inside any subfolder inside the archive).




Figure 1 - Uploading a new Live Chat UI template

Example

Create a file called registration.htm and paste the following code in it:


<html>
<head>
<title>Custom web chat registration</title>
</head>
<body>
<form>
 <label for='Name'>Name:</label>
 <input type='text' name='Name' id='Name'>
<br/>
 <label for='Email'>Email:</label>
 <input type='text' name='Email' id='Email'>
<br/>
 <button id="Ok">Start chat</button>
</form>
</body>

</html>


Place the registration.htm file inside a zip archive and follow the instructions below to upload and use this custom Live Chat UI template.


Customizing the default Live Chat UI template

  1. Download the default.zip file that is attached to this article
  2. Unzip its contents and modify the the pages as required. Optionally, remove any unnecessary pages
  3. Finally, zip the modified pages again and follow the instructions below

Uploading a new Live Chat UI template

  1. In the [Main menu], select [Screen > Administration]
  2. Click the [Administration] tab
  3. Navigate to the [Instant messaging > Live Chat > Custom UI templates] folder
  4. In the right-hand pane, right click and select [New]
  5. In the [Live Chat UI Template] dialogue, specify the name for the Live Chat UI template in the [Name] field
  6. In the [Template archive] field, click [...] and navigate to the .zip archive that contains the .htm files for the Live Chat UI template






    Figure 2 - Uploading a new Live Chat UI template

    Assigning a new Live Chat UI template to a Live Chat group

    1. Navigate to the [Instant messaging > Live Chat > Groups] folder
    2. Right click the group(s) that should use the new Live Chat UI Template and select [Properties]




      Figure 3 - Associating a Live Chat UI template with a Live Chat group


      1. In the [Live Chat Group Properties] window, click the [UI Template] tab
      2. In the [Template] field, click the arrow button and select the Live Chat UI template that you uploaded earlier
      3. Under the [Template pages] section, map the Live Chat UI pages [Registration, Chat window, Offline, Offline message] to the corresponding .htm file
      4. Click [Ok] to save the changes








        Figure 4 - Changing the default Live Chat UI template


        Generating the Live Chat URL

        1. Navigate to the [Instant messaging > Live Chat] folder
        2. In the [Chat with] field, specify the Live Chat group that uses the custom Live Chat UI template
        3. In the [Language] field, select which language the Live Chat UI template should be translated to
        4. In the [Link type] section, choose [just URL] (this URL will be used to test the Live Chat feature first), and click [Copy] to copy the URL to your system clipboard







          Figure 5 - Designating the Live Chat UI template to translate


           Testing the new Live Chat UI template

          1. Paste the copied Live Chat URL into your web browser and accept the chat request in FocalScope
          2. Type something in the text field and click [Send] to test the Send button's functionality







            Figure 6 - Live Chat test in Danish

            Additional Information



            Attachments
            default.zip