How to embed Digioh inline campaigns on your site using jQuery/CSS selector

Digioh Inline campaigns can be embedded directly into your website using a CSS selector. By targeting a specific element on your page, you control exactly where your campaign appears.

What You’ll Learn

• How to embed a Digioh Inline campaign at a precise spot on your site, no developer required
• How to find the right CSS selector using either your browser’s Inspect tool or Digioh’s visual Selector Generator
• How to configure your campaign as Inline and choose an insertion method
• How to use Display Rules so the campaign appears only where and when you want

Step 1: Find the CSS Selector

There are two ways to find the right selector. Pick whichever feels more comfortable. The rest of the setup is the same.

Option A: Use Your Browser’s Inspect Tool

1. Go to the page where you want to embed the Inline campaign.
2. Right-click on the section of the page where the campaign should appear.
3. Click Inspect. This opens your browser’s Developer Tools.
4. In the highlighted HTML inside the Elements panel, right-click the correct container element.
5. Select Copy → Copy selector. This copies the full CSS selector for that element.

Tip: Make sure you select the correct container element (for example, a div that wraps the section), not just a text element inside it.

Option B: Use Digioh’s Visual Selector Generator

If you’d rather click on the page than dig through HTML, Digioh has a built-in Selector Generator that does the work for you. Launch it one of two ways:

• Open the page where you want to embed the campaign and add this URL parameter:
  ?lightbox-jquery-selector-generator
• Or paste this command into the DevTools console and press Enter:

DIGIOH_API.LIGHTBOX.runJquerySelectorGenerator();

Click anywhere on the page. A window appears with two fields:

• Top field (positioning): Copy this into the CSS Selector field in your campaign settings (Step 2 below).
• Bottom field (targeting, optional): Restricts the campaign to pages where the selected words (for example, “Contact”) appear within the selected element. This can be used in an HTML Exists jQuery rule for campaign targeting.

Step 2: Add the Selector to Your Inline Campaign

6. In Digioh, open your campaign in the Editor.
7. Go to Settings → Campaign Settings.
8. Set the campaign type to Inline.
9. Under Position, select CSS Selector (Advanced).
10. Paste the selector you copied in Step 1 into the selector field.
11. Choose your Insertion Method (append, prepend, before, or after). This determines how the campaign is placed relative to the selected element.
12. Click Apply & Close.
13. Click Publish.

Important: Add a Display Rule

Your campaign must have at least one Display Rule in order to appear on the site. Even if the selector is correct, the campaign will not display unless its targeting conditions are met.

Step 3: Test Your Positioning

Reload the page on your site to see the campaign in place. If it lands in the wrong spot:

• Try a different Insertion Method (append vs. prepend vs. before vs. after).
• Re-run the Selector Generator and pick a different element.
• In the campaign editor, click “Need selector help? Click here.” to open a window where you can try alternate positioning interactively.