Make Custom Code SSL Server Compatible

Design help Custom code
#1

Hello good folks -

The below code snippet is creating a mixed content error in my webflow site, because the code does not load properly on an SSL server. It should show up in the hero section as floating particles and lines. Does anyone know how to add an SSL layer to the code to make it work properly (as seen here on a non-SSL server)? See header and body section code.

Thanks for any help!

Here is my read-only link: https://preview.webflow.com/preview/luca-hq?preview=de528de869118acafdd8f44aa7949ed8

Here is the code in the header:

body { margin: 0; font:normal 100% Arial, Helvetica, sans-serif; } canvas { display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ #particles-js { position: absolute; width: 100%; height: 100%; background-color: #252a2d; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; z-index: -1; } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; visibility: hidden; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }

Here is the code in the body:

#2

The particle script needs to be included over HTTPS.

use:
https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js

instead of:
http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js

#3

Thanks! So, what change do I need to make with the above https variation? (non-coder here)

#4

You have an element called html embed. Pick this in the Navigator, then switch to the Settings tab. Under Embed Settings, there is an Open Code Editor button. Click this, it will open a window that gives you a place to change it.

1 Like
#5

Thanks! That solved it.

1 Like