Adding a Popup or Banner to your website

Last Modified on 05/09/2024 7:49 am EDT

Adding a Pagecloud Popup to your website just takes 1 line of code! Follow the steps below to easily embed your popup or banner on your web page. 

If you are using a Pagecloud website you do not need to follow the steps in this article. Your popup or banner will be published directly to your site. Configure your display pages in Setup.

Find your embed code 

Once you've created your popup, you will need find your popup embed code to add your website <head>: 

  1. Login to your Pagecloud account 
  2. Open your popup project 
  3. Click on Embed code in your left toolbar 
  4. Copy to your clipboard

Now you're ready to paste your popup or banner embed code into your website! 


Adding your popup to your website

You can embed your popup or banner on any website! Find your website builder below or use Google Tag Manager.

Squarespace

Adding your popup embed code to all the pages on your Squarespace website allows you to configure all your popups and banners directly from your Pagecloud setup. This makes it easier to manage your popups and banners. 

To add your popup embed code to all pages of your Squarespace website:

  1. Copy your Pagecloud Popup embed code 
  2. Use the code injection feature to add at the code in your websites head or end of body. 

Now you can select which pages you want your banner or popup to appear on from your popup setup in Pagecloud. Publish your popup or banner to view it on your live site.

Adding the popup code to an individual page(s) on your Squarespace website

If you add a popup embed code to an individual page on your Squarespace website, you must configure each page on Squarespace and on Pagecloud for your banner or popup to appear

  1. Copy your Pagecloud Popup embed code
  2. Use the per page code injection feature to add the code to the specific Squarespace page.

Now in your popup setup, select the page(s) pages you want your banner or popup to appear. Make sure these pages match your Squarespace pages with the embed code. Publish your popup to view live.

Wix 

To add your popup or banner to your Wix website: 

  1. Copy your Pagecloud Popup embed code
  2. Go to Settings in your Wix site's dashboard
  3. Click the Custom Code tab in the Advanced section
  4. Click + Add Custom Code at the top right 
  5. Paste the code snippet into the box
  6. Enter a name for your code. Tip: Give it a name that is easy to recognize so you can identify it later.
  7. Select an options under Add Code to Pages: 

- All pages: This adds the code all of your site's pages, including any new pages that you create in the future. Choose whether to load the code only once per visit, or on each page your visitor opens. 

- Choose specific pages: Use the drop-down menu to select the relevant pages 

Under Place Code in, you can choose where you want to place your code. We recommend placing the code at the end of the <Head> tag.

Webflow

Adding your popup embed code to all the pages on your Webflow website allows you to configure all your popups and banners directly from your Pagecloud setup. This makes it easier to manage your popups and banners. 

  1. Copy your Pagecloud Popup embed code
  2. Use the custom code feature to add at the code in your websites head or end of body(footer).  

Now you can select which pages you want your banner or popup to appear on from your popup setup in Pagecloud. Publish your popup or banner to view it on your live site.

Adding the popup code to an individual page(s) on your Webflow Website

If you add a popup embed code to an individual page on your Webflow website, you must configure each page on Webflow and on Pagecloud for your banner or popup to appear.

  1. Copy your Pagecloud Popup embed code
  2. Use the custom code feature to add the custom code directly to a page or pages on your Webflow website. You may add code at the head or the end of the body(footer) of the page. 

Now in your popup setup, select the page(s) pages you want your banner or popup to appear. Make sure these pages match your Webflow pages with the embed code. Publish your popup to view live. 

Framer

Framer provides several options for adding scripts to a webpage. You can apply the script to a specific page or to all pages on your site.

If you add it to all pages, you can manage the appearance of your banner or popup on specific pages using your Pagecloud dashboard.

  1. Copy your Pagecloud Popup embed code
  2. Use the custom code feature on Framer to add code to the end of the head tag or end of body tag (these are the preferred option). See framers tutorial on how to do this.

Wordpress

  1. Copy your Pagecloud Popups embed code
  2. Download and activate the free Insert Headers and Footers plugin by WPCode.
  3. On the left side of your dashboard, go to Code Snippets → Header & Footer.
  4. Paste the code into the Header box and click the "Save Changes" button.

Paste the code into your site header and save your changes

Google Tag Manager

1. Set up Google Tag Manager 

First, make sure you have Google Tag Manager installed on your website. You should have the GTM container snippet added to your website, ideally right after the opening <head> tag. 

2. Create a new tag 

In your GTM dashboard: 

  1. Go to the workspace where you want to add the tag
  2. Click the Tags on the left-hand side menu and then click New to create a new tag 

3. Configure the Tag 

  1. Choose the tag type by clicking on Tag Configuration. Select Custom HTML to add your custom script. 
  2. Paste your script into the HTML text area.

4. Set up triggering

  1. Click on Triggering and se the tag to trigger on All Pages. This ensures the script runs on every page load. 
  2. Choose the All Pages trigger if it's already available, or create a new trigger that fires on all pages by selecting Page View -> All Pages Views.

5. Save and test your tag

  1. Click Save to save your tag
  2. Use the Preview mode to test your tag on your site. This mode allows you to see what tags are firing and when, without affecting real users. 

6. Publish your changes 

Once you're satisfied that the script is working correctly in preview mode, go back to the GTM dashboard and submit a Publish to make your changes live. 

This will add your script to the <head> of every page on your site, as controlled by the Google Tag Manager.

User Icon

Thank you for your feedback!

Was this article helpful?
Thank you for your feedback!