How to Integrate OptinMonster with PrestaShop

OptinMonster can work with any website. The best lead generation tool works on PrestaShop too! This guide will show you how you can integrate the power of OptinMonster into your PrestaShop site.

There are four main steps to add an optin to your website. Essentially:

  1. Create an Optin
  2. Enable the Optin
  3. Copy the Optin Embed Code
  4. Paste the Embed Code

Step 1 – Create an Optin Campaign

This step is relatively easy. Check out this document on Creating Your First Optin if you haven’t created an optin yet.


Step 2 – Enable the Optin

When you create a new optin, it’s Paused by default.

Once you’ve finished configuring your optin and it’s ready to be displayed on your site, hover over the status bar in the top menu and choose Start Campaign.

You can toggle the optin's status from Paused to Live in the optin builder by selecting the Start Campaign button from the top toolbar.

Once your campaign is live you’ll see this status reflected in the top menu bar.

The status of your optin is displayed in the top toolbar of the optin builder as either Live or Paused.

Need to pause your campaign again? You can do that in the optin builder too; simply hover over the status bar again and this time choose Pause Campaign.

You can Pause your optin campaign within the builder by selecting the Pause Campaign button from the top toolbar.


Step 3 – Copy the Embed Code

Once you have created your optin, you need to copy the embed code. Click the button titled Embed in the top left of your builder screen.

Optin Embed Button in the optin builder.

It will take you to the screen below where you’ll see three embed options:

  • Sidewide Embed – Single embed for all campaigns attached to a site.
  • Campaign Specific Embed Code – Single embed for this campaign only.
  • WordPress – Easy to use plugin for WordPress users. If you plan on using this method please review our in-depth guide to using OptinMonster with WordPress.

You'll find three Embed Options for each optin you create, a sitewide, individual campaign and WordPress option.


Sitewide Embed Code

If you choose to use the Sitewide Embed Code option, toggle the item to expand its view and you’ll see the embed code you can copy to add to your site.

You can use the Sitewide Embed Code to use a single embed for all optins on your site.

Important: If you’ve configured your optin to show on multiple different domains in the Setup panel’s Optin Campaign Website field, you’ll see a Sitewide Embed Code for each unique domain.

You must use the appropriate Sitewide Embed Code for each unique domain you want to show your optins on!


Campaign Specific Embed Code

If you choose to use the Campaign Specific Embed Code option, toggle the item to expand its view and you’ll see the embed code you can copy to add to your site.

You can embed your optins individually also, if you don't want to use a Sitewide Embed Code.


Once you’ve copied the appropriate embed code, you’re ready to move to the next step.


Step 4 – Paste the Embed Code into a Module in Your PrestaShop Site

First, login to the admin of your PrestaShop site. In this documentation we used the Custom HTML / JavaScript Code Module available from PrestaShop’s Addon store.

You can use special Modules to add JavaScript to your PresaShop

From the PrestaShop admin, navigate to the Modules screen, locate the Custom HTML / JavaScript Code Module and select Configure.

configure-custom-html-javascript-module

When configuring your Module, complete the following steps:

  1. Give your Module a Description.
  2. Set the Position of your Module. If you’re adding a popup optin, we recommend adding your Module to the Footer. If you’re adding an Inline optin, add your Module where you wish your optin to appear on the page.
  3. Paste the embed code you previously copied into the Content field.
  4. (Optional) If you wish to limit where your optin appears on your site you can modify the Exclusive and Define pages options.

Adding your optin embed code to the PrestaShop Module is very simple.

If you’re adding an inline type optin (After Post / Inline or Sidebar), you’ll add either the HTML Placeholder (if using a Sitewide Embed) or the entire Campaign Specific Embed where you want your optin to appear on the page.

Be sure to Save your Module when you’re finished and that’s it! You can now navigate to the front-end of your PrestaShop site and test your beautiful new optin!


FAQs

Q: What domain do I enter when creating my optin?

A: If you’re using the Cloud version of PrestaShop you can add the domain pswebstore.com for your optin to load on. This will allow you to view the optin when previewing your site.

If you’re using the self-hosted version of PrestaShop or your site uses a custom domain, you should also add your site’s custom domain (the domain used to reach the front-end of your site) in the Setup > Optin Campaign Website section of the optin builder.

You can control which domains your optin is allowed to load on by adding them to the Optin Campaign Website field.


Q: What’s the difference between the Sitewide and Campaign Specific embed codes?

A: You may find a specific purpose for each version of embed code to best fit your workflow:

Sitewide Embed: The Sitewide Embed code only needs to be added once to allow all optins that are configured to load on the specific domain to appear. This embed code can save significant time as there is no need to update it when you want to replace or remove an optin. Simply Pause or Delete the optin within your OptinMonster account and that change will be immediately reflected on your website.

Campaign Specific Embed: The Campaign Specific Embed code is unique to the individual optin and must be added everywhere you want that optin to appear. If you wish to embed multiple optins across your site and are using the Campaign Specific Embed you will need to add the unique embed code for each optin where you want that optin to load. If you want to replace or remove an optin you must manually edit the embed code present on your site.


Q: I’m using the Sitewide Embed, how do I control where my optins load?

A: When using the sitewide embed code, it’s important you page-level target your optins using the Display Rules in the optin builder.


Q: I’m using the Sitewide Embed, how do I control where on the page my After Post / Inline or Sidebar optins appear?

A: With the Sitewide Embed option, any After Post / Inline or Sidebar type optins will provide a specific HTML Placeholder in the Sitewide Embed panel you can copy and paste into your page where you want that specific optin to appear.

If you're using a Sitewide Embed you'll need to add the HTML placeholder to control where on the page the inline optin appears.


Q: Does the embed code have to be pasted before the closing </body> tag?

A: No, you can add the embed code anywhere within the body of your site, however there is no reason to add the optin further up the page for popup type optins. Since the optin doesn’t load until the rest of your site has loaded we recommend adding the embed code for any popup type optin just before the closing </body> tag.

AFTER POST / INLINE & SIDEBAR TYPE OPTINS: if you’re adding an inline optin (e.g. After Post / Inline or Sidebar) it’s important to note that the optin will appear on your page exactly where you place the embed code when using the Campaign Specific Embed.

If you’re using a Sitewide Embed on your site you’ll need to add the HTML placeholder as indicated in the Sitewide Embed panel to control where on the page of your site the inline optin appears:

If you're using a Sitewide Embed you'll need to add the HTML placeholder to control where on the page the inline optin appears.