How to Embed to Squarespace, WordPress, Shopify, or Wix

Overview
How to embed
     Squarespace
     WordPress
         WordPress Plugin
     Shopify
     Wix

Overview

Once a Campaign is published, it can be embedded anywhere. Embedded Campaigns can result in 83% more views and 31% more entries than Campaigns published just to Facebook.

If you host your website or store on a service such as Squarespace, WordPress, Shopify, or Wix, embed your ShortStack Campaign to easily collect leads and run contests directly from your existing website.

The steps for embedding on these services is outlined below.

How to embed

1. Visit a published Campaign in the Campaign Builder. Only Campaigns that have been published can be embedded elsewhere.
2. Click the Publications button at the top to open the Manage Publications Panel.
3. Click the Embed Code button to open the Embed Code Dialog.
4. If prompted to enable embedding, click the Enable Embedding for this Campaign button.
5. Choose the type of code:
   - Responsive, which has the ability to resize itself automatically. This code is ideal if you have widgets on the Campaign set to Starts Hidden. Check the Automatically Scroll to Popups box to scroll to popups when visitors access them.
   - Fixed does not automatically adjust its height. If the height of the Campaign is variable, use the fields below the embed code field to enter the Campaign's maximum possible height.
   - WordPress embed code is code that is specially generated for use with ShortStack's WordPress plugin. Install the plugin before proceeding. 
6. Your embed code will appear. Copy the code 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. 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.   

If left blank, your Campaign can be embedded in any site.

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 being published. This means if you uninstall the Campaign, the embed code will stop working.

Squarespace

Squarespace is a website builder popular with photographers and creatives. A Squarespace site is comprised of blocks that can be used to add content or control layout, similar to ShortStack Widgets.

How to embed your Campaign to Squarespace:

1. Copy your embed code in ShortStack’s Campaign Builder, following the steps outlined above.
2. Navigate to Squarespace.com and log in to your account.
3. Once you’re logged in, select the Design tab. This will open your website where you can add or edit content.
4. Scroll to the section, or select the page, where you want to embed your Campaign.
5. Select “Edit” to add to that section or page. 
6. Add a Code Block by selecting it in the block menu and dragging it onto your website.
7. With the Code Block open, remove the <p>Hello, World!</p> and paste the code you copied from ShortStack. HTML is selected by default; you don’t need to change this.
8. Select Apply.

WordPress

There are two ways to have a WordPress website: a blog created on WordPress.com or a self-hosted WordPress.org website. Below are steps to embed to both types of WordPress websites.

How to embed your Campaign to a WordPress.com website.

1. Copy your embed code in ShortStack’s Campaign Builder, following the steps outlined above.
2. Login at WordPress.com.
3. Determine where you want to embed your Campaign: to a Post or a Page. Select Add New under Posts or under Pages, depending on your choice.
4. Once the new Post or Page has been created, select the Text tab in the content editor.
5. Paste the embed code into the empty content box.
6. Select Publish.

How to embed your Campaign to a self-hosted WordPress website:

1. Login to the back end of your website using the wp-admin URL. This looks something like: yoursite.com/wp-admin
2. To embed your Campaign to a page, navigate to Pages.*
3. Select Add New from the Pages tab.
4. Add a Page title in the “Enter title here” field.
5. In the main content area, select the Text tab.
6. Paste your embed code into the empty content area.
7. Select Publish.

*If you want to embed on a Post instead of a Page, follow the same instructions, but start by selecting “Add New” in the Post tab instead.

WordPress Plugin

ShortStack also has a WordPress plugin for self-hosted websites, which makes it easy to add a ShortStack Campaign to a Page or a Post with just one click. This plugin adds a shortcode snippet.

To install this plugin, login to your self-hosted website. Navigate to Plugins, and search for “ShortStack for WP”; or, go directly here to install it.

Setup

1. Upload the shortstack-wordpress folder to the /wp-content/plugins/directory.
2. Activate the plugin through the 'Plugins' menu in WordPress.

Usage

1. Within the Campaign Designer, open the Embed Settings panel for your published campaign.
2. Click on the WordPress link on the left of the dialog.
3. Select and copy the WordPress Shortcode.
4. Paste the shortcode anywhere inside the body of a Post or Page within your WordPress installation.

Example: [shortstack smart_url='//a.pgtb.me/#####' responsive='true' autoscroll_p='true']

Shopify

Shopify is used to create ecommerce stores for physical and digital products. Add a ShortStack Campaign to run giveaways and promotions straight from your Shopify website.

How to embed your Campaign to Shopify:

1. Copy your embed code in ShortStack’s Campaign Builder, following the steps outlined above.
2. Login at Shopify.com.
3. In the dashboard, navigate to Online Store. 
4. Determine where to embed your Campaign. You can embed to a Blog Post or a Page. The process for embedding to each one is very similar.
5. Create a new Blog post or a new Page. Give the new post or page a title.
6. In the content editor, select the Show HTML button, which looks like </>.
7. Paste the Campaign embed code into the empty content area.
8. Select Save in the upper right corner.

Wix

Wix is a platform that helps you quickly set up a business website. Embed a Campaign to run a contest, collect email addresses for your newsletter, take restaurant reservations, display an Instagram hashtag feed, and more.

How to embed your Campaign to Wix:

1. Copy your embed code in ShortStack’s Campaign Builder, following the steps outlined above.
2. Login to Wix.com.
3. Select “Edit Site.”
4. Scroll or navigate to where you want to embed your Campaign.
5. Select the + Add button in the left-hand menu.
6. Select More at the bottom of the menu.
7. Select HTML Code. This will add a blank box to your website.
8. Above the box, select Enter Code. This will open a blank text box.
9. Make sure that Code, not Website, is selected. Paste your embed code into this blank box.
10. Select Update.
11. Select Save at the top of the website builder, and Publish if you want the changes to go live.