CMS Development

EAmoroso
Contributor

Javascript and HTML lightbox functions in Sandbox and not Production

SOLVE

We are building a landing page for a video sales funnel. We need a button on the page that, when clicked, a lightbox pops up with a multistep formstack form embedded within. Testing in our sandbox account worls well, however, when we rebuilt the page in production and moved the code over exactly as it was, the button will not open the lightbox. We are using the standard growth theme and hiding the header and footer with:

<style>
header, footer {display:none;}
</style>

Sandbox page: https://40053281.hs-sites.com/schedule-a-call-0

production page: https://39764862.hs-sites.com/vsl-o

On the page builder, in settings > advanced, we added the following header code:

<!-- Begin Lightbox -->
<div id="fsLightbox5431498" class="fsLightbox" style="display:none;">
<div align="right" style="padding-bottom:5px;">
<a id="fsLightboxClose5431498" href="#" title="close"><img src="https://newlawbusinessmodel.formstack.com/forms/images/2/cross.gif" border="0" /></a>
</div>
<div id="fsLightboxContent5431498" style="height:80%; width:60%; padding-top:0px; overflow:auto;">
<script type="text/javascript" src="https://newlawbusinessmodel.formstack.com/forms/js.php/vsl_bac"></script>
<div style="text-align:right; font-size:x-small;"><a href="http://www.formstack.com?utm_source=jsembed&utm_medium=product&utm_campaign=product+branding&fa=h,54..." title="Powered by Formstack">Powered by Formstack</a></div>
</div>
</div>
<script type="text/javascript" src="https://newlawbusinessmodel.formstack.com/forms/js/lightbox.js"></script>

In the rich text module, the source code for the button and lightbox is the following:

<p style="text-align: center;"><button id="light-box_link" style="background-color: #00aea9; color: #fff; padding: 20px 50px; border: none; border-radius: 5px; cursor: pointer; display: block; margin: 0 auto; font-weight: bold; font-size: 24px;" onclick="javascript&colon;fsLightbox5431498.show()" fdprocessedid="jigd5e"> <strong>Book Your Call Now!</strong> </button></p>

 

Has anyone run into this before, any help is greatly appreciated.

0 Upvotes
1 Accepted solution
Jnix284
Solution
Hall of Famer

Javascript and HTML lightbox functions in Sandbox and not Production

SOLVE

Hi @EAmoroso I think it might just be a debug/cache issue, both links and pop-ups work for me 🙂

 

I recommend using this unofficial chrome extension for HubSpot Developers that include the parameters for Debug and Cache Buster so you can quickly check whether the issue persists before spending a lot of time troubleshooting.

 


If my reply answered your question please mark it as a solution to make it easier for others to find.


Jennifer Nixon

View solution in original post

2 Replies 2
Jnix284
Solution
Hall of Famer

Javascript and HTML lightbox functions in Sandbox and not Production

SOLVE

Hi @EAmoroso I think it might just be a debug/cache issue, both links and pop-ups work for me 🙂

 

I recommend using this unofficial chrome extension for HubSpot Developers that include the parameters for Debug and Cache Buster so you can quickly check whether the issue persists before spending a lot of time troubleshooting.

 


If my reply answered your question please mark it as a solution to make it easier for others to find.


Jennifer Nixon
Jaycee_Lewis
Community Manager
Community Manager

Javascript and HTML lightbox functions in Sandbox and not Production

SOLVE

Hi, @EAmoroso 👋 Thanks for your post. Adding your code samples as well as the preview links helps our community to understand the issue. 

 

I'd like to invite some of our community members to the conversation — hey @Jnix284 @coldrickjack @ankitparmar09 have you built out anything like this recently?

 

Thank you for taking a look! — Jaycee


HubSpot’s AI-powered customer agent resolves up to 50% of customer queries instantly, with some customers reaching up to 90% resolution rates.
Learn More.


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !