Streaming live at 10am (PST)

Embed simple javascript code

#1

Hi,

I want to put this code in my page:

I tried copy pasting the above into the footer on the specific page, the footer in project settings and embedded code element on the page. Also combined these 3 ways.
It doesn’t show on the published site.

How can I make it work?
Best regards

#2

Very general Q. What code? You get errors? Jquery (Y/N)?

Please Add live URL + Read only link + The code/idea you want to add.

#3

Hi Siton_Systems,

Thank you for your answer and willingness to help :slight_smile:
Sorry, somehow the code disappeared while copy pasting it. It’s:
<script src=“https://www.w3schools.com/js/myScript1.js”></script>

(This code is just a first simple try. Eventually I want to add a network graph like these: link )

I’ve put the code in these 3 places:

  1. in page settings > custom code under Before </body> tag
  2. in the project settings > custom code under footer code
  3. in embedded code block on the page

Problem: It doesn’t show on published site.

Live url:
https://gijss-first-project-47cd67.webflow.io/

This is the preview link:
https://preview.webflow.com/preview/gijss-first-project-47cd67?utm_source=gijss-first-project-47cd67&preview=e07bd58cf91ae49ef42ea0cb1bf988b1

Best regards

#4

If you want to show us your code please use preformatted text option from the toolbar of the message window. Here it is.

1 Like
#5

Hi Dram,

Thank you for your answer.
I am a little confused by it because I thought the <script code i posted earlier is the code (I got it from the www3 tutorial page).
But I assume it’s not, so I deleted it.

Let me rephrase my question:
I found a visual effect and code that i want to use in my website.
It’s this one:

On that page it shows tree boxes with code: html, css and js.

None of them seem familiar to me for embedding code. I tried copy pasting the html in embed code box and in page settings custom code before body tag, but it shows no visuals.

Can you help me how to get this code onto my website so the visuals will show?

Best regards, Gijs

#6

back-ticks

Another way (Also work on slack and a lot of chat softwares)

Inline `code` has `back-ticks around` it.

Blocks of code are either fenced by lines with three back-ticks `````

<h1>Wrap code</h1>

markdown code:

https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code

1 Like
#7

Try this:

And this:

Also read Particles.js docs.

codepen

In general codepen to webflow:

The html box (You should create this structure by webflow site tree) and add classes and #id like the example you find
The CSS box - you should add the CSS (copy paste) and wrap with <style></style> + If the “box” is sccs (SASS) you should first use [SCSS to CSS Compiler] (https://www.cssportal.com/scss-to-css/) - (Or create the same styles/ideas by webflow CSS).
The JS box - copy paste before body and wrap with <script>/*code her*/</script> tag

External resources JS -or- CSS:
image

wrap with script and src - example:

<script src="https://cldup.com/S6Ptkwu_qA.js"></script>

For the CSS the same idea but other syntax:
image

image

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">

https://www.w3schools.com/html/html_css.asp

Always put the src “before” the code you copy-paste from the JS-box (The asset should load first) + Do not load jquery (Webflow already load this libary)

1 Like
#8

Hi Siton_Systems,

Thank you very much for your answers!! :slight_smile:

I am going to try it this week and I’ll let you know if it worked.

Best regards, Gijs