Embedded campaigns

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. The campaign is rendered on your site through a simple <div> element that you implement on your site where you want the campaign to show (method 1), or rendered in a predefined element placeholder of your choosing (method 2 - Recommended!).

How to create an embedded campaign

Method 1 - Triggerbee 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: Embedded campaigns can not be previewed from the "preview"-button in the Editor before you have added the code to your site.

Method 2 - use existing elements on site

Step 1: Find or create your placement on site

First of all, you need to locate the element of your webpage that you want to replace or inject the Triggerbee campaign below. This can either be done with current elements or by you adding a new element to your CMS.

Using current elements

If you have readable HTML on your webpage, eg. that classes and IDs are not minimized - you can use these to pinpoint elements to replace with Triggerbee content. Here's how to do so!

Go to your website and open the Inspector. Find the HTML code for where you want 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.

Creating new elements

If your HTML code is minified, or if you just want to create specific triggerbee-placeholders - all you need to do is to add some new HTML elements to your CMS. Simply locate the position of where you want your campaign, and add a snippet like this:

<div id="triggerbee-placeholder-pdp-pricing"></div>

The ID can be anything you want, but make sure it is descriptive and unique for each element. Now, copy the ID and move on to step 2.

Step 2: Create your placement in Triggerbee

Navigate to Customization --> Placeholders and press +New Placeholder.

Define your placeholder by the following values:
1. Name: Give your placeholder a unique name. This will be used for selecting placeholders in your campaign.
2. Target element: The CSS selector of your element where you want the campaign.
3. Placement method: Select "Place below" to render your campaign below your specified placeholder, and "Replace target element" to replace your placeholder with the campaign.
4. 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.
Save your placeholder by clicking Create.
Then navigate to Campaigns and create your campaign. Select 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 for 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 a list of your created placeholders. Select the one you want to add the campaign to.
Publish your campaign to render it on your website.

Recommended Embedded placements

Embedded campaigns can be placed anywhere on the website depending on your needs and possibilities. But there are some placements that we always recommend to use for embedded campaigns: