Create Live Chat Templates
Thursday, October 20, 2016 7:55 AM


  1. A web chat template is merely a set of HTML pages each of which contains some set of fields with predefined names.
  2. When FocalScope loads such template it looks for those predefined fields and uses them to collect, display and submit information required for a web chat session.
  3. Any other fields are submitted as it is and appear as custom fields on the web chat agent UI.
  4. On every chat page all fields must be enclosed in an HTML form tag for FocalScope to recognize them.
  5. Any of the pages of the template can be omitted in which case FocalScope uses corresponding page of default chat template.

Registration.htm

 

  1. Description: collects customer information before chat session starts.
  2. Predefined fields: input#Email, input#Name, input#Company, input#TicketNo, button#Ok .
  3. Mandatory fields: any of Name or Email fields present on the page to identify the customer.

Chat.htm

 

  1. Description: implements web chat conversation UI.
  2. Predefined fields: div#Log, textarea#Body, button#Send.
  3. Mandatory fields: all predefined fields are mandatory.

Offline.htm

 

  1. Description: implements UI.
  2. Predefined fields: none.
  3. Mandatory fields: none.

Customstate.htm

  1. Description: is shown when a chat group is in a custom state.
  2. Predefined fields: none
  3. Mandatory fields: none

Creating the Custom Template

  1. Prepare custom web chat template by creating one or more of the template pages
  2. Zip the template.
  3. Upload the template into FocalScope.
  4. On the admin UI open [Web Chat/Custom UI Templates] folder.
  5. Right click in the template list and select [New].
  6. Pick template zip file using […] button.
  7. Click [Ok] to save the template.
  8. To modify a template double click it to open its properties window, upload new zip archive and save it.

Configure a Web Chat Group to Use the Template

  1. On the admin UI open [Web Chat/Groups] folder.
  2. Double click a group (or create a new one) to open group properties window.
  3. Activate [UI Template] tab.
  4. Select just uploaded template in the [Template] field.
  5. Fill in subsequent fields on the tab with pages of the template.
  6. You may leave any of those fields empty in which case corresponding page of system default template will be used.

Refer to lesson on Manage Live Chat Groups to learn more about Web Chat Groups.


Test the Template

  1. Go to the Administration screen in FocalScope and open the [Web Chat] folder.
  2. In [Web chat link] section specify the new chat group in the [Chat with] field.
  3. Click [Copy] button to copy code of the chat link.
  4. Create a HTML file and paste the link in the <body> of that file.
  5. Save the file, open it in a browser and click on the link to start chatting.

An Example

Follow the steps below to create a simple example of the custom template file, registration.htm.

  1. Create an html file, paste following HTML code in it:
  2. <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>
  3. Zip the html file created and upload into FocalScope, configure web chat group to use it & test as described in previous step.

Customize Default Chat Template

  1. Download the template from this link.
  2. Unzip it, modify any of the pages as required and optionally remove any unnecessary pages.
  3. Zip it, upload into FocalScope, configure web chat group to use it & test as described in previous steps.