Getting Started with Web Chat

Archived on 31 August 2020

What is Web Chat?

Clickatell’s Web Chat enables real-time on-demand customer service via a web chat widget added to your website. Visitors can use the widget to interact directly with your customer service agents.

Web Chat is used in conjunction with the Chat Desk – a central, easy-to-use, web-based application that your customer service agents use to respond to queries coming in via Web Chat (and other channels).

Getting started with Web Chat

Step 1: Register your Clickatell account & log in to portal

Sign up and create your free Clickatell account. Once you’ve verified your account, log in to your Clickatell portal. The first page you see is the Launchpad which is the home page that gives you an overview of the channels and products available in Clickatell and also gives you a summary of all the channels and products you have activated on your account. From here you can activate and set up the channels and products that you want to utilize. You can also use the left panel to navigate to the specific sections for more details.


Step 2: Set up Touch

From the Launchpad, in the ‘Touch‘ section, click the ‘Set up Touch‘ button. Follow the wizard to add business details, brand details, and Web Chat details.




Step 3: Embed Web Chat into your website

Once you’ve completed the setup wizard, the Touch Integrations page opens. You can also navigate to this page by selecting ‘Touch → Configure Touch’ from the left-hand panel. This page shows all available channels that can be integrated with you Chat Desk. You will notice that Web Chat is already active by default. However, to add the Web Chat widget to your company’s website, you need to follow the rest of the instructions below.


In the Web Chat block, select the ‘Manage‘ button to open the details of your Web Chat widget. This opens a page displaying two code snippets.

  • Copy the top code snippet and paste it into your website’s HTML file just before the closing <head> tag.
  • Copy the second code snippet and paste it towards the bottom of the body, before the closing <body> tag. Ensure that the <script> tag is inserted below the <div> tag.




Whenever someone now visits your website, a Web Chat widget will appear in the bottom right corner of their screen that they can use to converse directly with your agents in real-time.




Managing your Web Chat widget

You can deactivate (and reactivate) the Web Chat widget at any time by navigating to ‘Touch → Configure Touch’ from the left panel and using the toggle. If deactivated, the Web Chat widget will not display on your website (until reactivated again). This might be useful, for example, when there are temporarily no active agents available to attend to visitors’ queries.

If you want your widget to be available only in certain geographical locations, you can manage this by navigating to ‘Touch → Configure Touch’ and clicking the ‘Manage‘ button in the Web Chat block. Select the ‘Location settings‘ tab. The default location setting is ‘All regions‘. Select ‘Only these selected regions‘ and use the toggles to individually select the regions where the widget should be enabled. Then click on ‘Manage locations‘ next to the region to select specific countries inside the region (defaults to ‘All‘). The Web Chat widget will only appear to visitors visiting your website from within these specified countries



Did you find this information informative?

Other Resources

Ask the Community

Visit Stack Overflow to join our community of developers and find the answer you need

Contact Support

Contact our support team and one of our agents will be in touch with you to answer any questions you have