Webflow Joe

F'in Sweet Webflow Hacks

Initiate or prevent a Webflow interaction with cookies

What can this be used for?

THIS IS INCREDIBLY USEFUL.

  • To show/hide a CTA bar based on visitor site use (see post)
  • To show/hide loading/intro screen (see post)
  • ....

Understand how Webflow interactions work

Webflow interactions are applied to page elements by a data attribute. Data attributes are incredibly powerful tools in html code that can apply 'things' to html elements. Webflow uses these data attributes to apply javascript code (the interaction code) to the page element. Data attributes are incredibly customizable - you can them whatever you want and you can tell them to do whatever you want. Think of it like adding a custom identifier to your html element. In Webflow, the data attribute that applies the animations is called "data-ix".

This is what the html looks like on the menu button on Finsweet.com. This means that

<div data-ix="menu-show" class="menu-button-wrapper"></div>

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.

<script></script>

          code

 

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.

<script></script>

          code

 

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.

<script></script>

          code

 

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!