Webflow Joe

F'in Sweet Webflow Hacks

Set a Cookie on your webflow site

What can this be used for?

This is a Hack that will unlock a lot of custom functionality for your Webflow site. There are hundreds of different use cases for using cookies on your website. Here's a list of Hacks we've released that use cookies!

  • Gated content user login experience
  • Use a GIF as a loading/intro screen
  • Initiate/disable a Webflow interaction with cookies
  • Submit cookie data through a hidden field on your Webflow form

With this post alone, you can't do anything specific. This is an overview of how to set cookies based on a user's website activity. It will also help you understand why you may want to use a custom cookie setup on your website. Understanding this will make our cookie-based Webflow Hacks more clear.

Work with cookies in the easiest way possible

Add the js cookies library to your website

This library makes cookie use more simple with jquery methods to start rocking out with cookies

Github page: https://github.com/js-cookie/js-cookie

CDN: https://www.jsdelivr.com/package/npm/js-cookie

To get started, add this line of your code to your website's <head></head>

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

Example 1

Set a cookie when a user loads a certain page on your website

Why would we want to do this?

Let's say you want to start identifying who users on your site are and what they are interested in. If you have two services and this user is continuously visiting pages for Service 2, we can assume they're interested in Service 2. We can now show them different messaging/page elements based on their interest.

What the heck does that mean?

Let's learn by going step by step through the code

EXPLANATION

Example 2

Set a cookie when a user clicks a certain button

Why would we want to do this?

Let's imagine you're building a HR Recruiting company website. In your header, you have two buttons - "I'm an Employer" and "I'm a Candidate". If they click one or the other, we can start treating them differently on the website.

What the heck does that mean?

Let's learn by going step by step through the code

EXPLANATION

Example 3

Set a cookie when a user had loaded a certain amount of pages on your site

Why would we want to do this?

If someone has loaded 20 pages on your website, you can bet they're interested in your product. We can know if they do this with cookies! Email capture popups are a pain in the ass. We feel a little more comfortable showing this type of popup with a super interested visitor.

What the heck does that mean?

Let's learn by going step by step through the code

EXPLANATION

Nice! You're done.

Interested in more f'in sweet Webflow hacks?

Get an alert when we post a new one.
We have 20 posts scheduled to send throughout the next 3 months.

Nice! We'll let you know when a new hack is available.
Something went wrong while submitting the form. Please email us directly at projects@finsweet.com

Want Finsweet to build your Webflow site?

We're Webflow Experts!