Viewing Integrating Code Pen

Integrating Code Pen



User: Les C. 21 days ago
Can anyone take me through the process of adding separate snippets of html, CSS and JS code to an EW site?

This would include how to tag it and where to place it, i.e., html snippet, header, and/or footer, as well as any other code needed like sourcing the JS code.

Thanks,
LC
User: EverWeb Support 21 days ago
Hello Les,

This would depend on the code that you are trying to add.

For example, if you have a piece of code that is HTML code that has to be displayed in a particular part of your site (footer, header, or in a particular position in the page), you would use the HTML Snippet Widget.

Now, if you wanted to add CSS to your page, you would do so in the "Head Code" by going to "File" > "Edit Publishing Settings" with your project open.

You would have to wrap this CSS rules in a <style> tag, for example:

<style>

#hero-image {
width: 100%;
}

</style>

If you needed to add a script to it that interacts with the HTML code, you would best put it in the "Footer Code" under Site Publishing Settings.

If this script, however, needs to interact with some outside API/SDK such as Paypal, Stripe, etc. you should put it in the Head Code instead.

Please let us know if you have any further questions.

Last edit 21 days ago

-------------------------------
EverWeb Customer Support
Submit Tickets or Learn More
User: Les C. 21 days ago
--EW

Thanks for getting back. So on this page:
https://codepen.io/heiko_de/pen/NWqMBpb

I would cut and paste the html text (as is and without any changes) into an html snippet in the body of a page.

Next, I cut and paste the CSS code adding the starting and ending style tags and place it into the page's Head Code section.

Where does the JS code go—into the page's Footer Code section? Do I need to add tags? Do I need to provide a link to where it has to source the JS code?

Thanks,
LC

Last edit 21 days ago
User: Les C. 21 days ago
It's my understanding that this code needs to be added to the html snippet at the bottom to access the JS code:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dat.gui"></script>

Still waiting on an answer to my previous question along with anything else I need to do.

Thanks,
LC


Post Reply
You must login or signup to post.