Embedding Calculoid.com Calculator Javascript/CSS


Trying to embed a Calculoid.com calculator on an Unbounce page, but the screen ends up blank. When I post same code to an HTML file on a web server it works fine.

Here are the 3 lines of embed code:

What I’ve tried:
-I put the Stylesheet line in the Stylesheets section
-I put the Javascript line in the Javascript section
-I put the div code line as a Custom HTML element

Anything I am doing wrong here?



Hi there - your Unbounce pages are served over a regular http connection, but the scripts loading SSL protected elements. If the embed code tries to render out the actual calculator over https as well, you’ll have mixed content (https content framed into an http page), which Firefox and Chrome won’t display.

Depending on how Calculoid’s site is set-up, it might try to force https, but you could try changing the href and src values to http.



Thanks for that Quinn!

Tried changing the href and src value to http, still blank though.

www.drivetraintech.com/calc is the draft page I’m using if you want to check it. Like you said it might be forcing https so it may not be do-able.



I think I found the problem–it looks like they load a different version of jQuery. If you uncheck the one that’s included in the Javascripts panel in Unbounce it should work (and you can leave the https values for their scripts in tact as well)



It’s working now, thanks a million Quinn!



There was a like error on Calculoid and jQuery switching in the settings really helped. I tried uCalc, there was no such error. This topic helped to understand :slight_smile: