1. Home
  2. Knowledge Base
  3. Popups & Other Forms
  4. How to embed Digioh inline campaigns on your site using jQuery/CSS selector
Searching...

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

What You’ll Learn in This Article

In this guide, you’ll learn how to:

  • Embed a Digioh Inline campaign directly into your website without developer support

  • Use your browser’s Inspect tool to find the correct CSS selector

  • Configure your campaign as Inline in the Digioh editor

  • Adjust placement using the selector and insertion settings

Overview

Digioh Inline campaigns can be embedded directly into your website using a CSS selector,  no developer required.

By targeting a specific element on your page, you can control exactly where your campaign appears.

Follow the steps below to set this up.

Step 1: Find the CSS Selector on Your Website

  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 will open your browser’s Developer Tools.
    Screenshot of a website with a right-click context menu open, highlighting the “Inspect” option at the bottom of the menu, with a red arrow pointing to it.

  4. In the highlighted HTML element 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.

    Screenshot of Chrome DevTools showing the Elements panel with a right-click menu open, highlighting “Copy” and “Copy selector” options used to copy a CSS selector for an element.

Step 2: Add the Selector to Your Inline Campaign

  1. In Digioh, open your campaign in the Editor.
  2. Go to: Settings → Campaign Settings
  3. Change the campaign type to Inline.
  4. Under Position, select: CSS Selector (Advanced).
    Screenshot of the Digioh Campaign Settings panel with “Inline” selected as the campaign type and the “CSS Selector (Advanced)” positioning option highlighted under Campaign Position.
  5. Paste the selector you copied in Step 1 into the selector field.
  6. Choose your preferred Insertion Method (e.g., append, prepend, before, after).
    The insertion method determines how the campaign is placed relative to the selected element.Screenshot of the Digioh Campaign Settings panel showing “Inline” selected, with the CSS Selector field filled in as “#search-2” and the insertion method set to “append()”, highlighted with a red arrow.
  7. Click Apply & Close.
  8. 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.

You’re All Set

Your Inline campaign will now embed into the selected section of your site whenever:

  • The selector exists on the page

  • Display conditions are met

Need Help Finding the Right Selector?

If you’re having trouble identifying the correct selector:

Updated on February 24, 2026
Tagged:
Was this article helpful?
Yes No

Related Articles

Need Support?
Can't find the answer you're looking for?
Contact Support