What is an Embedded Campaign?
Embedded campaigns are injected onto your site rather than laying on top like popups or panels, to enhance the feeling of the campaign being a part of the editorial content.
Embedded campaigns are rendered on to your website via one out of two methods:
Method 1: Inserted via a
<div>snippetMethod 2 (Recommended): Rendered via existing or new site elements using CSS/HTML placeholders
Method One: Using Triggerbee’s Auto-Generated Snippet
Start by creating a new campaign with any template of your liking. We have some pre-made embedded templates, but any template can be remade to an embedded campaign by switching to Embedded as your Layout.
Take your time to design your campaign to your desired look. Then move on to Campaign Settings. Name your campaign and add settings for the audience, triggers, and any other campaign settings you want to have.
Under Embedded Settings, you will find your <div> element to implement on your webpage. With this snippet on your site, Triggerbee will render your campaign at that spot.
Implement the code and publish your campaign, then you're done!
Note: You must embed the snippet on your site to preview the campaign—it won’t show in the preview mode
Method Two: Using Existing or Custom Site Elements
Step 1: Identify or Create the Target Element on Your Site
First of all, you need to locate the element of your webpage that you want to replace, or inject the Triggerbee campaign below or above. This can either be done with current elements or by adding a new element to your CMS.
Go to your website and open the Inspector. Find the HTML code for where you want to render your embedded campaign.
Locate the ID or the class name of the element you want to work with. In this example, the element (h1 "Hoya Obovatum") doesn't have an ID, just a class (product_title entry_title).
Copy the class name and move on to step 2
Step 2: Set Up a Placeholder in Triggerbee
Go to Customization > Placeholders > New placeholder
Define:
Name: Give your placeholder a unique name. This will be used for selecting placeholders in your campaign.
Target element: The CSS selector of your element where you want the campaign.
Placement method: “Replace”, “Place below”, or "Place Above"
Preview URL: If you want to preview your embedded campaigns on a specific URL (preferably where the placeholder is located) you can add that URL here.
Create your placeholder and move on to Step 3 (creating the campaign).
If you need assistance with finding and creating your placeholder, please reach out to Triggerbee Support.
Step 3: Create and Connect Your Campaign
Build your campaign using any template
Switch layout to Embedded
In Embedded Settings, choose your previously created placeholder
Publish the campaign
Use Cases for Embedded Campaigns
Start Page: Newsletter signups in the footer, Rolling top banner
Category Pages: Personalized messages or promotions
Product Pages: Promotions, cross-sells, upsells, FOMO
Cart Page: Discount codes, shipping messages, urgency banners