Webflow sync, pageviews & more.
NEW

Wait X before showing modal again

Example

Wait X before showing modal again

Description

Automatically show a modal or div after X minutes once the window/element has been hidden/closed in Webflow. A great way of showing advertisements, alert messages and so forth based on a time interval between the last time it was viewed.

Instructions

  1. Add the Javascript code to the closing body custom code section
  2. Update Javascript code based on your requirements and class names

Javascript snippet


<!-- Add to body close section -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<script>

// Change 30 to the number of minutes you want it to wait until the popup shows up again
// Change .preloader class to the class of your preloader container

var date = new Date();
var minutes = 30;
date.setTime(date.getTime() + (minutes * 60 * 1000));
            
$(document).ready(function() {
    if ($.cookie('noShowWelcome')) $('.preloader').hide();
    else {
       $.cookie('noShowWelcome', true, { expires: date });
    }
});

</script>

CSS snippet

HTML snippet

Hide/show Items based on URL Parameter

Hide/show Items based on URL Parameter

Show or hide divs or elements based on the parameter within a URL in Webflow. This Javascript code allows you to make your Webflow site even more dynamic by allowing you to customize elements on the page based on the URL parameter provided.

Countdown timer

Countdown timer

Add a countdown timer to your Webflow site with this simple Javascript snippet. Want to display a countdown timer to a time of your choosing on your Webflow site? Now you can easily add one with this Javascript snippet.

Reading Time Blog/Article Page

Reading Time Blog/Article Page

Display the reading time associated with a blog or article on your Webflow site with this Javascript code. With this code you'll be able to easily add a reading time to all of your blogs or articles on your Webflow site.

Hide Element After Click w/Cookie

Hide Element After Click w/Cookie

Hide an element on your Webflow site after click with a cookie via this Javascript snippet. This is perfect for welcome modals, cookie notifications, notification alerts and other items that only need to be displayed a single time.

Hide/Show Element from <select>

Hide/Show Element from <select>

Dynamically hide/show elements based on the <select> option in Webflow. A great way of showing various elements based on the dropdown selection. This could be used for changes views, changing images and much more.

Show/Hide Based on Date or Time

Show/Hide Based on Date or Time

This allows you to show or hide items based on date or time in Webflow. This is great for event based information, you can display various elements based on if its prior to a time or after a specified time on your Webflow site.

Hide/Show Elements by Breakpoint and Item Count

Hide/Show Elements by Breakpoint and Item Count

This custom Javascript code allows you to show or hide items based on breakpoints and the number of items in Webflow. In this example nav buttons are hidden in a custom card slider if the number of cards is less than or equal to the number of items current and is adjusted by breakpoints of 1024, 768

Remove Safari & Chrome Scrollbar

Remove Safari & Chrome Scrollbar

Remove Safari & Chrome scrollbars from your Webflow site via this CSS code snippet.

DRAG
Real-time sorting by
Disable/Enable Clicking on Element

Disable/Enable Clicking on Element

Control which elements can or cannot be clicked on your Webflow site with this simple CSS code snippet.

Play Background Video on Hover

Play Background Video on Hover

Play a background video when a user hovers over the video on your Webflow site.

Split Text into Lines

Split Text into Lines

Easily split text into lines based on lines, words, characters on your Webflow site. A great way to add interactions based on your own specifications to text on your Webflow site.

Change Active Webflow Tab

Change Active Webflow Tab

Change the default Webflow active tab on your Webflow site with this custom Javascript code.

Split CMS Collection into Multiple Sections

Split CMS Collection into Multiple Sections

Split up your Webflow CMS collections into multiple sections with this Javascript code snippet. This allows you to easily break up a collection lists into multiple sections, a great way of adding your own elements in between a Webflow CMS collection list.

Number of CMS Item Count

Number of CMS Item Count

A simple way of displaying the number of CMS items on a page in Webflow. If you ever wanted to add a CMS item count on a page this script will allow you to easily display the total number of items shown.

Staggered Interactions

Staggered Interactions

Easily stagger your Webflow interactions via this Javascript code. Add staggered interactions to Webflow CMS items or interactions you may have already built without pulling your hair out. Adding this bit of Javascript code will help create staggered Webflow interactions.

Force Safari to Respect Border Radius on Images & Videos

Force Safari to Respect Border Radius on Images & Videos

Safari will often not respect border radiuses on images and videos. With this CSS code snippet you can force Safari to respect border radius on images and videos on your Webflow site.

DRAG
Real-time sorting by