search

How to Install Tidio on Prestashop

In this tutorial, you’ll learn how to install the Tidio live chat app on your PrestaShop store.

There are two ways of installing the widget:

Installing Tidio via HTMLbox

You can easily install the chat by using a free module called HTMLbox. This addon allows you to add any type of code to your PrestaShop store.

The first thing you need to do before making any changes is disabling ‘HTML purifier‘ in your PrestaShop admin area. This can be done via Preferences > General, and will allow you to add any type of custom code.

PrestaShop Preferences
How to disable ‘HTML purifier’ in PrestaShop

Once you’ve disabled it, download the HTMLbox module from here. Upload it to your shop via Modules and Services, and install it.

PrestaShop Modules And Services
Accessing ‘Modules and Services’ in PrestaShop

After you upload and activate HTMLbox, head over to your Tidio admin panel and copy the Tidio installation code from Channels > Live Chat > Integration.

Tidio Code
How to find the Tidio installation code

Paste the code into HTMLbox’s configuration screen. Make sure the position of the code is set to ‘footer.’

HTMLbox
Pasting the Tidio code into HTMLbox

Save the changes at the bottom, and that’s it! You’ve successfully added Tidio to your PrestaShop website.

Adding the chat code manually to your PrestaShop theme

In case you’re not able to use HTMLbox, there’s a way to inject the chat code directly to the theme’s template files.

Please note: PrestaShop version 1.7 and above won’t support this method, as adding JavaScript is no longer available in those versions.

Head over to your Tidio admin panel and copy the installation code from Channels > Live Chat > Integration.

Tidio Code
How to find your Tidio installation code

Before making any changes further on, you will need to disable ‘HTML purifier‘ in your PrestaShop admin area. This can be done via Preferences > General, and allows you to add any type of custom code.

PrestaShop Preferences
How to disable ‘HTML purifier’ in PrestaShop

Next, you will need to download and edit the theme’s footer.tpl file via FTP. The file is located in your /themes/your-current-theme/ folder, on your server.

Once you have the file, edit it with a text editor and look for the line with the closing </body> tag.

Code body
Finding the closing </body> tag

Directly above the line with that tag, you’ll need to add an extra element – the {literal} tag. That way, the template will know that you’re going to add your custom code here.

Code Literal
Adding the {literal} tag above </body>

Paste in the chat script below the {literal} tag. Then, add another tag after the chat script – the {/literal} tag this time, which closes the segment.

Code inserted
Placing the Tidio code within the correct tags

Save the changes in the file and upload it back to your server. You may also need to clear the cache in your PrestaShop back-end via Advanced Parameters > Performance.

PrestaShop Cache
How to clear the cache in PrestaShop

That’s it! You’ve successfully added Tidio to your PrestaShop store.

Troubleshooting

If you find that after installing via HTML Module you don’t see our widget but a JavaScript in a text form instead there is a easy fix for that.

You will need to go to your HTML Module editor and click on “</>” icon and save it. This will allow your widget to load correctly. 



In case you need more help, please contact us via chat or at [email protected]. We will be more than happy to assist you!

Can't find what you're looking for?

CONTACT SUPPORT