Help center

View helpful articles, tutorials and FAQs on the set-up and configuration

of the FocalScope omnichannel suite, according to best practice.

Responsive Live Chat

FocalScope provides the Live Chat feature, which is an alternative to phone and email support. It can be inserted into a website so online visitors to the page can interact with support agents, simply by clicking the Live Chat Icon. It is simple to setup, use it and most important will delight your customers.


Download FocalScope default responsive Live Chat templates

  1. Download the templates attached: Danish Template, Danish Test File, English Template and English Test File.
  2. Unzip the files, 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.

Tutorial on how to setup Live Chat in Focalscope


1. Create Live Chat Group

Under the Administration screen>Instant messaging> Live chat> Groups> right click in the right window. From the menu that appears the option "New" is selected. The Live Chat Group Properties window will pop up, opened under the "General" tab. In order to create the group the field "Name" needs to be filled in mandatory. There is the possibility to add a description to the group and to insert a greeting that will be prompted every time a visitor will click on the Live Chat icon. FocalScope offers also the possibility of sending a notification to a ticketbox when the Live Chat group was offline, to sent a notification to an email or to attach some predefined responses to the group. The group can also be setup to force the agent to choose a predefined category the moment the agent closes a live chat session. In the lower part of the Live Chat Group Properties, the "Add" / "Remove" buttons will manage the support agents that will be part of the Live Chat group. The "Ok" button will save the settings done.




2. Upload the UI template

FocalScope Live chat needs a template to be uploaded. This is a zip file that contains a folder with the pictures of three agents and also a HTML file. There is a generic template that can be edited and customized according to the needs. Once this was done it ca be uploaded in the system by going under the Administration screen>Instant messaging> Live chat> Custom UI templates> right click in the right window. From the menu that appears the option "New" is selected. By clicking the button at the end of the "Template archive" field you can browse for the desired zip file. Hit "Ok" to save the selection.



3. Fill in the UI template fields

For the step the Live Chat Group Properties need to be accessed by going under the Administration screen>Instant messaging> Live chat> Groups> right click the Live Chat group previously created. Under the "UI template" tab a template that was previously uploaded into the system, can be selected. Once the template was selected, also the template pages will be available and will need to be selected. Hit "Ok" to save the selection.


4. Setup Live Chat configuration tab

A couple of settings will finish the Live Chat group setup. Under the Administration screen>Instant messaging> Live chat> "Configuration" tab, a Registration prompt can be filled in. There are also the Live Chat sound notifications and some Advance Live Chat configuration parameters that will provide some options on the way the agents will be notified about the incoming chat requests and  how long the timeouts will be. Once these parameters are saved the Live Chat group setup is finished.






Tutorial on how to modify the Live Chat appearance


FocalScope offers the possibility of customizing the live chat according to the client needs. The the agent's picture, the color and the text labels can be changed. In order to do that the UI template (the zip file) needs to be modified and for doing that it will be first unzipped. The standard archive will contain a folder with 3 agent pictures and an configuration Html file; these can be modified in order to configure the Live Chat. After the changes these will be saved and the modified folder with the pictures and the new Html file will be zipped again resulting the new UI template. To make sure the changes were correctly done these can be tested.






Changing the agent's picture


The UI template contains an img folder with 3 pictures. Replacing them with real pictures will change the picture of the agent in the live chat (128x128, png or jpg files). After uploading the modified zip file as a new UI template, changes will reflect in the live chat. Also if the agent has a picture uploaded in the his FocalScope profile that will be displayed in the live chat.





Changing the color


This requires to edit the configuration Html file inside the UI template. Extract the Html file from the archive, edit it with notepad and in the bellow section replace the color codes. After saving the changes, replace the existing html file in the archive with the modified one and upload it as a new UI template. Once this is done the changes will reflect in the live chat.





Changing the text labels


This requires to edit the configuration Html file inside the UI template. Extract the Html file from the archive, edit it with notepad and in the bellow section replace the text labels. After saving the changes, replace the existing html file in the archive with the modified one and upload it as a new UI template. Once this is done the changes will reflect in the live chat. This allows also translating the text labels to different languages.




Testing the Live Chat

FocalScope offers the possibility to test the Live Chat before actually this goes live. There is a generic Html testing file that once open with the browser will replicated the real Live Chat environment. Under the Administration screen>Instant messaging> Live chat> "Integration", the below text can be found under the Link Type>Floating button. It will be copied, pasted in the Html file below and saved. The saved file will be opened using a browser and will create a testing environment for the live chat.







The configuration Html file structure


The configuration Html file inside the UI template contains some areas that will be explained below; each of this area can be customized according to the needs.


The first area will contain the general and pro-active call back text labels which can be modified or translated and the agent's pictures area that allows customization on how the agent's picture is displayed.


The second is the button style area, that allow the buttons used to be customized, like changing the button's color.



The next and final section will contain the registration form area, the pro-active live chat area and the pro-active call back area.



The pro-active Live Chat

This feature is design to automatically open the live chat when certain criteria are met (number of seconds spent on the page or number of pages visited). So with the setting in the screenshots above the live chat will automatically open even if the live chat icon is not touched if the visitor of the webpage will spend more that 30 seconds on a single page or access more that five pages within the website.

If this feature needs to be deactivated simply replace 30 and 5 below with a blank.





Link to Live Chat on signature - #forcelivechat

By default FocalScope live chat has an icon in the buttom right corner. This makes it easy for online visitors to start a chat conversation. However, if you like to make other links on your signature that points back to the FocalScope live

chat, the you use FocalScope #forcelivechat function. If you like to put a new link on your signature, then you combine URL + #forcelivechat. You can see sample here: https://www.focalscope.com/customers.html#forcelivechat



Link to Live Chat on your website - CSS class fs-open-livechat and fs-open-livechat-skipshow

By default FocalScope live chat has an icon in the buttom right corner. This makes it easy for online visitors to start a chat conversation. However, if you like to make other links on your website that points back to the FocalScope live chat, the you use the CSS classes as below:


There are 3 options links on your website:


1. Open live chat window with code
<a href="#" class="fs-open-livechat">Open live chat window</a>
There is css class fs-open-livechat. This link is visible even if live chat is still loading.


2. Open live chat window (visible when chat started) with code
<a href="#" class="fs-open-livechat" style="visibility:hidden;">Open live chat window (visible when chat started)</a>
There is css class fs-open-livechat and it's hidden using style attribute. This link will be visible when chat started


3. Open live chat window skip show (hidden link, if you want to control visibility by yourself) with code
<a href="#" class="fs-open-livechat fs-open-livechat-skipshow" style="visibility:hidden;">....</a>


There are css classes fs-open-livechat and fs-open-livechat-skipshow and it's hidden using style attribute. 
This link will not be visible whet chat started. This is useful when you want to control visibility of links or buttons themselves (css class fs-open-livechat-skipshow)




The proactive Call-Back

This feature is design to automatically open a call-back invitation form, that once submitted will enable the sales team to contact the online visitor by phone. To trigger this call-back function certain  criteria need to be met (number of seconds spent on the page or number of pages visited). So with the setting in the screenshots above the contact form will automatically open, if the visitor of the webpage will spend more that 20 seconds on a simple page, or access more that five pages within the website. This will provide the sales team a solid database of leads that can help growing the business.



Let us help

If you have any questions, or need further support, please don’t hesitate to reach out.