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.
In this article you'll learn about:
- What Embedded Content is
- Why use Embedded Content
- What Flicker-Free Delivery is
- How to set up OptiMonk to use Embedded Content on my site
- How to add Embedded Content to my website
- How to use Point & Click Placement
- How to use Discount Codes in Embedded Content
- Things to keep in mind when using Embedded Content
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:
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!
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. 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 installed OptiMonk as a Shopify App Extension/a WordPress platform plugin/ a WooCommerce platform plugin, or if you 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 or other eCommerce platform plugin, you’ll have to reinsert the OptiMonk code manually into the head section of your website.
Users with 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. 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.
3) When selecting a template, choose “Embedded” as your message type.
4) Select the template you wish to use by clicking on Preview, then click on the Use this template button.
5) Select the domain from the drop-down menu you wish to use for the Campaign, then click Next.
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.
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.
9) When you placed the content (either with Point & Click Placement or Insert Code Manually), click on the Ok it’s done button.
10) 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.
💡 For the best possible user experience, we have made the following rules 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 Attribute)
11) Once you are done with the settings, click on Next in the top right corner to finalize the changes.
12) 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.
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.
3) Select the Campaign you wish to edit or create a new one.
4) Click on Edit settings on the right-hand side.
5) Click on Place content.
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.
💡 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.
❗Point & click Placement may not work if your website has a strict cookie policy and you have not consented to cookies yet.
7) Once you selected the right place for your Content, click on Confirm, then click on Done.
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.
9) 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.
10) Once you are done with the settings, click on Next in the top right corner to finalize the changes:)
7. How to use Discount Codes in Embedded Content
With OptiMonk, you can offer your visitors discount codes within your embedded campaigns. You have the choice to use either a fixed discount code or multiple unique ones, guaranteeing that one visitor gets one discount code only once at a time. If you're interested in learning more about discount codes in general, we encourage you to check out this article.
Setting up a Discount Code in Embedded Content
1) To access the Discount code section, simply navigate to the Add elements section and find it among the Product offers options.
2) Once you click on the Discount code option, further customization options will appear on the right side of the screen:
3) You have the option to choose between using a Fixed code or Unique codes, depending on what best suits your needs. Also, the Discount Code Reminder allows you to remind your visitors to redeem their discount code.
4) To use a Fixed Discount Code, simply select Fixed code under the Discount Code Type. From there, you can easily set the discount amount, and the same text will appear on the button for your customers to see.
5) There are two ways for unique discount codes: if you select Unique Codes, single-use discount codes will be generated and added to your Shopify account automatically. You can decide wheather you would like to add the percentage or the amount of the discount.
You can also add a fixed characters for the beginning of the discount codes as well, like SALE or DISCOUNT.
You can also add the expiration date in two ways: first, you can add a specific date of the expiration.
The other option is to add an expiration after displaying the code.
6) Another way for unique discount codes is to select Uploaded Unique Codes under the Discount Code Type. To upload your unique discount codes, click on Upload & edit coupons.
When using Uploaded Unique Codes, you have two options for adding your codes: you can manually enter them, separated by commas, or upload a .txt or .csv file with your generated coupons. Once you have added your codes, simply click Add to complete the process.
Once the discount codes are uploaded, you can track how many of them have been viewed by the visitors and how many are still available.
If there is no other disocunt code left, you can decide on what should happen next when the visitors have already seen all of the discount codes.
If you choose Stop campaign option, then the campaign will no longer be displayed. On the other hand, if you select the Show text option, your visitors will receive a message informing them that the disocunt code is no longer available.
7) Once you are done, you just have to click on Save & Exit in the top right corner:
8. Things to keep in mind when using Embedded Content
❗For Embedded Content to work, the OptiMonk code must be inserted into the head section of your website.
💡 If you’ve installed OptiMonk as a Shopify App Extension/a WordPress platform plugin/ a WooCommerce platform plugin, or if you have inserted the code into the head section of your site, the above doesn’t apply to you.
❗Product Recommendation is available only manually.
❗Point & click Placement may not work if your website has a strict cookie policy and you have not consented to cookies yet.
✉️ 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 :)
Comments