Your browser is too small.
Mobile and tablet is not yet supported. Resize your browser to be atleast 991px wide.
API & Data
CMS
CSS & Styling
Components
Cookies
Effects
Events & Triggers
Extensions
Filtering & Search
Forms
Links
Memberships
Mobile
Numbers & Calculations
SEO
Safari
Scroll
Sliders, Tabs etc.
Sound
Video
eCommerce
Category
152
Solutions
RESET
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Greet visitors (eg. "Good morning") based on their time

Code
Eli Shmerler
NEW

greet-visitors-eg-good-morning-based-on-their-timezone

Free
Code
Validated
Eli Shmerler
Free

Greet visitors (eg. "Good morning") based on their time

Eg. Set text to “Goodmorning” before 12 pm and “Good afternoon” after 12:00pm but before 5:00 pm. These rules can be set by the below code script

Open site
Video
Greet visitors (eg. "Good morning") based on their time
<script> /* Greet visitors based on their time */ var myDate = new Date(); var hrs = myDate.getHours(); var greet; if (hrs < 12) greet = 'Good Morning'; else if (hrs >= 12 && hrs <= 17) greet = 'Good Afternoon'; else if (hrs >= 17 && hrs <= 24) greet = 'Good Evening'; document.getElementById('lblGreetings').innerHTML = greet; </script>
INSTRUCTIONS
  1. Add script to before </body> tag in page or project settings.
  2. Give a text element the ID lblGreetings to have it dynamically change.
Numbers & Calculations

Images Inside Text Spans in Webflow

Video Tutorial
Timothy Ricks
NEW

images-inside-text-spans-in-webflow

Free
Video Tutorial
Validated
Timothy Ricks
Free

Images Inside Text Spans in Webflow

Learn the best practice for combining your texts with images – with CSS and a bit of Javascript.

Open site
Video
Images Inside Text Spans in Webflow
INSTRUCTIONS
CSS & Styling

Create a 3D scroll animation in Blender and import as Lottie in Webflow

Video Tutorial
Diego Toda de Oliveira
NEW

create-a-3d-scroll-animation-in-blender-and-import-as-lottie-in-webflow

Free
Video Tutorial
Validated
Diego Toda de Oliveira
Free

Create a 3D scroll animation in Blender and import as Lottie in Webflow

Advanced tutorial for using Blender to create a 3D animation and export it as image sequences to then finally export it as a Lottie and import it to Webflow.

Open site
Video
Create a 3D scroll animation in Blender and import as Lottie in Webflow
INSTRUCTIONS
Effects

Close modal or div with ESC-key

Code
NEW

close-modal-or-div-with-esc-key

Free
Code
Validated
Free

Close modal or div with ESC-key

Open site
Video
Close modal or div with ESC-key
<script> // Click on close-button when ESC-key is clicked $(document).keydown(function (e) { if (e.key === 'Escape') { $('.flowie-modal_close').click(); } }); </script>

‍

INSTRUCTIONS
  1. Add script to before </body> tag in page or project settings.
  2. Change flowie-modal_close to the class name of your close-button.
Events & Triggers

Finsweet – Cookie Consent for Webflow

Integration
Finsweet
NEW

finsweet-cookie-consent-for-webflow

Free
Integration
Validated
Finsweet
Free

Finsweet – Cookie Consent for Webflow

Free and powerful GDPR compliant cookie consent plugin built for Webflow.

Open site
Video
Finsweet – Cookie Consent for Webflow
INSTRUCTIONS
Easy to set up with Attributes
Tons of design flexibility
Clonable templates for fast implementation
Tons of documentation
Segment cookies into categories (eg. essentials and marketing)
Integrates fluently with Google Tag Manager
Debugger tool
Free for both personal and commercial use
Cookies

Feedspring – Custom Social Feeds in Webflow

Integration
Feedspring
NEW

feedspring-custom-social-feeds-in-webflow

Paid Features
Integration
Validated
Feedspring
Paid Features

Feedspring – Custom Social Feeds in Webflow

Build completely custom feeds for Webflow sites. Connect to your favourite platforms like Google Reviews, Instagram, Dribbble & more.

Open site
Video
Feedspring – Custom Social Feeds in Webflow
INSTRUCTIONS
5+ Social Platforms
Easy to build with attributes
Can be updated down to every minute
High level of design freedom
No items found.

Relume – Component Library

Integration
Relume
NEW

relume-library

Paid Features
Integration
Validated
Relume
Paid Features

Relume – Component Library

A library of 800+ Client-First V2, unstyled and responsive components to speed up your projects.

Open site
Video
Relume – Component Library
INSTRUCTIONS
Client-First V2 naming
Figma Kit
Create and share libaries
Responsive
Unstyled and easily adaptive
Slack Community
Components

Nocodelytics – Simple Webflow Analytics

Integration
Nocodelytics
NEW

nocodelytics-simple-webflow-analytics

Paid
Integration
Validated
Nocodelytics
Paid

Nocodelytics – Simple Webflow Analytics

Track users and get insights that help you grow your business.

Open site
Video
Nocodelytics – Simple Webflow Analytics
INSTRUCTIONS
Track buttons and links in just a few clicks
See what users search for
Integrates with the Webflow ecosystem
Build dashboards in Webflow
Integrates with Jetboost
Unlimited Websites
Track popular CMS Items
API & Data

Run a function if browser is Safari

Code
NEW

run-a-function-if-browser-is-safari

Free
Code
Validated
Free

Run a function if browser is Safari

Check if the current browser is Safari. If it is, the code inside the if statement will be executed.

Open site
Video
Run a function if browser is Safari
<script> // Run function if browser is Safari if ($.browser.safari) { // Run the function here } </script>
INSTRUCTIONS
  1. Add script to before </body> tag in page or project settings.
  2. Add your own function to run.
Safari

Remove highlights when tapping on links

Code
NEW

remove-highlights-when-tapping-on-links

Free
Code
Validated
Free

Remove highlights when tapping on links

Removes the tap highlights that appear on some mobile devices such as Android.

Open site
Video
Remove highlights when tapping on links
<style> /* Remove all highlights when tapping links on mobile */ body {-webkit-tap-highlight-color: transparent;} :focus {outline: 0;} </style>
INSTRUCTIONS
  1. Add script to before </body> tag in page or project settings.
Mobile
CSS & Styling

Refokus – Page Transitions

Powerup
Refokus
NEW

refokus-page-transitions

Free
Powerup
Validated
Refokus
Free

Refokus – Page Transitions

Create custom page transitions with Attributes to improve your ​​website navigation and user experience.

Open site
Video
Refokus – Page Transitions
INSTRUCTIONS
Use Webflow animations
Custom "in" animation
Custom "out" animation
Create a delay on page change
Responsive options
Effects

Powerful Scroll Marquees

Powerup
Timothy Ricks
NEW

scroll-marquee

Patreon
Powerup
Validated
Timothy Ricks
Patreon

Powerful Scroll Marquees

No-code friendly solution to created advanced and customisable scroll marquees.

Open site
Video
Powerful Scroll Marquees
INSTRUCTIONS
Easy setup with Attributes
Pause/Play on button click
Pause on hover
Customize speed
Customize direction
Scrub through when scolling
Effects

Emoji confetti on Button Click in Webflow with js-confetti

Video Tutorial
Web Bae
NEW

emoji-confetti-on-button-click-in-webflow-with-js-confetti

Free
Video Tutorial
Validated
Web Bae
Free

Emoji confetti on Button Click in Webflow with js-confetti

Customise it with your own selected set of emojis.

Open site
Video
Emoji confetti on Button Click in Webflow with js-confetti
INSTRUCTIONS
Effects

Build your own Attribute solution

Video Tutorial
Timothy Ricks
NEW

build-your-own-attribute-solution

Patreon
Video Tutorial
Validated
Timothy Ricks
Patreon

Build your own Attribute solution

Create flexible no-code solutions with your own custom attributes

Open site
Video
Build your own Attribute solution
INSTRUCTIONS
API & Data

Change form input autofill colors

Code
NEW

change-form-autofill-background-color

Free
Code
Validated
Free

Change form input autofill colors

Customize background and text color when form input is autofilled.

Open site
Video
Change form input autofill colors
<style> /* Change form input autofill background color */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 50px #181719 inset !important; } /* Change form input autofill text color */ input:-webkit-autofill { -webkit-text-fill-color: #F8F5E6 !important; } </style>
INSTRUCTIONS
  1. Add CSS inside <head> tag or inside a code embed.
  2. Change #181719 to adjust the background color.
  3. Change #F8F5E6 to adjust the text color.
Forms

Trigger Calendly pop-up on class click

Code
NEW

trigger-calendly-pop-up-on-class-click

Free
Code
Validated
Free

Trigger Calendly pop-up on class click

Triggers the Calendly pop-up widget when a specific class is clicked.

Open site
Video
Trigger Calendly pop-up on class click
<script> // Trigger Calendly pop-up on class click $('.calendly-trigger').click(function(){ Calendly.initPopupWidget({url: 'https://calendly.com/your_calendly_name'}); return false; }); </script>
INSTRUCTIONS
  1. Add script to before </body> tag in page or project settings.
  2. Change calendly-trigger to the class name of your button that should trigger the Calendly pop-up.
  3. Change your_calendly_name with the name of your Calendly event from the URL.
Events & Triggers

Disable chromecast icon on video element (Android)

Code
NEW

disable-chromecast-icon-on-video-element-android

Free
Code
Validated
Free

Disable chromecast icon on video element (Android)

Add the property disableRemotePlayback to your video element.

Open site
Video
Disable chromecast icon on video element (Android)
<!-- Disable chromecast icon on video element (Android) --> <video disableRemotePlayback src=”…”> </video>
INSTRUCTIONS
  1. Add disableRemotePlayback to your video tag as seen in the example above.
Sound

Videoask

Integration
Videoask
NEW

videoask

Paid Features
Integration
Validated
Videoask
Paid Features

Videoask

Interact face-to-face with your audience

Open site
Video
Videoask
INSTRUCTIONS
Record videos of yourself with the VideoAsk App
Share the link or embed it into any webpage
Receive answers in video, voice, or text format
Multistep/conditional video flows
Tracking & analytics
Webflow integration
Sound

Hide scrollbars

Code
NEW

hide-scroll-bars

Free
Code
Validated
Free

Hide scrollbars

Hides the scroll bars when overflow is set to scroll.

Open site
Video
Hide scrollbars
<style> /* Hide scroll bars */ .flowie-class::-webkit-scrollbar {display: none;} </style>
INSTRUCTIONS
  1. Add CSS inside <head> tag or inside a code embed.
  2. Change flowie-class to the class name of the scrollable element.
CSS & Styling
Scroll

Stop all embedded videos from playing on click

Code
NEW

stop-all-embedded-videos-from-playing-on-click

Free
Code
Validated
Free

Stop all embedded videos from playing on click

Stops all iframes or HTML5 videos from playing.

Open site
Video
Stop all embedded videos from playing on click
<script> // Stop all iframes or HTML5 videos from playing // Defining a function to stop all videos var stopVideos = function () { var videos = document.querySelectorAll('iframe, video'); Array.prototype.forEach.call(videos, function (video) { if (video.tagName.toLowerCase() === 'video') { video.pause(); } else { var src = video.src; video.src = src; } }); }; // Run the stopVideos function on click $('.flowie-button').click(function(){ stopVideos(); }); </script>
INSTRUCTIONS
  1. Add script to before </body> tag in page or project settings.
  2. Change flowie-button to the class of your button that should stop all videos from playing.
Video
No solutions matching your search.
Create a solution with Flowie Code Assistant AI.
Generate code