Code pen to unbounce

  • 10 April 2018
  • 4 replies
  • 60 views
C

Hi im trying to add these two codepens to my landing page
(currently sorting the domain, so cant show a link atm)

But when i add the code with the correct open and close tags its still showing nothing ? or it shows a little bit of the codepens ive added

4 replies

Kyle.C
Userlevel 5

Hey there,

So I will say first that it is always better to test custom scripts on a live url rather than the preview option. While everything should work, sometimes it doesn’t and that would be an easy issue to rule out.

But I do have some follow up questions about the codepens you are implementing:

  1. Are you adding each step from codepen in the same format in unbounce?
  • add custom html to page (insert codepen html)
  • add codepen css to unbounce css option
  • add codepen script to unbounce script option
  1. Have you tried them individually?
    Just one codepen example on a page, instead of both. I wonder if their scripts are competing against each other.

It would be great to see your live page, that will help the inspection process when using custom scripts. Maybe when your domain is active we can work on it more confidently.

C

Hi kyle,

http://unbouncepages.com/legal-sector/

i put it on the unbounce generic domain so i could get some help, something did show this time but still not the result i needed. I have only put one chart on, and i put the uncompiled HTML ,CSS and JS from codepen into the correct places

Thanks

Kyle.C
Userlevel 5

Okay perfect,

I see the chart you have added and there are 2 errors with the script that will need to be resolved.

<script src=“path/to/chartjs/dist/Chart.js”>

var myChart = new Chart(ctx, {...}); </script>

That source is not a valid URL, and needs the https://blah-blah. Also, the {…} is undefined and you will need to replace the “…” ellipses with the proper name (maybe it’s supposed to be myLineChart). Or just remove it, if it is not needed.

Give that a shot and let me know if it works!

Joe_Savitch

Make sure you turn off the less compressor in your pen before you copy/paste. Also make sure to add the <script> tags and the <style> tags to the code when you put it in the javascript and css editors in UB respectively.

I tried to publish and got an error in your javascript that one of the variables was not defined. Other than that you should be good to go.

Reply


Terms & ConditionsCookie settings