Embedding A Campaign

Note: This feature is available on the Business Plan or above.

After you publish a campaign, you can easily embed it in your website or blog. To do this:

Visit a published campaign in the Campaign Builder.
Click the Publications button on the left (it looks like a bookmark) to open the Publications Panel.
Click the Embed Code button to the right of your campaign's URL to open the Embed Code Dialog.
You'll then see three options: HTML Embed Code, Wordpress Embed Code, and Popup Embed Code.

In this doc, we'll cover grabbing the HTML Embed Code. For information on the other two options, check out the following docs:

How to Embed to SquareSpace, Wordpress, Shopify or Wix

Embed Your Campaign as a Popup on Your Website

To continue, click the HTML Embed Code button.
From there, you can just copy the responsive code shown in the field on the right by clicking the blue Copy Embed Code button, and paste it into the code on your website within the <body> section.
If you need them, there are some advanced options you can check out by clicking the Show Advanced Options link.
- Responsive embed code or fixed embed code: Responsive code has the ability to resize itself automatically. This code is ideal if you have widgets on the campaign set to Starts Hidden. Fixed code does not automatically adjust its height. If the height of the campaign is variable, use the fields below the radio buttons to enter the campaign's width and maximum possible height.
- Automatically Scroll to Popups: Check this box to scroll to popups when visitors access them.
- Vertical offset in pixels for automatic scrolling: Enter a number of pixels in this field to make sure the campaign always remains visible when scrolling with Action Widgets.
After altering any of the advanced options, your embed code will change; be sure to copy the code afterward and paste it into your website.

Optional (but recommended): Visit Campaign Settings to restrict embedding to specific domains. Access the Campaign Settings, click the Embedding menu, and then enter domains to restrict embedding to. If left blank, your campaign can be embedded in any site. Separate multiple domains with spaces.

Screen_Shot_2018-02-27_at_1.19.47_PM.png

For maximum flexibility, enter only the root domain of your site. For example, if your website address is http://www.example.com, you would enter example.com into this field.

Notes and Tips About Embedding

If you don’t have much room on your website to embed, you can experiment with a narrower width.
Your embed code is dependent upon the Campaign URL. This means if you uninstall the campaign, the embed code will stop working.
There are examples of people who have had issues embedding our responsive embed code because their CMS strips out the Javascript. If you run into this issue, just make sure you're using the most recent version of ShortStack (hit "refresh" in the Campaign Builder) and then grabbing the code from the embed code area. The most recent code should work fine because it doesn’t require the Javascript for it to be displayed.

--------------------------------------------------------------------------------------------------------------
Starting December 26th, the publishing process will change. New instructions for embedding a campaign are below.
--------------------------------------------------------------------------------------------------------------

Note: Embedding is available on the Business Plan or above.

Embedding is a publishing option that allows you to place your campaign in your own website. 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:

When your campaign is ready to be published, click the blue Publish Campaign button in the top-right corner of the Campaign Builder.
Click the blue Embedded on Website button in the pop-up.
The prompt will now give you the option to Brand your campaign. These steps are optional, but highly recommended to give your campaign a more professional, consistent feel. You can read more about each of these options on the Publishing a Campaign help doc.

When you're finished setting up your branding, click the blue Next button to continue.
Next, you'll be asked to enter the URL of where the campaign will be displayed. You can change this later, if needed. The Mobile Behavior can also be edited here; since some embedded campaigns can appear glitchy on mobile devices, this gives you the option to have your campaign URL redirect to a stand-alone page to sidestep any potential issues.

Once these settings are complete, click the blue Publish button.
In this doc, we'll cover grabbing the Website Code. For information on the other two options, check out the following docs:

How to Embed to SquareSpace, Wordpress, Shopify or Wix
Embed Your Campaign as a Popup on Your Website

Make sure Website is selected, then click the blue Copy button to copy the iFrame code. This is the code that you'll need to paste into the code of your website.

Once you've got your code, click the blue View Campaign URL button to finish up.
From there, you'll see your campaign URL - you can click the Copy button to copy it to your clipboard.

Once you're all set, you can click the blue Close button, or click Manage Publications to be taken to your Publications Panel.