Prestashop Integration

<< Click to Display Table of Contents >>

  Integrations > Shopping Cart Integrations > Prestashop >

Prestashop Integration

How to add your Live Chat Button to Prestashop website

 

Adding Live Chat Button with help of free HTML module

 

In order to add a chat button to PrestaShop-based website, you would need to download and install a free HTML module contentBox. It allows you to add a new text block or HTML / Javascript code to your website.

 

To start Live Chat and Prestashop integration process, please do the following:

 

1.Download the module from http://contentbox.org/

2.Login to your Prestashop Admin Panel

3.Follow Modules / Modules in the top menu

4.Click 'Add new module' button

5.Browse for the module file you downloaded and press 'Upload this module' button

 

contentBox uploading

contentBox module uploading

 

6.After this the module will appear in the list of modules

7.Find contentBox module and press 'Install' button for it to proceed with module installation

 

contentBox installation

contentBox module installation

 

8.Now it's time to get the code for your live chat button. For this, please log into your account Control Panel on Provide Support website and follow My Account / Chat Button Codes page there

9.The best option will be to generate the floating chat button code, which will let your live chat button appear at a fixed position. For this purpose, please choose Fully Featured Chat Button Code with Uploadable Online / Offline Images and check an option 'Generate a floating chat button code'

10.Then specify vertical and horizontal values for your live chat button position and copy the code.

11.Find the contentBox module you installed and click 'Configure' for it.

 

contentBox configuration

contentBox module configuration

 

12.In the appeared editor click 'Edit HTML source button' and insert the chat button code you have generated and copied

 

contextBox updating

Inserting chat button code to a module

 

13.Click 'Update' button in the editor window and then 'Update (Save)' button in the module configuration.

14.The chat button will appear on your website in the defined position

 

Prestashop website

Live Chat button on Prestashop website

 

 

 

If for some reason the live chat button does not appear, please ensure you hooked the module to the proper position. To hook the module, please do the following:

 

1.In your Prestashop admin follow Modules / Position

 

Module Position

Module Position

 

2.Click 'Transplant a module' button Transplant a module button

3.In the appeared configuration window choose your module and the position to hook it into. We recommend hooking our live chat module into the page footer.

 

Hooking the module

Hooking the module

 

Adding Live Chat Button directly to Prestashop theme

 

For adding live chat button to your Prestashop theme directly you need to have access to your Prestashop files via standard FTP client or the cPanel File manager.

 

To integrate Provide Support Live Chat system with your Prestashop-based website, please do the following:

 

1.Access your Prestashop files via FTP client or Cpanel File manager

2.Open there Prestashop / Themes / Your theme name folder, in our example the default theme is used. You can check the name of your theme in your Prestashop admin panel in Preferences / Theme

 

Prestashop FTP

Prestashop files on FTP

 

3.We will recommend adding the live chat button code to your footer, so open in Notepad footer.tpl file which is located in your theme folder

4.Log into your account Control Panel on Provide Support website and follow there My Account / Chat Button Codes page

5.Generate there the code which will display your live chat button tied to a fixed position on your browser window (bottom right corner, for example). For this purpose choose Fully Featured Chat Button Code with Uploadable Online / Offline Images and check an option 'Generate a floating chat button code'. Then specify vertical and horizontal position for your live chat button.

6.Copy the code and insert it to the footer.tpl before closing </body> tag.

7.Before <script type="text/javascript"> insert {literal}, then add {/literal} after closing </script> tag. This will prevent Prestashop template engine from evaluating your live chat button code.

 

Editing Prestashop footer

Adding Chat Button Code to the footer

 

8.Save your changes and upload your updated footer.tpl file to your FTP or Cpanel.

9.The chat button will appear in the position specified in your chat button code

 

Prestashop chat button example

Live Chat button at Prestashop website bottom corner