Snippets & Hacks
Small, self-contained code blocks for Webflow. Each snippet is placed via an HTML Embed element or Page Settings custom code — no npm, no build step.
| Snippet | What it does |
|---|---|
| Back Button | Browser history back navigation via onclick="history.back()" |
| Scroll to Top | Smooth scroll-to-top button that appears after the user scrolls down |
| Active Nav Highlight | Adds w--current to nav links matching the current URL |
| Form Disable on Submit | Prevents double-submissions by disabling the submit button on first click |
| Reading Time | Shows estimated reading time derived from CMS rich text content |
| External Link Treatment | Auto-adds target="_blank" and rel="noopener noreferrer" to outbound links |
| Text Highlighting | CMS-driven word and phrase highlighting in headings |
| Swiper Carousel | Horizontally scrollable card carousel with numbered pagination bullets |
Pattern
All snippets follow the same approach:
- Style any visible element (button, span, div) in the Webflow Designer with your own classes.
- Place an HTML Embed where the element should appear and paste the snippet code, swapping in your class names.
- For page-level scripts (active nav, form disable, reading time, external links), add to Page Settings → Custom Code → Before
</body>instead.
Webflow strips
onclickand other event attributes from its native Button and Link elements on publish. Always use an HTML Embed for interactive elements.
Related
- Webflow Scripts — CMS backup/export scripts and MCP prompts
- Webflow (tool) — tool overview, CMS collections, n8n automations