Streaming live at 10am (PST)

Host script and use it in Webflow

Hi!

How do you host a javascript so you can use it in Webflow? I tried using Github following the tutorial I found here on the forum but they seem to have changed/shut down. Could anyone help out?

You can:

  • Upload a JS file as a .txt file in assets then load it with a type="text/javascript" attribute added.

  • Use a CDN like jsdelivr that allows for github assets to be called via the cdn. See https://www.jsdelivr.com/features

  • Use a hosting platform or any other CDN to serve the resource.

4 Likes

Hi webdev, I am not as technical as you are and don’t know how to make it happen with the instructions you left. Can you please elaborate on how to use code that has over 10,000 characters? Thanks in advance.

Can you link to the code source so I can better advise? If it’s on Github there’s a simple way and I can prepare a code for you that you’ll just need to paste in Webflow.

Hi Vako, thanks for your feedback. Basically, I am looking to implement a code taken from Codepen. The problem is that the JS code is more than 10,000 characters long. Here is the link: https://codepen.io/sanprieto/pen/XWNjBdb

UPDATE: OK, this version is now correct.

I’ve uploaded the JS code externally. You can load it using this code:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r125/three.min.js" ></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/VolkerShmuley/interactive-particles/script.js"></script>

Paste this code in the body tag of the page.

Then you’ll need to copy the remaining HTML and CSS snippets from the codepen. HTML should go inside the custom code embed element.

CSS should go in the head tag using the previous page settings method. You’ll need to wrap the CSS between these tags:

<style>
 /* CSS code goes here */
</style>

I tried it. It works.

Hi Vako, Thanks for your help, it worked! Can you please share how you exported the code? Thanks in advance.

There are two steps:

  1. You need to create a project on Github and upload the code there. Each file will have a public URL.
  2. Then you need to modify that public URL like this and they’ll be ready to be loaded through JSdelivr’s CDN.
1 Like

Tried your first advice, after uploading txt file with some styles, webflow replaced all semicolons with dash. Is that normal?

We are discussing the hosting of JavaScript in this topic. Are you trying to use a text file for CSS styles?