Skip to end of metadata
Go to start of metadata
Table of contents

Overview

Kayako Fusion and Engage lets you generate a code which can be placed on your web pages to display a live chat button. The tag generator is used to generate a series of JavaScript tags used to integrate your website(s) with the live support, visitor tracking features within the Kayako Desktop application.

The live chat icon is displayed on the client support center as shown 

View and manage tag generator

In order to view and manage the tag generator, click on Tag Generator on the Options menu, as shown

You will be directed to the page from where you can generate the JavaScript tags for:

  • Chat: When the visitor clicks on the icon put up on your website, he will be prompted for the chat details and the chat request will be routed to the available chat operator. 
  • Call (Click to Call): When the visitor clicks on the icon put up on your website, he will be prompted for a phone number along with chat details. The submission initiates a chat request and an immediate phone call, which is routed to the available phone operator.

The various tags that you can generate are:

  • Live chat tags: You may generate the following live chat tags and put up on your website(s)

HTML Button: Use this tag if you want to generate the code that will produce a clickable button showing the status of your live chat (Available, Offline, Away, etc). When you generate this tag and put up on your website(s), it will be shown as follows on your index page

Site Badge: This tag gets attached to your web site's index page and scrolls along with it. When you generate this tag and put up on your website(s), it will be shown as follows on your index page

Text Link: Use this tag if you want to to generate a text link only representation of your live chat status. However, Text link icon does not support visitor tracking.  When you generate this tag and put up on your website(s), it will be shown as follows on your index page

  • Visitor tracking tags: This tag will place the visitor tracking code onto your web page. By adding this tag to a web page, you will be able to track the visitors visiting that particular page. They will not see any visible link/image to initiate a live chat, if only this tag is placed on the web page.

Creating an HTML tag

HTML tag for chat

Select the Prompt Type as Chat and click Next. You will be presented with an options page from which you may specify the options as per your requirements. 

There are two different configurable settings tabs that are provided on this page, which are

  1. HTML Button
  2. Customize

All the editable fields specific to these two tabs are explained in the following section

HTML Button

Filter by Department  The clients will be able to initiate a chat only in the department(s) chosen here. Also, if all the staff users in the department(s) selected here are offline, even if other staff users are available, the client user will be told that live support is unavailable.
Route to Chat Skill  support desk will give preference to the online operators with the selected chat skill(s). If no operators are online with the selected skills, the chat will be routed using the standard method.
Use Secure Links (https://) If enabled, the chat will always be initiated on a secure link.
For this option to work, your support desk needs to be accessible from https:// as well.

Template Group  Select a template group here, so that the support desk will load all the required templates from the selected template group.
Skip User Details If enabled, the user will be immediately redirected to the chat startup and no additional details like full name, email or subject will be requested.
No JavaScript? If enabled, the support desk will generate an HTML tag which includes no JavaScript.
This will disable the entire visitor tracking functions and is recommended only for email signatures, auction pages or areas where limited HTML code is allowed.

Insert Variable This allows you to insert a variable and assign a constant value to it, which would be displayed in KD under Information tab as well as while accepting chat.
Insert Alert When we specify a value under Alert, it gets added in the chat pop-up displayed at staff end in KD while accepting the chat request.


Customize

Custom Online Image Insert a link to the custom image URL or upload a custom image which will be shown on the chat icon, when the live support is online. By default, the chat icon will be shown as follows:
 
Custom Offline Image Insert a link to the custom image URL or upload a custom image which will be shown on the chat icon, when the live support is offline. By default, the chat icon will be shown as follows:
Custom Away Image Insert a link to the custom image URL or upload a custom image which will be shown on the chat icon, when the live support is away. By default, the chat icon will be shown as follows:
Custom Back shortly Image Insert a link to the custom image URL or upload a custom image which will be shown on the chat icon, when the live support is away for a short time. By default, the chat icon will be shown as follows:

Once you are done with the settings, click Generate to generate the HTML code with the settings you have specified. The code is generated as shown below along with the snippet of the live chat icon.

HTML tag for call

Select the Prompt Type as Call (Click to Call) to generate a tag for call icon. Rest of the settings are same as described for the generation of chat tag.

Creating a Site Badge tag

Site Badge tag for chat

Select the Prompt Type as Chat and click Next. You will be presented with an options page from which you may specify the options as per your requirements. There are two different configurable settings tabs that are provided on this page, which are

  1. Site Badge Button
  2. Customize

All the editable fields specific to these two tabs are explained in the following section

Site Badge Button

The options are the same as described while creating the HTML Button, under HTML Tag for chat.

Customize

Text Color Select the site badge text color
Badge Language Select the language of the text that is displayed on the badge. You can select from the languages inserted in your support desk
Badge Text Select the text that should appear in the site badge. You may select from either "live help" or "live chat"
Background Color: Online Select the background color of the site badge when the live chat is "online"
Background Color: Offline Select the background color of the site badge when the live chat is "offline"
Background Color: Away Select the background color of the site badge when the live chat is "away"
Background Color: Back Shortly Select the background color of the site badge when the live chat is "back shortly"

Once you are done with the settings, click Generate to generate the Site Badge code with the settings you have specified. The code is generated as shown below along with the snippet of the live chat icon.

Site Badge tag for call

Select the Prompt Type as Call (Click to Call) to generate a tag for call/chat icon. Rest of the settings are same as described above, for the generation of chat tag.

Creating a Text Link tag

Text Link for Chat

The options are the same as described while creating the HTML Button, under HTML Tag for chat. The only additional option is "Link Contents", where you can name the text, which will be put on your website(s) 

Text Link for Call

The options are the same as described while creating the HTML Button, under HTML Tag for call. The only additional option is "Link Contents", where you can name the text, which will be put on your website(s)

Monitoring

Select the Monitoring option from the Tag Generator page, and click Next. You will be presented with the General Options section, as shown

Use Secure Links (https:// If enabled, the chat javascript links will be changed to their https equivalent. You need to ensure that the helpdesk URL is set to "https" in settings for this option to work
Labels:
None
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.
  1. Jan 23, 2012

    This page doesn't explain what Variables and Alerts do or how to use them.

  2. May 29, 2012

    I agree with Adam. I went here to check how to use Variables and alerts and to what since the other ones are easy to understand.