Webflow custom code

custom.html

<!-- remodal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.0/remodal.min.js"></script>

<!-- remodal - youtube API -->
<script>
 var tag = document.createElement("script");
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;

  function onYouTubeIframeAPIReady() {
    player = new YT.Player("player", {
      height: "100%",
      width: "100%",
      videoId: "tRJtkJ-Why0",
      playerVars: {
        autoplay: 1,
        mute: 0,
        controls: 1,
        info: 0,
        showinfo: 0,
        rel: 0,
        modestbranding: 1,
        wmode: "transparent"
      },
      events: {
        onReady: onPlayerReady,
        onStateChange: onPlayerStateChange
      }
    });
  }
  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    // event.target.playVideo();  
  }
  // 5. The API calls this function when the player's state changes.
  var done = false;

  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      done = true;
    }
  }

  function stopVideo() {
    player.stopVideo();
  }
  // remodal events //
  $(document).on("opening", ".remodal", function() {
    player.playVideo();
  });
  $(document).on("closing", ".remodal", function(e) {
    player.stopVideo();
  });
</script>

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

<!-- Getting The URL Parameter | June 2019 -->
<script>
function getAllUrlParams(url) {
  // get query string from url (optional) or window
  var queryString = url ? url.split('?')[1] : window.location.search.slice(1);

  // we'll store the parameters here
  var obj = {};

  // if query string exists
  if (queryString) {
  
    // stuff after # is not part of query string, so get rid of it
    queryString = queryString.split('#')[0];

    // split our query string into its component parts
    var arr = queryString.split('&');

    for (var i = 0; i < arr.length; i++) {
      // separate the keys and the values
      var a = arr[i].split('=');

      // set parameter name and value (use 'true' if empty)
      var paramName = a[0];
      var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];

      // (optional) keep case consistent
      paramName = paramName.toLowerCase();
      if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();

      // if the paramName ends with square brackets, e.g. colors[] or colors[2]
      if (paramName.match(/\[(\d+)?\]$/)) {

        // create key if it doesn't exist
        var key = paramName.replace(/\[(\d+)?\]/, '');
        if (!obj[key]) obj[key] = [];

        // if it's an indexed array e.g. colors[2]
        if (paramName.match(/\[\d+\]$/)) {
          // get the index value and add the entry at the appropriate position
          var index = /\[(\d+)\]/.exec(paramName)[1];
          obj[key][index] = paramValue;
        } else {
          // otherwise add the value to the end of the array
          obj[key].push(paramValue);
        }
      } else {
        // we're dealing with a string
        if (!obj[paramName]) {
          // if it doesn't exist, create property
          obj[paramName] = paramValue;
        } else if (obj[paramName] && typeof obj[paramName] === 'string'){
          // if property does exist and it's a string, convert it to an array
          obj[paramName] = [obj[paramName]];
          obj[paramName].push(paramValue);
        } else {
          // otherwise add the property
          obj[paramName].push(paramValue);
        }
      }
    }
  }

  return obj;
}
</script>

<!-- set cookies -->
<script>
	
var getAllUrlParams = getAllUrlParams();
var docReferrer = document.referrer;
	
if (!jQuery.isEmptyObject(getAllUrlParams) || docReferrer) {
  const currentLead = {
    parameters: getAllUrlParams,
    referrer: docReferrer
  }

  setNewLead(currentLead)
}

function setNewLead(newLead) {
  const cookieExist = Cookies.get('lead') ? JSON.parse(Cookies.get('lead')) : {};
  
  // Keep old values if they exist. If old values do not exist, use new values.
  const parameters = jQuery.isEmptyObject(cookieExist.parameters) ? newLead.parameters : cookieExist.parameters;
  const referrer = cookieExist.referrer || oldLead.referrer;

  const lead = {
    parameters: parameters,
    referrer: referrer
  };	
  
  Cookies.set('lead', lead, { expires: 365 }, {domain:'.joinupvoice.com'});
}
	
</script>

<!-- 2/2 -- TypeJS -->
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>
<style>
.typed-cursor {
  opacity:0.6; 
}
</style>

<script>
var typed = new Typed("#typed", {
    strings: ["", 
    "<span style='background:#3b5998; color:white;'>Facebook!</span>", 
    "<span style='background:#FF0000; color:white;'>YouTube!</span>  ", 
    "<span style='background:#FF9900; color:white;'>Amazon!</span>  ", 
    "<span style='background:#4875B4; color:white;'>LinkedIn!</span>  ", 
    ],
    typeSpeed: 100,
    loop: true,
    backSpeed: 40,
  });
</script>

<!-- particles JS -->
<style> 
#hero {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 100px;
  left: 20%;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>

<script>
  /* ---- particles.js config ---- */

particlesJS("hero", {
  "particles": {
    "number": {
      "value": 50,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 3
      },
    },
    "opacity": {
      "value": 0.9,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 4,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 22,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 60,
      "color": "#fff",
      "opacity": 0.3,
      "width": 2
    },
    "move": {
      "enable": true,
      "speed": 5,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "grab"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 140,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 4,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
});

</script>