How to integrate custom code (HTML, CSS, JS) from for example codepen?

I Need Help
1

I’m looking for the steps needed to integrate custom code (HTML, CSS, JS), for example this Read More-button code from codepen

What I’ve tried:

  • copying the CSS code into the page header (contained inside <style> </style>)
  • copying the JS code into the page footer (contained inside (<script> </script>)
  • copying the HTML code into the a code widget

I get the button showing, the custom colors appearing, but the button doesn’t work.

3

That’s great @Jerry!

I’m also wondering how to generally import external CSS/JS/HTML code to Blocs from other codepen projects?

5

If your project is set to Bootstrap 5 that code won’t work because it’s jquery not pure JavaScript. Bootstrap 5 no longer needs the dependency, which is a good thing as it’s less overhead on your site. Just something you need to be aware of.

1 Like
6
8

Great, thanks for explaining that!