Flowstar Tabs

Flowstar Tabs adds a drag-and-drop tab builder inside the Designer, with horizontal or vertical layouts, per-element button colors, hover effects, and backgrounds. Install it from the Marketplace and skip the manual class work that native tab elements require for styling.

It fits e-commerce stores organizing product specs, SaaS teams building pricing comparisons, and agencies shipping client sites. If you want tab functionality without custom CSS or development, you get the most value.

How to integrate Flowstar Tabs

What is Flowstar Tabs? Flowstar Tabs is a native app that builds customizable tab layouts for product-page details and info sections. It supports horizontal or vertical orientation and per-tab width. Per-element styling covers button colors and hover effects, plus backgrounds. You handle all configuration through a drag-and-drop interface with no coding required.

Reach for Flowstar Tabs when you need to condense related content into tabbed sections without cluttering a page. Product pages benefit when specs and details each get their own tab. Shipping info can sit in another tab. SaaS pricing pages use tabs for plan comparisons, and documentation centers use them to structure technical content for scanning.

Choose the path based on how you manage tab content:

• The Flowstar Tabs app handles tab creation and styling directly inside the Designer without writing code.
• Custom code covers manual tab patterns when you need CMS-driven content Flowstar Tabs does not support.
• The Data API gives you full control over CMS content that feeds custom tab logic, but requires server-side development.

Most implementations rely on the app alone. Reach for custom code or the API only when you need CMS-driven tabs, which Flowstar Tabs does not handle natively.

Install the Flowstar Tabs app

The Flowstar Tabs app is the only documented way to connect Flowstar Tabs to your site. Install it from the Marketplace, authorize it against your site, and build tabs through the app's drag-and-drop interface. This method suits you if you build without code, design sites, or run a store and want tab functionality without touching CSS. You need a paid Site plan to publish and use all features.

To set up the integration:

1. Go to the Flowstar Tabs listing on the Marketplace.
2. Click Add to site, then select the Workspaces and sites you want.
3. Click Authorize app, then click Go to "Flowstar Tabs" on the pop-up banner.
4. Open the Apps panel in the Designer, hover over the app, and click Launch to start building.

Once you install it, you get access to these no-code features:

• Horizontal or vertical tab layout selection
• Adjustable width per tab
• Per-element styling for button colors, hover effects, and backgrounds
• Drag-and-drop reordering for tabs and elements
• Responsive behavior controls for different devices

During authorization, the app requests permissions to read information about authorized users, read and write custom code, read and write site data and publishing, read CMS data and assets, read page data, and read Ecommerce store data. Flowstar Tabs does not carry an "Approved by Webflow" badge, which you should weigh if you have governance requirements.

Add tab content manually with Code Embed elements

Flowstar Tabs does not connect to CMS collections, so you configure every tab manually inside the app. When you need CMS-driven tabs, build a manual pattern with the Code Embed element instead. This path requires more setup than the app but handles CMS-driven content the app cannot. You need a paid plan, since the free Starter plan does not support custom code.

Build CMS-driven tabs with a Collection List and custom JavaScript

Since Flowstar Tabs cannot pull from the CMS, a common workaround uses a hidden Collection List as a data source. JavaScript then populates a standard Tabs component at runtime. This keeps content editable in the CMS while rendering it inside tabs, though this pattern relies on Finsweet Attributes or custom JavaScript, not Flowstar Tabs itself.

To build CMS-driven tabs:

1. Add a Collection List bound to your CMS collection and hide it visually.
2. Add matching content blocks and button triggers that share an attribute such as data-tab and data-tab-content.
3. Add a Code Embed element with JavaScript that reads the list and handles tab switching.

Code Embed elements accept up to 50,000 characters each and require a paid plan. Do not include <html>, <body>, or <head> tags in the block, since that breaks the page layout.

Add scripts in the site head or body

For scripts that apply site-wide, use Custom code in head and body tags instead of an inline element. Go to Site settings > Custom code to place scripts in the <head> or before the closing </body> tag.

To add site-wide tab logic:

1. Open Site settings > Custom code.
2. Paste your JavaScript into the Footer code field before the closing body tag.
3. Publish the site to make the code live.

Custom code effects show in preview mode but do not go live until you publish the site. Each field accepts up to 50,000 characters.

Build with the Data API

Flowstar Tabs exposes no public API, webhooks, or automation surface, so you cannot call a Flowstar Tabs API. When you need programmatic control over the CMS content that feeds custom tab layouts, use the Data API with server-side development. This path suits you if you build a CMS-to-tabs sync layer that Flowstar Tabs cannot provide natively.

This path can use the Data API to handle CMS collections and items over base host https://api.webflow.com with the /v2/ prefix, while webhooks trigger real-time events when CMS items change. For cached requests, the Content Delivery API serves published CMS content.

No direct API connection exists between Flowstar Tabs and your site, and Flowstar Tabs does not support content from CMS collections. You build every tab through the app's visual interface.

Read CMS items to populate tab content

Fetch collection items over the Data API when you want a script to build tab panes from CMS content. Authenticate with a Bearer token that carries the cms:read scope.

To read CMS items for tabs:

1. Call GET https://api.webflow.com/v2/collections/{collection_id}/items with your Bearer token.
2. Pass limit (max 100), offset, and optional cmsLocaleId for localized content.
3. Map the returned fieldData into your tab markup client-side or server-side.

The list endpoint accepts sortBy and sortOrder parameters so you control item ordering.

Sync tab content when CMS items change

Register a webhook to rebuild or update tab content whenever a CMS item changes. This keeps a custom tab layer current without polling. Flowstar Tabs itself has no documented webhook events. This approach applies only to a custom CMS-to-tabs sync layer built on native webhook events such as collection_item_changed or collection_item_published.

To set up CMS sync:

1. Create a webhook with POST https://api.webflow.com/v2/sites/{site_id}/webhooks.
2. Subscribe to the collection_item_changed or collection_item_published trigger type.
3. Handle the payload fields collectionId, id, and fieldData on your endpoint.

Each site allows up to 75 webhook registrations per trigger type. Use these events to trigger a rebuild only when tab source content actually updates.

What can you build with the Flowstar Tabs integration?

Integrating Flowstar Tabs with your site lets you organize dense page content into tabbed sections without writing custom CSS.

• E-commerce product pages: Split product specs, details, and shipping info into separate tabs on a single product page so shoppers scan one section at a time.
• SaaS pricing comparison dashboards: Build side-by-side plan comparisons with tabs that toggle between monthly and annual pricing views.
• Professional services portfolios: Group service offerings and case studies into categorized tabs so visitors filter by the work they care about.
• Knowledge base documentation centers: Structure technical content into tabbed sections for scannable navigation across topics.

If you need more control over CMS-driven tab content or programmatic content sync, the API integration path covers those cases with full flexibility.