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.
- 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.
- 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.
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.
Comments
0 comments
Article is closed for comments.