Skip to main content

Embed Your Campaign as a Pop-Up on Your Website

This feature available on All Plans (except where noted)

 

Embedding your campaign as a pop-up allows you to display it on your own website, helping you leverage your site’s existing traffic to promote your campaign effectively. This guide will walk you through the steps for embedding your campaign as a pop-up.

Step 1: Publish Your Campaign

  1. When your campaign is ready, click the blue Publish Campaign button in the top-right corner of the Campaign Builder.
  2. In the pop-up, click the blue Embedded on Website button.

Step 2: Enter Your Web Page URL

  1. Enter the URL of your webpage where the campaign will appear.
    • For desktop users, ShortStack will silently redirect from the campaign’s ShortStack-issued URL to the URL you provide.
    • For mobile users, you can also redirect them to this URL.
    • Tip: If your website isn’t optimized for mobile, consider using the Show stand-alone page option in the publication settings.
  2. Click Next once the URL is entered.

Step 3: Customize Your Campaign URL

  • You can now customize the campaign URL:
    • Visitors will only see this URL if they share it or if mobile users are directed to the stand-alone page.
  • For detailed steps on customizing subdomains and domains, refer to our Publishing a Campaign help doc.
    • Note: Customizing the domain (or publishing entirely to a custom domain) is available only on the Pro Plan or higher.
  1. When finished, click Publish.

Step 4: Configure Pop-Up Behavior

Now that your campaign is published as an embed, you need to configure how the pop-up behaves.

  1. Make sure the Pop-up tab is selected.
  2. Open Advanced Settings to view the following behavior options:

Pop-Up Options

  • Pop up on exit intent:

    • Displays the pop-up when a visitor’s cursor moves outside the upper boundary of the page, signaling intent to leave.

  • Pop up after idle timeout:

    • Displays the pop-up after a set period of inactivity (no clicks, touches, or mouse movements).
    • Set the timeout using the Seconds field.

  • Timed pop-up:

    • Displays the pop-up after a specific amount of time.
    • Set the delay using the Seconds field.

  • Pop up on scroll position:

    • Displays the pop-up after the visitor scrolls a certain percentage down the page.
    • Use the % Scrolled from top field to set the scroll threshold.

  • Max Width & Max Height:

    • Set the size of the pop-up using pixel values or percentages.

Step 5: Embed the Pop-Up Code

  1. Once you’ve configured your pop-up’s behavior, click the blue Copy button under Step 1 to copy the embed code.
  2. Paste the copied code into the HTML of the page on your website where you want the pop-up to appear.

Optional: Trigger Pop-Up on Link Click

If you want the pop-up to appear when a visitor clicks a link:

  1. Click the blue Copy button under Step 2 to copy the link-trigger code.
  2. Paste the snippet where you’d like the link to appear on your site.
    • By default, the link text will display as Enter Here. You can edit this text to fit your needs.

Note: If you are using any of the Advanced Settings (exit intent, idle timeout, timed, or scroll-triggered options), you do not need the Step 2 code.

Step 6: Finalize

  1. After embedding the code, click the blue Close button.
  2. Your campaign pop-up is now live on your website!


 

Was this article helpful?