Viewing Integrating Code Pen

Integrating Code Pen



User: Les C. 2 months 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 2 months 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 2 months ago

-------------------------------
EverWeb Customer Support
Submit Tickets or Learn More
User: Les C. 2 months 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 2 months ago
User: Les C. 2 months 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
User: Tom D. one month ago
For adding HTML, CSS, and JS code snippets to an EverWeb site, you'll use different methods depending on the type of code.

HTML snippets go into the HTML Snippet Widget in your page's body. CSS code is placed within <style> tags in the "Head Code" section under "File" > "Edit Publishing Settings."

java script usually goes in the "Footer Code" unless it interacts with external APIs, then it should be in the "Head Code."

Hope this helps!
User: Les C. one month ago
-- Tom,

Thanks.
LC


Post Reply
You must login or signup to post.