Documentation

Using FlowPro

How to install FlowPro, build a component, and change one afterwards. Everything on this page happens inside the Webflow Designer.

Install

  1. Open the Webflow Designer on the site you want to use FlowPro on.
  2. Open the Apps panel in the left toolbar and find FlowPro.
  3. Click Install. Webflow shows you what FlowPro is asking for: read and write access to your sites and to their custom code, and your account name. Approve it.
  4. You land back in the Designer. FlowPro is ready, with nothing to configure and no account to create.

Approving is what lets FlowPro add its loader to your site's custom code. That loader is the only thing FlowPro writes outside the canvas, and it is what makes anything you build work on the published site. If you decline, the panel still opens but nothing it builds will run once published.

Build your first component

  1. Open FlowPro from the Apps panel.
  2. On the Builder tab, click a component. Start with Slider.
  3. Select a Div Block on the canvas to build inside, or build nothing and FlowPro places it in the page body.
  4. Adjust the settings on the left. The preview on the right updates as you go.
  5. Click Create slider.

FlowPro builds real Webflow layers with real classes on them. There is no embed and no pasted script tag. Every part of it is yours to style in the Designer exactly like anything else you have built.

Publish the site to see it run. Sliders, marquees and the accessibility widget all need JavaScript, which does not run inside the Designer canvas.

Change something you already built

Open FlowPro, go to My Components, and press the pencil on the row you want. Change what you like and press Update.

Update reshapes what is on the canvas rather than rebuilding it. Your classes, your styling and anything you put inside a slide are kept. Layers appear or disappear to match the settings, so turning a progress bar on gives you a real layer to style, and turning pagination off takes it away.

Publish again afterwards. Nothing reaches your live site until you do.

The components

Slider

Built on Swiper. Every option Swiper exposes is a control in the panel: navigation, pagination, autoplay, loop, free mode, effects, and slides per view set separately for each breakpoint. It can pull its slides from a CMS Collection List instead of static ones.

Marquee

A CSS-driven scrolling row that survives image loading, webfont swaps and container resizes without jumping back to the start. Speed per breakpoint, pause on hover, fade at the edges.

Accessibility

A one-click accessibility widget wrapping the open-source Sienna library, with 50 languages. Set the position, the brand colour, the button size and the distance from the edge of the screen.

This one covers your whole site rather than one page. Its settings are saved into your site's custom code, so every page carries it, including pages you make later. Nothing is written onto your body tag.

Removing a component

My Components, then the bin icon on its row. FlowPro asks first and tells you what will go. For a component with layers you can also tick "Also delete its classes", which clears the classes FlowPro created from your Style panel. Any class still used by something else on the canvas is kept.

Removing the Accessibility widget takes it off the whole site, not just the page you are on.

When something does not work

It looks right in the Designer but not on the published site

Publish again. Custom code only reaches your live pages when you publish, so a change made after your last publish will not be there yet.

The panel says the code could not be added

That means Webflow turned down the loader. The most common reason is that the site has not authorised FlowPro yet: reinstall the app from the site's Apps panel and approve it. The panel tells you exactly what Webflow said rather than failing quietly.

Nothing runs inside the Designer

That is expected. The Designer canvas does not run the JavaScript your components need. Use the panel's preview while you work, and publish to see the real thing.

Something else

Press Feedback in the panel. It sends your message with the site and version already attached, and you can add a screenshot. Or email flowwithsiraj@gmail.com.

What FlowPro writes to your site

Nothing else. No analytics, no tracking, and nothing is collected from visitors to your published site. See the privacy policy for the full detail.

Pricing

Free, including support and updates.