Embedded Content

Add lightning-fast, personalized sections to your website without involving developers. Create a unique experience for each customer with Embedded Campaigns that don’t feel obtrusive.

1.em.png

In this article you'll learn about:

  1. What Embedded Content is
  2. Why use Embedded Content
  3. What Flicker-Free Delivery is
  4. How to set up OptiMonk to use Embedded Content on my site
  5. How to add Embedded Content to my website
  6. How to use Point & Click Placement

1. What is Embedded Content?

Embedded Content allows you to create tailored browsing experiences for different audiences by adding lightning-fast, personalized sections as part of your website without involving developers.

Here's how it looks on a website:

2.em.png

With our Embedded Content, you can personalize more than just a popup: it allows you to personalize entire website sections effortlessly in our drag & drop Editor! Then, you can add it to your website, should it run on any CMS or website framework. Include personalized offers, incentives, surveys, and messages to your website without adding to the promotional noise, and create a unique experience for each customer with Embedded Campaigns that don’t feel obtrusive.

 

2. Why use Embedded Content?

The one-size fits all approach does not work in Ecommerce anymore. Customers expect a personalized experience when shopping online. However, creating a personalized browsing experience requires serious

⏰ time,

💰 investment,

👩‍💻 and know-how from marketers,

making it a real struggle.

 

This is why we have made it super easy to add personalized sections to your website with OptiMonk. Here are some great examples of why you should start using Embedded Content:

💪 Embed list-building forms with discount codes so you don’t interrupt the browsing experience.

💪 Embed surveys so they seem like an organic part of your website.

💪 Recommend relevant products in blog articles to help visitors convert faster.

 

3. What is Flicker-Free Delivery?

Embedded Content does not only load incredibly fast on your site, making it seem like an organic part of it, but it also does not flicker either!

3.em.png

Thanks to our advanced architecture, flickering is prevented entirely. In addition, you do not have to compromise on website performance since Embedded Content is optimized to maximize page speed: It loads incredibly fast - around 300 ms.

4.em.gif

 

4. How to set up OptiMonk to use Embedded Content on my site?

Important criteria for Embedded Content

To assure incredible fast loading of Embedded Content, the OptiMonk code must be inserted into the head section of your website.

💡 If you’ve added OptiMonk as an App Extension to your Shopify store or have inserted the code into the head section of your site, this doesn’t apply to you.

In every other case, you’ll have to update the OptiMonk code on your website :

Shopify users

  • Shopify users will have to use OptiMonk as a Shopify App extension to be able to use Embedded Content. To learn about how to enable the Shopify app embed mode in OptiMonk, read this article.
  • Old Embedded Campaigns won’t stop running if you’ve had any.

CMS plugins

  • If you’ve added OptiMonk as a Magento, WordPress, WooCommerce, or other eCommerce platform plugin, you’ll have to reinsert the OptiMonk code manually into the head section of your website.

Manual code insertion

  • Make sure that the OptiMonk code is inserted into the head section of your website (instead of the body - as done previously) a.k.a. the OptiMonk code will have to be re-inserted.

Where can you find the OptiMonk JavaScript code in your account?

1. Log in to your OptiMonk account at https://app.optimonk.com/

2. Click on your icon in the bottom left corner, then select Settings.

3. From the Insert code section, simply copy the OptiMonk JavaScript code and insert the code in the <head> section of each page of your website.

5.em.png

 

5. How to add Embedded Content to my website?

1. Log in to your OptiMonk account at https://app.optimonk.com/

2. Once logged in, click on New campaign on the right.

6.em.png

3. When selecting a template, choose “Embedded” as your message type.

7.em.png

4. Select the template you wish to use by clicking on Preview, then click on the Use this template button.

8.em.png

5. Select the domain from the drop-down menu you wish to use for the Campaign, then click Next.

9.em.png

6. Adjust your template any way you like in the Editor. If you want to add a new Element, just Drag & Drop it on the Campaign.      

     ⚠️ Product Recommendation is available only manually.

     ⚠️ Only Fixed Coupon Codes can be included in Embedded Content.

7. Once you are happy with the design, select Next in the top right corner.

 

10.em.png

8. On the next page, you will have two options to specify the position of your Campaign on your website: Point & Click Placement or Insert Code Manually. We recommend the former as it allows you to select where you want your campaign placed with a single click.

  • If you click on Place content, your website will open on a new page, where you will have the option to select the position of the Campaign. To learn about how to Use Point & Click Placement, please click here.

When you placed the content (either with Point & Click Placement or Insert Code Manually), click on the Ok it’s done button.

13.em.png

9. Add the targeting rules from the list as you would use in any OptiMonk campaign & make sure to include all URLs where you want your campaign to be displayed.

14.em.png

💡 For the best possible user experience, we have made the following conditions available for Embedded Contents: Frequency, Spent on Site, Engaged with OptiMonk Campaigns, Returning / New Visitors, Source, Shopify Logged in User, Current Page /URL, Visited URL, Exclude Page Visitors, Number of Visited Pages, Cart Rules, Cookie Segmentation, Custom Variable)

10. Once you are done with the settings, click on Next in the top right corner to finalize the changes.

15.em.png

11. That’s it! The only thing left is to activate your brand-new Embedded Content. :)

💡 Please note, that to use Embedded Content you’ll have to reinsert the OptiMonk code into the head section of your website. To learn about how to reinsert the OptiMonk code depending on your website type, please click here.

 

6. How to insert Embedded Content with Point & Click Placement into your website?

Determine where to place your Embedded Content on your website simply with a single click and zero code.

16.em.png

We believe that personalizing the browsing experience of visitors shouldn’t be complicated and involve developers. This is why OptiMonk makes selecting the right place for your Embedded Content super easy: by simply selecting the right block/selector above or below which you would like to place your new block.

 

How to Use Point & Click Placement?

1. Log in to your OptiMonk account at https://app.optimonk.com/

2. Select Campaigns on the navbar.

17.em.png

3. Select the Campaign you wish to edit or create a new one.

18.em.png

4. Click on Edit settings on the right-hand side.

19.em.png

5. Click on Place content.

20.em.png

6. When you click on Place content, your website will open on a new page, where you will have the option to select the position of the Content.

21.em.png

💡 Your website opens in Selector Mode. Here, you can select any block/selector on your website as a reference point. Then, you can choose if you’d like to insert your Embedded Content above or below that block.

💡 If you would like to select a different page from your Homepage, simply change to Navigation Mode and navigate to the page where you’d like to embed your campaign.

7. Once you selected the right place for your Content, click on Confirm, then click on Done.

22.em.png

8. When you save the selection, the Current page / URL rule will be automatically added with the specific URL where your campaign was inserted into.

23.em.png

💡 However, you can display the created Embedded Content on multiple pages that include the same selector. Simply, add a URL Targeting Rule that includes all pages where you would like your Embedded Content to be displayed. For example, if you would like to display it on all your product pages, simply use the following setting.

24.em.png

9. Once you are done with the settings, click on Next in the top right corner to finalize the changes:)

 

✉️ If you need any further help or have any questions, please let us know at support@optimonk.com, and we would be happy to assist you :)

Have more questions? Submit a request

Comments