[ad_1]
I want to embed this decision tree element into a page. I tried pasting just the html but it looks like crap. Admittedly, I don’t have a lot of experience with JavaScript, I tried pasting the code in the header and footer but that didn’t seem to work. Any advice?
Thanks
[ad_2]
I would skip past the “make sure you’re on the .org WP install, because the .com will limit you on what works inside the Custom HTML block”.
Now, from what I see on the Pen, you’re using Tailwind. But nowhere in the “pasted code” (HTML box, JS Box) you’re referencing to it. If you add it to the code you’re using, you should be good to go.
Simply add to the custom html block this:
`<script src=”https://cdn.tailwindcss.com”></script>`*
And you’ll be set… on the CSS part.
For JS I see you’re using Babel, I’m not entirely sure if CodePen does some magic on the processing side, but you should definitely try to look for the Compiled version in order to be closer to a working version inside a WordPress page/post.
To end this, you may want to consider if you’re going to use it more than once, to turn it into a plugin and use it as a block or shortcode. That way you add the CSS and JS properly to the loop.
*EDIT: Adding this to a Live/production site is not recommended though.
I would look at a way to explain the product or service without hardcoding your html and js first. Maybe it could be explained with graphics and copy?
Could make it easier, especially for editing in the future.
Could be some sort of menu or sidebar on the page that scrolls to each section.
Maybe “HTML Bookmarks with ID and Links” could a good place to start. Good luck big dog