TooEasy Powerups

How to integrate TooEasy Powerups with Webflow

TooEasy Powerups connects to Webflow through an attribute-based system: you install scripts, then add custom attributes to Webflow elements to activate interactive features. There are three integration methods, depending on how much control you need.

The TooEasy Powerups app is the fastest path. Install from the marketplace, select powerups, and the app handles script delivery through a CDN. Cloneable templates and manual code embeds give you more control over script placement and let you evaluate powerups before full adoption. For programmatic content workflows, Webflow's CMS API combined with TooEasy's CMS-aware powerups lets you create and update collection items through the API while TooEasy handles the interactive front-end display.

Use the TooEasy Powerups app

Install the TooEasy Powerups app from the Webflow Apps Marketplace. After installation, open the app panel in Webflow, select the powerups you need, and click Install Script. The app loads required scripts automatically through a CDN, so you don't need to paste code manually. From there, configure each powerup by adding custom attributes to elements in Webflow's element settings panel.

The TooEasy documentation hub walks through the setup for every powerup. Here's what the core powerups do:

• Accordion Powerup: Transforms native Webflow dropdowns into collapsible content sections with open-on-load support and additional configuration options.
• Carousels Powerup: Creates infinite, swipeable marquee-style carousels with configurable autoplay, speed, direction, pause-on-hover, and alignment through attributes.
• Sliders Powerup: Builds CMS-driven sliders that auto-generate slides from Webflow CMS collection items with looping, pagination, slide/fade transitions, and responsive breakpoints.
• Modals Powerup: Transforms native Webflow dropdowns into full-screen modals with automatic body scroll lock and close functionality.
• Fetch Powerup: Loads content from other pages within your Webflow project using custom attributes, with no page limits.
• Share Powerup: Adds one-click social sharing to platforms including X/Twitter, Facebook, LinkedIn, WhatsApp, Pinterest, Telegram, and email.
• Smart Videos Powerup: Handles inline Vimeo, YouTube, and HTML5 video playback with auto-pause when off-viewport, custom preview covers, and lazy loading.
• Themes Powerup: Adds dark/light mode toggling through attributes.

Additional powerups include Lightboxes, Copy (clipboard functionality), Count (CMS list counting), Custom Cursors, Dropdowns (enhanced native dropdowns), Smart Navs (scroll-based active navigation and theme switching), and Swipe (touch gesture support).

The app manages script updates centrally through the Webflow app interface, so you don't need to maintain individual code snippets across projects. Some powerups are free (Accordions, Carousels, Count, Fetch, Modals, Share); the rest require a $20 one-time project license for the premium bundle.

Clone templates or embed scripts manually

Some teams need to evaluate a tool before full adoption, and others need control over where scripts load. TooEasy supports both approaches.

TooEasy provides free cloneable Webflow templates with working implementations you can copy and modify:

• Accordions cloneable: A pre-built accordion implementation with attributes already configured.
• Carousels cloneable: A ready-made carousel with attribute configuration you can inspect and adapt.
• Fetch cloneable: A working example of dynamic content loading across pages.
• CMS Sliders cloneable: A CMS-driven slider showing auto-generated slides from collection items.

Clone any template into your Webflow workspace, inspect the attribute setup, and adapt it for your project.

For manual script placement, use Webflow's Code Embed element to load TooEasy scripts on specific pages, or add them site-wide through custom code in head and body tags under Site settings. Footer placement (before </body>) is recommended for better page load performance.

Cloneables work well for evaluating TooEasy before committing to a full installation. Manual embeds give more control for loading a script only on pages that use a specific powerup.

Build with Webflow's CMS API and TooEasy powerups

Some projects need content that updates programmatically: a portfolio pulling from an external source, or a product feed managed by a backend system. For these, combine Webflow's CMS API with TooEasy's CMS-aware powerups.

The pattern works like this: create or update CMS collection items through the API, then TooEasy's Sliders, Carousels, or Fetch powerups display that content with interactive features on the published site. Specific workflows include:

• Programmatic content creation: Use Webflow's CMS API endpoints to create and manage collection items. TooEasy Sliders render the content as interactive galleries after publishing.
• Bulk content sync: Update items in bulk through the API. TooEasy powerups display the refreshed content automatically on the next publish.
• Publish automation: Use Webflow's publishing endpoints to push updated content live, so it appears in TooEasy-powered components without manual republishing.
• Event-driven sync: Webflow's site_publish webhooks can trigger cache invalidation or external sync after content goes live.

This approach suits teams managing large content libraries or automating content pipelines. TooEasy handles all interactive front-end features through custom HTML attributes and client-side JavaScript. Authentication for API calls uses bearer tokens through the Webflow Authentication API. This method requires developer resources.

What you can build

Integrating TooEasy Powerups with Webflow lets you add interactive elements like sliders, modals, carousels, and accordions to any Webflow site without writing JavaScript. The attribute-based system means all configuration stays inside Webflow.

Here's what you can build:

• CMS-driven portfolio sliders: Build a project showcase where new case studies added to Webflow CMS automatically appear as swipeable, paginated slides with transition effects. The Google Slider rebuild cloneable demonstrates how TooEasy Sliders recreate complex slider functionality through custom attributes alone.
• Interactive FAQ and documentation pages: Create knowledge base layouts using the Accordion Powerup for collapsible sections, the Copy Powerup for clipboard-enabled code snippets, and the Navs Powerup for scroll-based active navigation that highlights the current section as users scroll.
• Video-rich landing pages: Build product or course pages with the Smart Videos Powerup. Videos auto-pause when they leave the viewport, display custom preview covers before playback, and lazy-load media for faster initial page performance.
• Multi-feature agency sites: Combine Carousels for client testimonials, Modals for project detail popups, Lightboxes for image galleries, and the Themes Powerup for dark/light mode switching. All configured through attributes in a single Webflow project.

To get started, install TooEasy Powerups from the Webflow Apps Marketplace and explore the TooEasy documentation for setup guides and video walkthroughs for each powerup.