Skip to main content

How to Embed a Campaign Inline (2.0)

Pro.svgALL PLANS

Overview

The inline embed feature allows you to display your ShortStack campaign directly within the content of a specific page on your website. This is a streamlined, two-step process that works automatically once your global ShortStack embed code is installed on your site.

You have four options for embedding your campaign inline:

  1. Visual Picker Tool (Recommended): Select the exact spot on your page using an interactive tool.
  2. Manual Method: Enter the CSS selector and insertion position directly.
  3. Use DIV Element: We will provide a DIV element for you to add to your website.
  4. No-Script / Iframe Embed: If you are unable to install the global embed script on your site, use this option to generate a self-contained <iframe> snippet instead.

Prerequisites

Before proceeding, you must first install the global ShortStack embed code on your website. This is the base code that allows all ShortStack campaigns to run on your domain.

If you are unable to install the embed script on your site, see Method 4: No-Script / Iframe Embed below for an alternative.

Learn more about Installing the Global Embed Code.

Method 1: Using the Visual Picker Tool (Recommended)

The Visual Picker Tool makes it easy to select the perfect spot for your campaign without needing to know any code.

  1. Go to the Publications Panel: In the Campaign Builder, click the Publish Campaign button or the Publications Panel icon (a bookmark) at the top right.
  2. Select Inline Embed.
  3. Enter Your URL: Copy and paste the full URL of the page where you want the campaign to appear (e.g., yoursitehere.com/giveaway). Click continue.
  4. Choose Installation Method: Select Install Global Embed Code (Recommended). If you want to install the code manually, select "Install on Each Page" and follow the Method 2 steps below.
  5. Install Global Embed Code: Copy and paste the provided code into your website's code. The script can be placed anywhere on the page; adding it in <head> or <body> is recommended for fastest loading.
  6. Validate the Global Embed: After installing the Global Embed Code on your website, click the Validate button to confirm the code was installed properly. Once validated, click continue.
  7. Launch the Campaign Place Tool: Verify the page you want to embed the campaign. Then Open Page & Select Placement.
  8. Select an Element: You will be taken to your web page. Click on an element, then use your keyboard arrows (or the on-screen d-pad) for exact placement. Advanced settings are available in a collapsible section, including a width slider to skip elements that are too small. Click Clear to start over if needed.
  9. Confirm Placement. Once satisfied with the placement, click the Confirm button. The tab will close, and you will return to your Campaign Builder.
  10. Publish: Click the blue Publish button. Your campaign is now automatically embedded into your website at the selected location!

Note: It might take a few minutes depending on your campaign size to be embedded on your website. You can exit the Publication Manager while still in the Updating status, it will not affect your campaign. You can open the Publication Manager to check on the status at any time.

Method 2: Manual Installation

If you prefer to enter the location manually or already know the CSS selector for your desired spot, use this method. Click on "I want to skip this step and manually install the campaign to my page," then manually enter the information in the Option Settings section.

Method 3: DIV Element

You can add a DIV element to your website instead of targeting via a CSS selector. Click on "I want to skip this step and manually install the campaign to my page," then click publish, and ShortStack will provide the DIV code for you to copy and paste into your website.

Method 4: No-Script / Iframe Embed

If you are unable to add the ShortStack embed script to your site you can use a self-contained <iframe> snippet instead.

In the Campaign Code snippet section of the Publish Wizard, check the "Use iframe instead of embed script" checkbox. The campaign <div> and embed script will be replaced with a single <iframe> snippet that requires no additional script on your page.

Note: Because the embed script is not present, the iframe height is fixed and will not resize dynamically. This setting is saved to the installation — clicking the gear icon in the Publications Dashboard will continue to show the iframe instructions. Publications using this method are identified with a "No Script" badge in the Publications Dashboard.

Was this article helpful?