Help Center | tawk.to | Adding a tawk.to widget to Magento 2

Adding a tawk.to widget to Magento 2

The instructions below are for desktops and laptops only.

In this guide, we’ll show you how to add the tawk.to widget to your Magento 2 store.

Note: Magento no longer supports Magento Commerce 1 and Magento Open Source 1. We recommend upgrading to Magento 2.

If you’ve installed a previous version of this extension from this archived repository, we recommend removing the old extension files first. See Removing the old extension below.

If you’re installing this extension for the first time, go to Installing the latest tawk.to extension.

Removing the old extension

Standard/Artifact installation

If you installed a previous version of this extension via standard/artifact installation, follow these steps to remove the old extension files:

Run the following command to remove the extension:
php composer.phar remove tawk/widget
Run the following commands to remove the old repositories from your Composer:
php composer.phar config --unset repositories.tawk-url-utils
php composer.phar config --unset repositories.tawk
Run the following command to clear your Composer cache:php composer.phar clearcache

Manual installation

If you installed a previous version of this extension manually, run the following commands to remove the repository link for tawk/url-utils:

php composer.phar config --unset repositories.tawk-url-utils

php composer.phar clearcache

Now, let’s look at the installation steps.

Installing the latest tawk.to extension

First, install Composer

If you don’t already have Composer, run the following command in your website root directory <magento-installation-root-folder>:

curl -sS https://getcomposer.org/installer | php

If you’ve already installed Composer globally, you may replace php composer.phar with composer.

Next, there are 2 ways to install the widget:

The standard installation (recommended)
Manual installation

Standard installation

Run the following command to perform a standard installation:

php composer.phar require tawk/tawk-magento-2

Next, skip the next section and go to Enabling the extension below.

Manual installation

Follow these steps to perform a manual installation:

Download the installation package zip file from this page.
Extract the zip file and copy the contents to the following folder of your website (create a new folder if necessary):

<magento-installation-root-folder>/app/code/Tawk/Widget
Run the following command to install the dependency tawk/url-utils:

php composer.phar require tawk/url-utils

Next, let’s enable the extension.

Enabling the extension

Once the extension is installed, run the following commands from your website root directory:

php bin/magento module:enable Tawk_Widget

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy

php bin/magento cache:clean

Configuring the extension

Follow these steps to configure the extension:

1. On your Magento dashboard, go to System > tawk.to widget > Select your widget.

2. Under Select Store, select the store you want to set up. If you have multiple stores, you can have different configurations for each.

3. Enter your tawk.to credentials and click Log In. Select the Property and Widget. If you have multiple properties and widgets, ensure to select the correct ones. Then, click Use selected widget.

4. Set the Visibility Options. These settings determine whether your widget appears everywhere on your site or only on specific pages.

If you select Always Display Widget, your widget will appear everywhere on your site. You can set exceptions where you don’t want the widget to appear.

For example, if you don’t want the widget to appear on your Contact page, copy the path of your page, like this:

And paste it into Exception field, like this:

Now, your widget will appear everywhere except the pages in the Exception field.

If you select Do Not Display widget, your widget won’t appear anywhere. If you want the widget to appear on a specific page, enter the path of the page, like this:

Now, your widget will only appear on your Contact page.

You can enter multiple pages in the Exception field, separated by commas.

If you’re entering a path, it must start with a forward-slash “/” or a wildcard “*”. Wildcards can be placed anywhere in a path or URL, at the start, middle or end.

If you’re entering a URL, it must start with “http” or “https”.

Hover over Examples of accepted patterns for examples of accepted exceptions:

5. Set the Privacy Options. If you select Enable Visitor Recognition, when customers who are logged in start a chat, their information (such as name and email) will be automatically populated for your agents.

That’s it! The widget should now appear on your site. Remember to test your widget and refine your communication strategy to give your customers a great live chat experience.

Adding the widget via Magento’s content editor

You may also add the widget to your site using Magento’s content editor. However, the widget features available via this method may be limited.

Follow these steps to install the widget via the Magento content editor:

First, copy the widget code from your tawk.to dashboard. Go to Administration > Channels > Chat Widget. Then, click Copy to Clipboard under Widget Code.

Next, perform the following steps on the Magento content editor:

1. On the Magento Admin page, go to Content > Blocks and click Add New Block.

2. Ensure Enable Block is switched to Yes. Enter the Block Title and Identifier and select the Store View (where you want the widget to appear). Then, click Edit with Page Builder.

3. Go to Elements and select HTML Code.

4. Click the settings icon.

5. Paste the widget code (from your tawk.to dashboard) into the text field. Then, click Save.

6. Click Save to save the block.

7. Once the block is saved, go to Content > Widgets. Click Add Widget.

8. Select CMS Static Block under Type and set your Design Theme. Then, click Continue.

9. Enter the Widget Title and select a store view under Assign to Store Views.

10. Under Layout Updates, select the pages you want the widget to appear and select CMS Footer Links under Container. Then, click Add Layout Updates.

11. Click Widget Options, select the block you just created, and click Save. Your widget should appear on your site.

Note: If you get the error “Content field contains restricted HTML elements”, run the following command to remove the restriction:

Adding the tawk.to live chat widget to your store is an excellent tool to improve customer support, boost sales, and enhance the overall online shopping experience for your customers.

Check out these articles to get the most out of your live chat widget:

If you have feedback about this article, or if you need more help:

Click the green live chat icon.
Schedule a call with us.
Visit our community.

Was this article helpful?

80 out of 122 liked this article

Still need help? Message Us