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 three options for embedding your campaign inline:
- Visual Picker Tool (Recommended): Select the exact spot on your page using an interactive tool.
- Manual Method: Enter the CSS selector and insertion position directly.
- Use DIV Element: We will provide a DIV element for you to add to your website.
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.
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.
Step-by-Step Instructions
- 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.
- Select Inline Embed.
-
Enter Your URL: Copy and paste the full URL of the page where you want the campaign to appear (e.g.,
yoursitehere.com/giveaway). - Launch the Tool: Click the Launch Visual Picker Tool button.
- Select an Element: You will be taken to your web page. Move your cursor around the page. As you hover, different page elements will be highlighted. Click on the element where you want your campaign to be embedded.
- Confirm Placement: Use your keyboard's arrow keys to adjust campaign placement. Click Clear to start over if needed.
- Click Confirm: Once satisfied with the placement, click the Confirm button. The tab will close, and you will return to your Campaign Builder.
- 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.