Cookie management and user redirection on page load

Custom code

Integrations

Potential solutions

Use custom code + Webflow forms

Dependencies

Webflow
Custom JavaScript

‍

All code shared in this doc is shared under the MIT License which is in full at the end of this document.

‍

The customer shared this example that appears on page load:

‍

‍

I think we could classify this as an overlay and this and the form could be built natively inside of Webflow.

Step one, build the overlay

Build the overlay and the form natively inside of Webflow. Hide or remove the submit button. For your three options in the select field the values assigned to them should be borrower, international, and investor.

Step two, add your custom code

Add some code to ensure the form never submits.

‍

Webflow.push(function () {
  $("form").submit(function () {
    return false;
  });
});

‍

Also, add some code that runs when the select element changes.

‍

const selectElement = document.querySelector(".select");
const expiryDate = new Date();
expiryDate.setMonth(expiryDate.getMonth() + 6);

selectElement.onchange = function () {
  let selectedValue = this.value;
  if (selectedValue === "borrower") {
    document.getElementById("overlay").style.display = "none";
    document.cookie = "overlay=1; expires=" + expiryDate.toUTCString();
    set;
  } else if (selectedValue === "international") {
    window.location.href = "https://domain.com/target-page";
    document.cookie = "overlay=2; expires=" + expiryDate.toUTCString();
    set;
  } else if (selectedValue === "investor") {
    window.location.href = "https://www.sub.domain.com/";
    document.cookie = "overlay=3; expires=" + expiryDate.toUTCString();
    set;
  }
};

‍

All of this code would go in the before body section inside script tags. You would need to modify this to fit your use case since this is a generic example.

‍

But, this code closes the overlay if they select option one which lets them continue on. You would also set a cookie in this step. The other two options would redirect to whichever location you set.

‍

You would also need to add some code not included here which runs on page load and checks whether the cookie is set before running all of this. That code would check for cookies and depending on the cookie route you to the right page and/or show the overlay if they've purged cache or cookies or if the cookie expires.

‍

You can customize all of this according to your needs.

SEO Impacts

The additional question was around the impact this would have on SEO. We would recommend talking to your SEO experts on this topic, but this article may be helpful in providing guidance:

‍

https://moz.com/blog/popups-seo-whiteboard-friday

‍

The TLDR; is that it can have impacts depending on a number of factors, but it’s worth consulting your SEO experts to evaluate your specific use case.

MIT License for all code shared in doc

‍

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

‍

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

‍

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.