Help integrating Vanta.js

Hello,

I want to add Vanta.js to my site but don’t know how.

I tried importing the javascript files from their CDN and put the code in Custom Code, but it doesn’t work. Could anyone help me implement it please?

you can try create js file and copy paste js code to js file . i think it work

Thanks for the suggestion, I tried that but unfortunately, no luck.

You may need to check and see what else you need to do for this to work. Keep in mind that most js actions won’t show up in the BSS preview, you need to open the browser preview to see it working.

Other than anything else they say you need to do, creating the js file(s) needed should be all you need to do to use it unless it needs specific code in the HTML which you’ll need to create custom code blocks for.

They have instructions on their site of what you need to do to use it, just alter things to accommodate adding it to BSS.

Keep in mind that sometimes you have to manipulate things by uploading them to your server and then using absolute URL’s until you know it works correctly. I have to do this with WowSlider galleries. Then once you know it works you can change the URL’s back to relative and ignore the goofy spacing in the visual previews.

Best answer I can see for something like tihs. Cool effects though, thanks for sharing that :slight_smile:

1 Like

you can do it like this

1 Like

Look here, this will work:

https://codepen.io/ezra_siton/embed/dwLbdb?default-tab=&theme-id=

1 Like

Thanks for the replies everyone, I was able to solve it

Hm, it is working in preview, but not in the live site. Anybody got a clue why?

Make sure you upload all the supporting files.

I am using the free BSS hosting

check import css or js file it sure

The javascript files must be in right order

  1. The three.js/r121/three.min.js
  2. The effect vanta.[[EFFECTNAME]].min.js
  3. Your customized script

I updated my link above, take a look there, it’s on the free BSS hosting

FYI - This script scores 18 (mobile) / 30 (desktop) on Google Page Speed Insights. I would be judicious about using this on your website if page rank matters.

1 Like