Chat integration with tawk.to

Tawk.to is a free, hosted, third-party, live support chat that can be easily integrated within iTop to offer a new contact channel. It's a perfect way to enable live chat in iTop with a minimal effort/investment.

It brings a small bubble in the bottom-right corner of the screen. Users can click on it to start a conversation with support agents.

Note that the chat widget can also be enabled in the backoffice.

Support agents can reply through the tawk.to dashboard.

• Unfortunately, embedding the agents dashboard in iTop through an iFrame dashlet is no longer possible as they have shutdown this feature.
• Tawk.to does not provide a way (yet) to create a ticket directly in iTop based on the conversation with the end-user. The only fallback is for the support agent to retrieve the “transcript” of the conversation in the Tawk.to UI and to paste it in the iTop ticket.

Important: Keep in mind that Tawk.to is a free third-party chat which is not part of iTop. For any question regarding its usage and features, please check its documentation directly on their website.

Use the Standard installation process for this extension.

Go to tawk.to, create a free account.

First, go to the tawk.to backoffice, on the “Administration” page, “Overview” tab and retrieve the Property ID (“123456789” in the screenshot below) we will use it later.

Then, go to the “Chat Widget” tab and retrieve the Widget ID, it's the last part of the Direct Chat Link (“ABCDEF” in the screenshot below)

Once you got them, fill the module settings as follow, using one of the methods described bellow:

• property_id Put the property ID retrieve in the previous step.
• widget_id Put the widget ID retrieve in the previous step.
• enabled_portals An array of the “portals” you want the chat to be enabled on. Can be backoffice for the administration console or any end-user portal ID (eg. itop-portal for the standard portal), by default only the itop-portal is enabled.
• allowed_profiles An array of iTop profiles to define which users will be able to use the chat. If not defined, all users will be able t use it, by default only Portal user is allowed.

Important: “Property ID” was once named “Site ID” on tawk.to, mind to change the site_id parameter to property_id if you were using an early beta version of the extension.

There are 2 ways to configure the module settings:

• Through the iTop configuration file: Will only
• Through the XML datamodel via the ITSM Designer or an extension

Pros:

• Can be done easily as you just need to edit the configuration in your iTop instance

Cons:

• Only applies to that particular iTop instance. If you are running several iTop frontals or environments, you will need to duplicate the configuration on each instances you want the chat to be enabled.

Simply put the following in the configuration file and fill it with your own settings:

'combodo-tawk-integration' => array (
    'property_id' => 'PUT_YOUR_PROPERTY_ID_HERE',
    'widget_id' => 'PUT_YOUR_WIDGET_ID_HERE',
    'api_key' => 'PUT_YOUR_API_KEY_HERE',
    'enabled_portals' => array (
      'itop-portal',
    ),
    'allowed_profiles' => array(
      'Portal user',
    ),
),

Pros:

• Configuration will apply to all instances using this datamodel:
  • If done in the ITSM Designer: All instances of the concerned license
  • If done in an extension: All instances using the extension
• Can still be overloaded locally with method #1

Cons:

• When using the ITSM Designer: Need Combodo's assistance to configure the module parameters
• When using an extension: Need to be familiar with iTop extension development

Use the following XML as a bootstrap:

<?xml version="1.0" encoding="UTF-8"?>
<itop_design xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.6">
        <module_parameters>
                <parameters id="combodo-tawk-integration" _delta="force">
                        <property_id>PUT_YOUR_PROPERTY_ID_HERE</site_id>
                        <widget_id>PUT_YOUR_WIDGET_ID_HERE</widget_id>
                        <api_key>PUT_YOUR_API_KEY_HERE</api_key>
                        <enabled_portals type="array">
                                <enabled_portal id="itop-portal">itop-portal</enabled_portal>
                        </enabled_portals>
                        <allowed_profiles type="array">
                                <allowed_profile id="portal-user">Portal user</allowed_profile>
                        </allowed_profiles>
                </parameters>
        </module_parameters>
</itop_design>

Tawk.to provides an optional secure mode to ensure that a user identify isn't impersonated. If you want to use it, go to their backoffice in the “Administration” page, “Overview” tab and activate the “Secure mode”. Then copy the Javascript API Key (“MyAp1K3y” in the screenshot below), then put it in the api_key of the extension settings (see previous section).

Once the extension is installed and configured:

• Portal users will be able to open the tawk.to chat widget and start a chat conversation with your support agents.
• Those agents must have open tawk.to in a separated tab and answer there.
• If they want to create a ticket from a live conversation, they will have to copy paste manually the discussion from tawk.to into an iTop Ticket

For more information on how to use tawk.to, check their web site