Using a javascript on my site

Community resources
1

Hi guys

Sorry if this is a bit of a newbie question, relatively new to custom code but very experienced on webflow.

I’d like to use this script on my website on every page https://auz.github.io/Bug/ but am unsure how to implement this on my site.

Is there a zip file that needs to be downloaded? And if so how can it be uploaded to webflow and referenced in the code?

Thanks so much
M

2

Please read about adding custom code here

1 Like
3

Thanks Abirana – I know how to implement custom code onto my sites generally.

For some reason for the “Screen Bugs” script it won’t show when I put the code into my header.

Thanks
M

4

Hi @Max_Saward,

It wasn’t clear to me that you were talking about that specific implementation. So I thought you just had a general HowTo question, but however way is that same.

When using third party addons, usually you get files and scripts(like .js) from them and you place in your website and some may provide you link to their CDN link.

In Webflow we do same thing; we upload media files on Assets and for scripts you places them on Custom code fields. Since for custom code you get input fields, you should know that you can copy paste those JS scripts there. You may also know that JS code should be wrapped around <script></script>

So Bugs That Walk and Fly around your page does allow you to download their files, you can get theirs bug-min.js file and copy/paste in your project.

For your Screen Bugs implementation I’ve tried one myself please check it here.
https://preview.webflow.com/preview/works-by-abi-rana?utm_medium=preview_link&utm_source=designer&utm_content=works-by-abi-rana&preview=99307feaacf6400cb1a00030a85319d1&workflow=preview

There is not much to see here because JS is implemented on the Project settings. So check the live link here https://works-by-abi-rana.webflow.io/, you can check the source code in the browser.

So what I did was:

  • Copy/paste bug-min.js code in the Project settings > Custom code
  • Upload those to images provided with the source (fly-sprite.png and spider-sprite.png)
  • And at last you should initiate the function like below, this should be below the bug-min.js code
new BugController({
  imageSprite: 'path/to/fly-sprite.png'
});

new SpiderController({
  imageSprite: 'path/to/spider-sprite.png'
});

I hope this helps.