This feature available on All Plans (except where noted)
Embedding is a publishing option that allows you to place your campaign in your own website. ShortStack actually allows you to publish your campaign as a pop-up on your site as well. This helps to promote your campaign by leveraging the traffic that the website already brings in. Here are the steps to follow to embed your campaign as a pop-up:
- When your campaign is ready to be published, click the blue Publish Campaign button in the top-right corner of the Campaign Builder.
- Before proceeding, you will see some Campaign Recommendations; the aim of this list is to help you make sure your campaign is as complete and functional as possible. This step is optional, but we do highly recommend taking a look at any areas that might need attention. Once you're done, click the blue Next button.
Note: If you're a pro at building campaigns and no longer need to view this list when publishing, simply check the Skip These Recommendations in the Future box in the bottom-left before clicking Next.
- Click the blue Embedded on Website button in the pop-up.
- Next, you'll be asked to enter the URL of your web page where the campaign will be displayed.
When a desktop user visits your campaign's ShortStack-issued URL, we'll silently redirect to the URL you provide here. For a mobile user, we can also redirect to this URL; but if your site isn't optimized for mobile, you may want to try the Show stand-alone page option in the publication settings. You can change both the URL and the mobile redirect setting later, if needed.
Once that's complete, click the blue Next button.
- This leads to a page where you can customize the URL for the campaign. Keep in mind that since you're embedding the campaign, the only time any visitors would see this URL is when they're sharing it, or if you set things up to direct mobile visitors to the stand-alone landing page version of your campaign.
A walkthrough of customizing your URL (both subdomain and domain) can be found in our Publishing a Campaign help doc.
Note: Customizing the domain (or publishing entirely to a custom domain) are only available on the Agency Plan or higher.
When finished, click on Publish.
- Congratulations! You've officially published your campaign as an embed! You're not quite done, though. You'll need to grab the embed code and place it in your website; but there are a few options to check out first, depending on how and when you want the pop-up to appear.
Make sure Pop-up is selected, then click open Advanced Settings. Here, you'll see all the available options for the behavior of your pop-up:
Pop up on exit intent: An exit intent pop-up is a technique used to retain visitors who are going to leave the site. With an exit intent pop-up, the visitor's mouse movements are tracked, and when the cursor moves outside the upper page boundary (because the tab bar is usually there) the pop-up is shown.
Pop up after idle timeout: Display the pop-up after a period of time if no feedback--clicks, touches, or mouse movements--is registered from the visitor. You can set the timeout period using the Seconds field.
Timed pop up: Displays the pop-up after a period of time. Set the amount of time using the Seconds field.
Pop up on scroll position: Display the pop-up after a visitor scrolls at least a certain percentage down the page. Set the percentage using the % Scrolled from top field.
Once you have your pop-up's behavior selected and the settings in place, click the blue Copy button for the first bit of code under Step 1. Then, paste it in the code of the webpage on your site where you want the pop-up embed to be displayed.
- If you are planning to have the pop-up triggered by clicking on a link, you then need to click the blue Copy button for the second bit of code, under Step 2. Paste that snippet of code on your website where you'd like the link to appear. Do note that you can edit the text of the link - by default, it will appear as Enter Here.
If you are using any of the pop-up options under Advanced Settings, there's no need to use the Step 2 code at all! - If you'd like to copy the share URL of your campaign, you can do so using the Copy Share URL button at the bottom-right of the pop-up. Otherwise, click the blue Done button.
- To make sure that mobile versions of your campaign are working the way you want, there's one more step to tackle. Click on the blue banner icon in the top-right of your Builder to open the Publications Panel.
- In the open panel, click the gear icon to the right of your publication name to open the settings for the embed.
- In this settings section, you'll see a few things; this is where you can grab the embed code (at the bottom) if you need to re-add it to your site, and you'll also see where you can change your Embedded At URL. Right now, focus on the When my campaign URL is clicked on a mobile device option; by default, it's set to redirect to the Embedded At URL. This means that if someone clicks a share link (in this example, "https://m.lndg.page/xKH63M") using a mobile device, it will automatically redirect that visitor to the URL ("https://www.shortstack.com")added in the Embedded at field.
Because of multiple technicalities behind the way mobile browsers handle iFrames, we typically recommend changing this. Click on redirect to the Embedded At URL and instead select show stand-alone page. When set up in this way, mobile visitors will be directed to the ShortStack-published version of the campaign. This version isn't displayed inside of an iFrame, and typically causes far fewer problems on mobile.
From there, click the blue Save button and you're done!
