Host script and use it in Webflow

Design help Custom code
1

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?

2

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 Features - jsDelivr

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

6 Likes
3

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.

4

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.

5

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

6

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.

3 Likes
7

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

8

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
9

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

10

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

1 Like
12

Uploading a JS file as a .txt file with type=“text/javascript” doesn’t work for me. Did something change recently that made it stop working?

13

@Juan_Taylor - Check your asset in the browser to make sure it loads. Then review your scripts.

14

I’ve tried many things. The only thing that works is a JS file with this in it.

document.write(“This is an external Javascript Example.!!!”);

var a = “it works”;
console.log(a);

OR just the document.write. So the console.log doesn’t work Unless I have the dcoument.write. Nothing else works. And I don’t need the type=“text/javascript” to make it work.

15

I want to use MixItUp Multifilter. After confirming the standard MixItUp worked, I made a text file out of their JS file (out of the standard MixItUp) and uploaded it to Webflow assets, etc. And even that didn’t work.

16

This works in an external JS file.

for(var i=1; i<=5; i++) {
alert(“Alert” + i)
}

However, it doesn’t work if I put the type=“text/javascript”.

17

Reviewing your console is a good place to go for diagnosing issues.

18

Yes, I’m using console.log. I just noticed that MixItUp Standard as a JS text file uploaded to Webflow assets works, but it only works without type=“text/javascript”. Maybe there’s something wrong with type=“text/javascript”.

1 Like
19

I’m pretty sure on my end type=“text/javascript” stops everything from working. Works fine without but doesn’t work with it.

20

My MixItUp Multifilter JS file as a TXT is now working through Webflow Assets but only leaving out the ‘type=“text/javascript”’.

21

Hello, I tried doing the same. I uploaded my file on GitHub but its showing error, feather not defined, the i commented the line "feather.replace():wink: and the again its showing SmoothScroll is not defined. Can you please help.
https://cdn.jsdelivr.net/gh/ammar26627/newTestMint@main/script_v2.js