Demo

Help center

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

of the FocalScope omnichannel suite, according to best practice.

A note regarding the design of custom Live Chat UI templates

Because live chat is such a prolific tool now, often live chat users need the service provided to them in their local or regional language. Depending on your application and deployment, you may require certain custom Live Chat UI templates to be static and others to be automatically translated by FocalScope when the default language settings are changed. This article details how custom Live Chat UI templates can be designed to be translatable by FocalScope or static (not translatable).

Tutorial

Creating translatable custom Live Chat UI templates

The easiest way to make translatable custom Live Chat UI templates is to base them off the default Live Chat template included in FocalScope (downloadable at the end of this article). The element IDs in the default template are reference by FocalScope and the associated form, button, and interface text will automatically be translated when the language settings in FocalScope are changed.

So, to create a translatable custom Live Chat UI template, observe the following practices:

  1. The default element IDs must be retained in all the htm / html files of the custom Live Chat UI template (see Figure 1)
  2. Any CSS styling that is applied must not invoke images containing text that obscures or replaces text in fields, buttons, and other Live Chat UI elements (see Figures 2 & 3)


Figure 1 - Default element IDs

Creating static (non-translatable) custom Live Chat UI templates

To prevent the translation of form, button, or other Live Chat UI element text in a custom Live Chat UI template, the following practises need to be observed:

  1. The default ID's of Live Chat buttons must be changed so FocalScope cannot alter the corresponding text when the language settings are changed
  2. The CSS styling should invoke images that display the desired language to replace fields, buttons, and other Live Chat UI elements (see Figures 2 & 3)


Figure 2 - Images containing the desired language


Figure 3 - Custom CSS styling elements with images

Additional Information



Attachments

Related articles

Let us help

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

Contact us