Skip to main content

How to Embed Campaigns in Common Website Builders

This feature available on All Plans

 

Overview

As part of the publishing process, a ShortStack campaign can be embedded almost anywhere. Embedded campaigns can result in 83% more views and 31% more entries than campaigns published elsewhere.

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

For these instructions, you'll first need to get the embed code from ShortStack. To learn how to get that code, see the Embedding a Campaign help doc.

 

Note: ShortStack does not provide support for technical issues with third-party platforms. If you run into issues using your embed code on those platforms, please contact the platform's support directly.

 

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's widgets.

Squarespace allows you to embed your campaigns in one of two ways: using an Embed Block, or by using a Code Block.

Embed Block

Begin by logging into your Squarespace account. Then:

  1. Click on the Website button of the site to which you'd like to add your campaign.

    Screen_Shot_2022-02-18_at_9.42.41_AM.png

  2. Click on Pages to show the list of pages on your site.

    Screen_Shot_2022-02-18_at_9.47.22_AM.png

  3. Select the Page to which you want to embed your campaign (in this example, I've created a page named Embedded Campaign), then click the Edit button.

    Screen_Shot_2022-02-18_at_9.47.01_AM.png

  4. Where you'd like to add your embedded campaign, hover over your site and click the appropriate Add Section button.

  5. You can use a template if you'd like, but we typically recommend choosing Add Blank.

    Screen_Shot_2022-02-18_at_9.55.37_AM.png

  6. If you hover your cursor around the middle of the new section, you'll see the + icon - click that to add a new block.

    Screen_Shot_2022-02-18_at_9.57.22_AM.png

  7. In the Add Blocks panel that pops up, select the Embed Block.

    Screen_Shot_2022-02-18_at_9.58.32_AM.png

  8.  In the Content pop-up that appears, click on the code icon (</>).

    Screen_Shot_2022-02-18_at_10.07.42_AM.png

  9. In the field provided, paste your embed code from ShortStack. You should see the campaign appear on the page immediately! Click anywhere outside of the pop-up to close it.

    Screen_Shot_2022-02-18_at_10.08.49_AM.png

  10. Click Done in the top-left corner of the screen, then select Save from the dropdown. With that, you're all set!

    Screen_Shot_2022-02-18_at_10.11.49_AM.png

For any issues with the Embed Block, refer to Squarespace's Embed Block help doc.

Code Block

Begin by logging into your Squarespace account. Then:

  1. Follow steps 1 through 6 in the Embed Block section above - it's the same process to start.

  2. In the Add Blocks panel that pops up, select the Code Block.

    Screen_Shot_2022-02-18_at_10.19.48_AM.png

  3. In the Content pop-up that appears, make sure that the Mode is set to HTML.

    Screen_Shot_2022-02-18_at_10.22.29_AM.png

  4. In the field provided, remove the "Hello World" code and paste your embed code from ShortStack. You should see the campaign appear on the page immediately! Click anywhere outside of the pop-up to close it.

    Screen_Shot_2022-02-18_at_10.23.54_AM.png

    Note: iFrame embeds are restricted to paid Squarespace plans.

  5. Click Done in the top-left corner of the screen, then select Save from the dropdown. With that, you're all set!

    Screen_Shot_2022-02-18_at_10.11.49_AM.png
    For any issues with the Code Block (or adding custom code in general to your page), refer to Squarespace's Custom Code/Code Block help doc.

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:

Begin by logging into your WordPress.com account. Then:

  1. We recommend adding the campaign on a new page; hover over Pages in the menu on the left, then click Add New in the submenu.

    Screen_Shot_2022-02-23_at_1.45.35_PM.png

  2. It will prompt you to select a template; choose one if you'd like, otherwise, just select Blank page.

    Screen_Shot_2022-02-23_at_1.55.00_PM.png

  3. Now you're in the editor. Click the + to add a new block to your page. The six most recently used blocks will appear in the pop-up; if Custom HTML shows there, click on it.

    Screen_Shot_2022-02-23_at_1.58.26_PM.png

    If the Custom HTML block isn't in your recently used; either search for it using the Search field, or click Browse all to open the Blocks menu on the left side of the page, then scroll down to the Widgets section and click on it there.

    Screen_Shot_2022-02-23_at_2.01.59_PM.png

  4. Paste your embed code into the provided field.

    Screen_Shot_2022-02-23_at_2.05.45_PM.png

  5. To preview what the embedded campaign looks like on the page, click on the Preview button.

    Screen_Shot_2022-02-23_at_2.08.00_PM.png

  6. Make any other required changes to the page that you'd like. Once you've got everything looking the way you want, either click Save draft or push the Page live by clicking Publish. Once that's done, your campaign is live on your site!

    Screen_Shot_2022-02-23_at_2.09.42_PM.png

For any issues with the Custom HTML Block, refer to WordPress.com's Custom HTML Block help doc.

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

Begin by logging into the back end of your website using the wp-admin URL. From there:

  1. We recommend adding the campaign on a new page; hover over Pages in the menu on the left, then click Add New in the submenu.

    Screen_Shot_2022-02-23_at_2.32.50_PM.png

    Alternatively, if you'd like to add your campaign to an existing page, click on Pages, then hover over the name of the page you'd like to add the campaign to and click the Edit link that appears underneath.

    Screen_Shot_2022-02-23_at_2.49.07_PM.png

  2. On the resulting page, click on the Text tab on the right side of the editor. 

    Screen_Shot_2022-02-23_at_2.34.48_PM.png

    Note: If you have any page building add-ons installed in your WordPress instance, your editor may look different.

  3. Paste your embed code into the text box.

    Screen_Shot_2022-02-23_at_2.37.35_PM.png

  4. If you'd like to preview what the campaign looks like in the page, click the Visual tab to switch back to the visual view.

    Screen_Shot_2022-02-23_at_2.41.08_PM.png

  5. Make any other required changes to the page that you'd like. Once you've got everything looking the way you want, either click Save draft or push the Page live by clicking Publish. Once that's done, you're good to go!

    Screen_Shot_2022-02-23_at_2.42.55_PM.png

 

Shopify

Shopify is used to create e-commerce stores for physical and digital products. Add a ShortStack campaign to run giveaways and promotions straight from your Shopify Online Store.

Shopify allows you to embed your campaign by adding it to a new Page or adding the code to a Blog Post.

Page

Begin by logging into your Shopify account. Then:

  1. On your home page, click on the Online Store into which you want to place your campaign.

    Screen_Shot_2022-02-23_at_9.48.52_AM.png

  2. We suggest adding a new page to your Online Store to embed your campaign; to do this, click on Pages.

    Screen_Shot_2022-02-23_at_10.05.37_AM.png
  3. Click on the Add page button in the top-right.

    Screen_Shot_2022-02-23_at_10.13.14_AM.png

  4. On the resulting page, add a name for your page using the Title field, then click on the Show HTML icon (<>) at the top of the Content editor.

    Screen_Shot_2022-02-23_at_10.16.59_AM.png

  5. Paste your ShortStack campaign's embed code into the Content area.

    Screen_Shot_2022-02-23_at_10.22.00_AM.png

  6. Tweak any SEO, Visibility, or Theme settings if you need to; then click Save in the bottom-right. With that, you're done!

    Screen_Shot_2022-02-23_at_10.25.48_AM.png

Blog Post

Begin by logging into your Shopify account. Then:

  1. On your home page, click on the Online Store into which you want to place your campaign.

    Screen_Shot_2022-02-23_at_9.48.52_AM.png

  2. To add the embed to your blog, click on Blog posts.

    Screen_Shot_2022-02-23_at_10.53.31_AM.png

  3. Click on the Add blog post button in the top-right.

    Screen_Shot_2022-02-23_at_10.55.12_AM.png

  4. On the resulting page, add a name for your new blog post using the Title field, then click on the Show HTML icon (<>) at the top of the Content editor.

    Screen_Shot_2022-02-23_at_10.58.15_AM.png

  5. Paste your ShortStack campaign's embed code into the Content area.

    Screen_Shot_2022-02-23_at_10.22.00_AM.png

  6. Tweak any Excerpt, SEO, Visibility, Featured Image, Organization or Theme settings if you need to; then click Save in the bottom-right. Boom - your new blog post is ready to go!

    Screen_Shot_2022-02-23_at_10.25.48_AM.png

For any issues with adding custom HTML in your Pages or Blog Posts, refer to Shopify's Using the rich text editor for content help doc.

 

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, accept restaurant reservations, display an Instagram hashtag feed, and more.

Wix allows you to embed your campaign by adding it to your website using a Custom Embed or adding the code to a Blog Post.

Custom Embed

Begin by logging into your Wix account. Then:

  1. Find the website where you'd like to embed your campaign, then click Edit Site.

    Screen_Shot_2022-02-23_at_11.40.20_AM.png

  2. Scroll or navigate to where you want to embed your campaign, and if you hover over the preview you should see the Add Strip button pop up - click it.

    Screen_Shot_2022-02-23_at_11.42.20_AM.png

    Alternatively, you can click the + Add button on the left-hand side.

       Screen_Shot_2022-02-23_at_11.44.24_AM.png

  3. Click on Embed, then Custom Embeds, then finally the + (Add to Site) icon next to Embed a widget.

    Screen_Shot_2022-02-23_at_11.47.16_AM.png

  4. You'll see the new embed displayed on your site, but nothing in it quite yet. Click on Enter Code.

    Screen_Shot_2022-02-23_at_11.51.31_AM.png

  5. Make sure the button next to Code is selected.

    Screen_Shot_2022-02-23_at_11.53.24_AM.png

  6. Paste your campaign's embed code into the Add your code here field, then click Update. 

    Screen_Shot_2022-02-23_at_11.54.48_AM.png

  7. Use the Stretch handles (or the tiny handlebars on each corner) on your new embed to change the size of the iFrame to your preference.

    Screen_Shot_2022-02-23_at_11.57.42_AM.png

  8. Select Save at the top of the website builder (if autosave isn't already turned on), and Publish if you want the changes to go live. You're now up and rolling on your site!

    Screen_Shot_2022-02-23_at_12.00.02_PM.png

For any issues with adding an iFrame to your site, refer to Wix's Adding an HTML iFrame Element help doc.

Blog Post

Not all Wix sites have Blog capabilities by default; to learn how to add a blog to your website, check out the Adding and Setting Up Your Blog help doc on Wix support.

If you do have a blog; begin by logging into your Wix account. Then:

  1.  Find the Latest blog posts section of your Home page, and click Create New in the top corner.

    Screen_Shot_2022-02-23_at_12.17.52_PM.png

    Alternatively, you can click Blog in the menu on the left-hand side, then click + Create New Post at the top of the Blog Overview page.

    Screen_Shot_2022-02-23_at_12.20.13_PM.png

    Screen_Shot_2022-02-23_at_12.20.44_PM.png

  2. In the blog editor, add a name using the title field, then click either of the + Add icons.

    Screen_Shot_2022-02-23_at_12.30.33_PM.png

  3. Click on the HTML code option.

    Screen_Shot_2022-02-23_at_12.41.32_PM.png

  4. Make sure the button next to HTML Code is selected, then paste your code into the field provided.

    Screen_Shot_2022-02-23_at_12.43.05_PM.png

  5. Adjust the width and height of the iFrame using the icons at the top of the pop-up, then click Save.

    Screen_Shot_2022-02-23_at_12.47.05_PM.png
  6. Select Save at the top of the website builder (if autosave isn't already turned on), and then click  Publish to send your new blog post live. Now you can direct folks to your blog post to see your campaign!

    Screen_Shot_2022-02-23_at_12.51.11_PM.png

For any issues with adding custom HTML in your Blog Posts, refer to Wix's Adding HTML to a Blog Post help doc.

Bigcommerce

Bigcommerce is similar to Shopify, in that it is used to create e-commerce stores for physical and digital products. You can add a ShortStack campaign to run giveaways and promotions straight from your Bigcommerce storefront.

Bigcommerce allows you to embed your campaign by adding it to a new Web Page or adding the code to a Blog Post.

Web Page

Begin by logging into your Bigcommerce account. Then:

  1. Click on Storefront on the left side menu.

    Screen_Shot_2022-02-18_at_1.00.48_PM.png

  2. We suggest adding a new web page to your storefront to embed your campaign; to do this, click on Web Pages.

    Screen_Shot_2022-02-18_at_1.09.04_PM.png

  3. Click on the Create a Web Page button.

    Screen_Shot_2022-02-18_at_1.11.36_PM.png

  4. In the Create a Web Page screen, under Page Type, select the button next to Contain raw HTML entered in the text area below.

    Screen_Shot_2022-02-18_at_1.14.56_PM.png

  5. In the Web Page Details section, add a name for your page, then paste your ShortStack embed code into the Page Content field.

    Screen_Shot_2022-02-18_at_1.16.05_PM.png

  6. Adjust settings to your liking in the Navigation Menu and Advanced Options sections, then click Save & Exit at the bottom of the screen. Once that's done, you're officially live!

    Screen_Shot_2022-02-18_at_1.20.13_PM.png

For any issues with adding pages to your Storefront, refer to Bigcommerce's Adding Web Pages help doc.

Blog Post

Begin by logging into your Bigcommerce account. Then:

  1. Click on Storefront on the left side menu.

    Screen_Shot_2022-02-18_at_1.00.48_PM.png

  2. To add the embed to your blog, click on Blog.

    Screen_Shot_2022-02-18_at_1.35.07_PM.png

  3. Click on the + button to add a new blog post. (Alternatively, to add the embed code to an existing blog post, click the name of the post.)

    Screen_Shot_2022-02-18_at_1.36.59_PM.png

  4. On the resulting page, click on the source code icon (</>) at the top of the rich text editor.

    Screen_Shot_2022-02-18_at_1.39.31_PM.png

  5. Paste your ShortStack embed code into the darkened code window that appears.

    Screen_Shot_2022-02-18_at_1.41.54_PM.png

  6. Click the source code icon again to return to normal editing mode, and you should see the campaign in your post.

    Screen_Shot_2022-02-18_at_1.43.19_PM.png

  7. Add in any SEO changes in the section below (optional), and then click either Save Draft (if you're planning to go live at a later date), or Publish (if you're wanting to go live immediately). With that, you're good to go!

    Screen_Shot_2022-02-18_at_1.43.53_PM.png

For any issues with adding blog posts to your Storefront, refer to Bigcommerce's Using the Built-In Blog help doc.

 

 

Was this article helpful?