Boosters

How to build with Boosters and Webflow

Adding interactive features to Webflow sites usually requires custom JavaScript. Boosters provides ready-to-use enhancements that work through attribute configuration instead, so you can add animations, sliders, and form features without writing scripts yourself.

You can connect Boosters through the Boosters app for automatic script management, code embeds and custom code for direct control, or the Webflow API for programmatic deployment across multiple projects.

Use the Boosters app

The Boosters app is the simplest installation path, with automatic script injection, updates, and removal. Install once per project, then add Booster functionality by configuring attributes on your Webflow elements.

The app manages script delivery via global CDN and handles versioning automatically. It provides access to the full Boosters library without requiring manual script copying or tracking updates. The app interface works directly within Webflow, making it the recommended approach for most teams.

The app includes the following features.

• One-click installation from the Webflow marketplace with automatic authorization  
• Automatic script management with CDN delivery and version updates handled for you  
• Attribute-based configuration using Webflow's built-in element settings panel  
• Complete feature library including GSAP text effects, carousels, form features, and dynamic content  
• Automatic updates with no manual intervention required for script versioning

The app works at the project level, so you authorize it once and can use any Booster on any page within that project.

Use code embeds and custom code

Manual script installation gives you direct control over which Boosters load and where they appear. This approach works well for single-page implementations or when you need precise control over script loading.

Each Booster includes script installation instructions with integrity verification. For example, the Text Scramble Booster documentation provides the complete script tag you need, including integrity verification via SHA384 checksum.

You can install scripts in several ways.

• Global installation using custom code in the head and body tags for site-wide availability  
• Page-specific scripts using the custom code embed element placed on your canvas  
• Attribute configuration through the element settings panel without writing code  
• CMS integration by placing custom code embed elements inside collection lists or using custom code in the CMS

After adding scripts, you configure Booster behavior through attributes like fb-scramble, fb-scramble-trigger, and fb-scramble-speed. The getting started guide documents the complete attribute system.

Note: You can toggle custom code on or off in preview mode to test Booster functionality before publishing. Use the Enable Custom Code option at the bottom of the preview panel.

Build with Webflow API for programmatic deployment

The Webflow APIs enable teams managing Booster installations across multiple projects to deploy scripts programmatically. This approach lets developers build automation systems that deploy and synchronize Booster scripts across client portfolios without manual site-by-site configuration. Review the REST API documentation for detailed endpoint specifications.

You can programmatically add Booster scripts through PUT /v2/pages/{page_id}/custom_code requests with your script content in the head_custom_code field. Retrieve existing scripts with GET /v2/pages/{page_id}/custom_code to audit installations or prevent duplicates.

Note: Before applying scripts to pages, register them first using the /sites/{site_id}/registered_scripts/inline or /registered_scripts/hosted endpoints. This method involves more setup than the app or manual embed approaches, so it's best suited for automation workflows rather than one-off installations.

Common use cases for the API integration include:

• Automated deployment across client portfolios using the Webflow Custom Code API for managing Booster scripts  
• CMS content synchronization with Boosters using the CMS item management API and List Collection Items endpoint  
• Installation auditing to verify which Boosters are active across projects  
• Multi-channel content delivery using Boosters alongside CMS content delivery workflows

Authentication: Generate API tokens in Site Settings → Apps & Integrations → API Access. Tokens support read-only or read/write scopes and expire after 365 days of inactivity. Include tokens in API requests using the header Authorization: Bearer <token>.  

What you can build

Integrating Boosters with Webflow lets you add interactive features without writing custom JavaScript.

• Animated landing pages: Add GSAP-powered text highlight effects, scramble animations, and typewriter sequences to landing pages using simple attribute configuration  
• Interactive portfolio presentations: Build before/after image comparison sliders for design showcases, product demonstrations, or transformation stories  
• Improved form experiences: Add password visibility toggles and contextual tooltips to improve form completion rates and reduce user confusion  
• Time-based content systems: Create countdown timers for product launches, real-time clocks for global audiences, or age gate restrictions for compliant content access