Inline campaigns are embedded directly onto your website, rather than a popup that appears on the website. The most common use cases are: inline product recommendations (as shown below) and embedded email capture forms.
GETTING STARTED
Before getting started, please have the following items ready that are necessary to setup an inline campaign.
Website URL: Bluecore will not create or host the webpage for the inline campaign. This must be previously created and the placement of the campaign is identified with the Selector ID.
Selector ID: Bluecore requires a CSS selector to inject the campaign creative within the website. This CSS selector finds the HTML elements of the website that you want to style. The selector ID should be unique and present only once on the page.
CAMPAIGN SETTINGS
Enter a name for the campaign, a start/end date, a display time, and select any suppression rules in the campaign settings.
Since an inline campaign is on your website, please be sure to select to always show the campaign under the suppression rules in the campaign setup. This ensures the campaign will always be shown to the appropriate audience.
TARGETING RULES
Targeting rules determine who the campaign will be shown to, where, and based on a specific set of criteria. Since this is an inline campaign, the targeting rules need to be configured to always show this campaign on a specific page of your website.
NOTE: Please be aware that Bluecore cannot create and host this portion of your website. You must provide this URL and Div ID/Selector ID to Bluecore to show the campaign on.
Learn more about the different ways to target an audience with specific criteria.
URL BASED CONDITION
Create a new targeting rule.
Select the URL based conditions section.
Select the contains operator.
Enter a current URL condition. This is the web address of the page on your website where the inline campaign will appear (if all pages on the site, enter the root domain).
Click Save.
Click Save and Continue in the lower right-hand corner after the targeting rules have been configured.
MESSAGE
After the targeting rules have been set up, the next step is to select a template type and build the campaign.
Select the inline template type.
Then, create a campaign (from existing, in VTE, or using the code editor).
MESSAGE DESIGN
The design of an inline campaign can take the entire width of the screen, or a partial space of the website. When designing an inline campaign, be sure to design for the entire height and width of the CSS selector that it will be added into in the next section.
SELECTOR ID
After the inline campaign is designed, the next step is enter the selector ID for the applicable HTML element for the campaign to display.
Bluecore requires a CSS selector to inject the campaign creative (that was previously designed in the last step) within the website. This CSS selector finds the HTML elements of the website that you want to style. The selector ID should be unique and present only once on the intended page.
NOTE: If the selector ID is present more than once, Bluecore will not show the campaign to ensure the same creative is not displayed twice on the website.
Locate the selector ID by following the below steps.
1. Open the developer tools in the web browser.
2. Click the selector icon.
3. Select the element on the page by clicking on it. The elements tab will now show the selected element.
4. Copy the Div ID/Class Name to find the number of occurrences of the selector on the page. If this is only used one, the selector can be used to show the inline campaign.
If you’ve copied a DIVD ID, append a # (hash) before the selector, as shown in the bottom of the screenshot.
If you’ve copied a class, append a . (dot) before the selector, as shown in the bottom of the screenshot.
5. Paste the selector ID into Bluecore on the message configuration screen.
After the selector ID has been added, the next step is to decide if it should be prepended, appended, or replaced. Learn more about each of these below.
Prepend: This option adds the creative before the selector that is provided above.
Append: This option adds the creative after the selector that is provided above.
Replace: This option replaces the creative with the selector that is provided above.
LAUNCH
Before you launch the campaign, be sure to confirm the targeting rules on the campaign summary page to ensure the applicable selector ID and targeting criteria are set.
Then, click Save and Launch to launch the campaign!
FAQ
Q: Why isn’t the inline campaign appearing on my website?
A: First, make sure the campaign has been launched and set live. If the campaign is still not displaying, the selector ID may not be unique. As explained above, if a selector ID is being used more than once, Bluecore will not render the campaign creative to refrain from showing the same creative twice on the page.