Jump to content

Code Block I-Frame causing Popup

Go to solution Solved by creedon,

Recommended Posts

Run into an interesting situation today and hopefully someone has some ideas on how to fix this.

Have a page with iframe inside a code Block.  Iframe just shows a 2nd page on the site.

Site also has a Marketing Pop-Up running but not on these pages.

Neither page is configure to show the popup and don't on their own. But, when the page shows in the iframe, the popup fires off.

Anyone run into this before ?

Link to comment

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

The reason the pop-up is appearing is you're loading the landing page in through an iframe in a code block from the kiosk page.

If you hit the landing page proper you'll notice that the pop-up doesn't pop.

 

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
19 minutes ago, creedon said:

The reason the pop-up is appearing is you're  loading the landing page in through an iframe in a code block from the kiosk page.

If you hit the landing page proper you'll notice that the pop-up doesn't pop.

 

Because it is a kiosk setup, I need to have that iframe to allow a way back to the main page.

I am going to assume that any iframe causes the popup.

Is there a way via code injection to block the popup?

Link to comment
  • Solution
Posted (edited)
Quote

I am going to assume that any iframe causes the popup.

I suspect this would be the case but I've not dug in to test it deeply.

Add the following to Page Settings > Advanced > Page Header Code Injection for the Kiock page. Please see per-page code injection.

<script>

  // promotional pop-up display stop
  
  let o = { version : 3 };
  
  o = JSON.stringify ( o );
  
  localStorage.setItem ( 'squarespace-popup-overlay', o );
  
  </script>

Note that this code will break when SS updates the version number of the squarespace-popup-overlay key.

Let us know how it goes.

Edited by creedon
version 2

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
7 minutes ago, creedon said:

I suspect this would be the case but I've not dug in to test it deeply.

Add the following to Page Settings > Advanced > Page Header Code Injection for the Kiock page. Please see per-page code injection.

<script>

  // promotional pop-up display stop
  
  const o = { version : 3 };
  
  o = JSON.stringify ( o );
  
  localStorage.setItem ( 'squarespace-popup-overlay', o );
  
  </script>

Note that this code will break when SS updates the version number of the squarespace-popup-overlay key.

Let us know how it goes.

I tried the above code but the popup still triggered.  ??

I do appreciate the effort creedon

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.