Issues embedding HTML (Unbounce and WebinarJam)

  • 10 August 2016
  • 8 replies
  • 91 views
O

Hi good people

I was building a landing page and tried integrating webinarjam.com registration button. However, ran into a few issues. I contacted their support team and it seems that the code is proper, so the issues is probably on the unbounce.

I wanted to ask you to take a look into this, coding isn’t my forte and I’m sure I’m missing something.

Option 1 - http://unbouncepages.com/webinartisha/

In the first case I add a code through “embed html” widget and it shows me this “the HTML block is invalid …” img. #1 When publishing the page and clicking on the register button the pop-up window is crippled. (img #2)

Option 2 - http://unbouncepages.com/code2/ 

In this case I added the same embed code both in “embed html” widget and “stylesheets” and now the form works properly but I get the button doubled on the top of the page. (img 3)
I’m sure there’s a solution for this and I would really appreciate if you could help me out. Integrating webinarjam and unbounce is a very powerful tool.

8 replies

Zane

I might make it easier for everyone if you posted your code here. Thanks! 

O

Update. Here’s thecode

http://pastebin.com/v4zp8RWw

Hristian
Userlevel 7
Badge +3

Hi Oleksandr, 

The HTML block element you use from the Unbounce builder has it’s own size (height/width). 

Just play around with it a bit to find the size that would open up your whole registration popup. 

Here is a preview link of your registration form with properly resized HTML element. 

http://unbouncepages.com/webinarjam_test/

Best,
Hristian

P.S. The example above has the following dimensions: 940x440. It seems that the actual popup content is responsive so you have an option to increase the height and lower the width.

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
O

Hey Hristian
Thanks for this!
Also there seems to be an issue if you place the button closer to the edge of the section it blocks the ability to scroll, meaning you would need to place the CTA on the top of the page, which doesn’t always correspond to the design

Hristian
Userlevel 7
Badge +3

Hi Oleksandr, 

No coding skills required to adjust the size of the HTML element. You just 1) Select the HTML element and 2) Adjust the size (screenshot attached).

![](https://d2r1vs3d9006ap.cloudfront.net/s3_images/1464903/RackMultipart20160811-130198-107pd02-Edit A - webinarjam_test inline.png?1470940175 “Image: https://d2r1vs3d9006ap.cloudfront.net/s3_images/1464903/RackMultipart20160811-130198-107pd02-Edit__A__-__webinarjam_test__inline.png?1470940175”)

I’m not sure about the button blocking the page scroll. It shouldn’t do it in theory but at the same time it’s not a native Unbounce button so that can always create problems. 

Your best bet is to use a native Unbounce button to trigger the popup but you would have to get into the code and adjust it to trigger the sign-up form. 

Alternatively, you might want to look into using a native Unbounce form to capture the necessary information and pass it on to Webinarjam through a webhook. 

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
O

Thanks mate. Yeah, I sorted the dimensions issue, I appreciate your help!
I reached out to webinajam if they can look into the scrolling thing as it is triggered externally in this case. 

The whole beauty of embedding that button was that people subscribe with minimal amount of actions and then they are fed into webinajam auto-emailer. Very convenient, minimal efforts on both sides. 

Hopefully webinar jam cats can help. I’ll post an update here.

THANKS!

Alex

J

I’m having the same issue as well. I’m trying to create a test drop down nav. Any help is appreciated! I feel like I know enough development to be dangerous!

Here is the code I included in the custom html editor:

http://pastebin.com/XrdmvSn7

Nicholas
Userlevel 7
Badge +4

Hi Jennifer,

Not sure if you’re asking about just drop-down menus in general or if this is related to WebinarJam and I missed it (as the posts above are in reference to WebinarJam).

Anyway, for drop-down menu help, this post might be helpful: Building drop-down header menus tutorial

Regards,

Subscribe to Growth Marketing Weekly → https://growthmarketer.co/newsletter

Reply


Terms & ConditionsCookie settings