Flockler

How to integrate Flockler with Webflow

Social proof and user-generated content galleries increase conversion rates and build trust with site visitors. Flockler aggregates posts from Instagram, TikTok, Facebook, and 10+ other platforms into embeddable feeds that update automatically every 5-15 minutes.

Generate embed codes from Flockler's Display tab and add them through Custom Code Embed elements for quick setup without custom code. Build with the Flockler Content API and Webflow Data API when you need to store social content in CMS collections for custom filtering and search.

Direct embeds and widgets

The Flockler embed code method provides two embedding options. JavaScript snippets load dynamically while iframe URLs enable preview-based display. Both require a paid Webflow Site plan to use the Custom Code Embed element. Generate embed codes from your Flockler Display tab by selecting your layout type (Wall, Grid, or Carousel) and paste them into Webflow's Custom Code Embed element.

Follow this workflow for embed implementation:

1. In Flockler, navigate to Display and select your layout type (Wall, Grid, or Carousel)
2. Click to generate your embed code and copy the snippet
3. In Webflow, press A to open the Add panel
4. Drag the Custom Code Embed element to your desired location
5. Place the Flockler embed code into the editor modal
6. Click Save and close and publish your site

Customization options available through Flockler's interface without code editing include the following:

• Theme colors and visual styling through the Display tab
• Number of posts displayed per feed
• Lightbox mode for expanded post views
• Grid spacing and layout density
• Content filters by tag, category, or product for e-commerce scenarios

After setup, you can switch between wall, grid, and carousel layouts through Flockler's dashboard without editing code. Update feed sources and filters from Flockler and changes appear on your published site. Content sources update automatically every 5-15 minutes and pull new posts from your selected hashtags, accounts, or pages.

Responsive implementation works by creating separate embeds for mobile and desktop. Configure different layouts in Flockler such as a Wall for desktop and Carousel for mobile. Display them conditionally based on viewport using Webflow's responsive visibility controls.

JavaScript embeds appear as placeholder boxes in Webflow and render fully only in published mode or live preview. Iframe embeds render directly on the canvas for immediate visual feedback. Set width and height attributes or use Webflow's Style panel to control dimensions without editing embed code.

Build with Webflow and Flockler APIs

The Flockler Content API v2 enables CMS synchronization, custom data transformations, and searchable social content stored in Webflow collections. This approach requires a Flockler Premium or Agency plan for API access, authentication credentials, and server-side middleware to handle requests securely.

Flockler does not provide webhooks, so synchronization must use polling-based requests with 5-15 minute delays minimum. Real-time sync is not possible. This method is not suitable for non-technical users or teams without backend development resources.

Use this method when you need to filter social content through Webflow's native CMS search, combine social posts with other collection items, or implement custom display logic beyond Flockler's layouts.

The Webflow Data API accepts content from any authenticated source including Flockler. Build middleware that fetches posts from Flockler using the GET /v2/:siteUuid/posts endpoint, transforms the data structure to match your Webflow collection schema, and pushes items through Webflow's REST endpoints including POST /collections/:collection_id/items and PATCH /collections/:collection_id/items/:item_id. This pattern works for scenarios like product-specific social galleries where Webflow's CMS filtering determines which posts appear on each product page.

Webflow enforces strict rate limits on API requests (approximately 60 requests per minute on free workspaces, 120 requests per minute on paid plans). Bulk synchronization of large post collections is not feasible due to these limits.

Authentication requirements differ between platforms. Flockler requires API key authentication sent as an HTTP header (X-FL-API-Key: YOUR_API_KEY) or query parameter (?api_key=YOUR_API_KEY). Webflow requires Bearer token authorization (Authorization: Bearer YOUR_TOKEN) with a mandatory Accept-Version: 1.0.0 header on every request.

Retrieve social content from Flockler

Fetch published social media posts through GET /v2/:siteUuid/posts with filtering, pagination, and ordering options. The endpoint returns up to 100 items per request and accepts query parameters including count, filterByChannels[], filterBySectionIds[], filterByTags[], tagFilterType, and order.

Parameters include the following:

• count (1-100 items) controls response size for pagination
• filterByChannels[] (array) limits results to specific social platforms like Instagram or TikTok
• filterBySectionIds[] (integer array) filters by Flockler section organization
• filterByTags[] (string array) returns only posts matching specific tags
• tagFilterType ("all" or "any") controls tag matching logic for multi-tag filters
• order ("random" option) randomizes display order for dynamic presentations

Example request structure:

GET https://api.flockler.app/v2/{siteUuid}/posts?count=50&filterByChannels[]=instagram&filterByChannels[]=tiktok&order=random
Headers: X-FL-API-Key: YOUR_API_KEY

The API returns only published content. Posts pending moderation or hidden through content filters do not appear in responses. Implement cursor-based pagination for collections exceeding 100 items by tracking the last retrieved post ID and requesting subsequent batches.

Sync content to Webflow CMS collections

Store Flockler posts in Webflow collections using POST /collections/:collection_id/items after transforming API responses to match your collection schema. Every create operation requires field names in slug format (lowercase, hyphen-separated) and mandatory _archived and _draft boolean flags.

Example transformation workflow:

1. Fetch posts from Flockler API with desired filters
2. Map Flockler's response fields to your Webflow collection schema (post text to description field, media URL to image field, engagement metrics to number fields)
3. Format field keys as slugs (e.g., "Post Author" becomes "post-author")
4. Add required _archived: false and _draft: false flags
5. Send POST request to Webflow's collection items endpoint at POST /collections/:collection_id/items

Update existing items through PATCH /collections/:collectionid/items/:itemid when Flockler content changes. Store Flockler's post IDs in a Webflow text field to maintain synchronization mapping between platforms. Flockler does not provide webhook functionality, so synchronization must use polling-based requests to the GET /v2/:siteUuid/posts endpoint at intervals of 5 minutes or longer. Polling intervals shorter than 5 minutes provide minimal benefit because Flockler content sources update every 5-15 minutes.

Manage Flockler feeds programmatically

Create new social media feeds through POST /v2/:siteUuid/feeds to automate feed configuration. The request body requires the following:

• feed.service (social platform identifier: instagram, twitter, facebook, tiktok, etc.)
• feed.configuration (moderation setting: "autopublish", "aimoderation", or "savedtoinbox")
• feed.sectionId (organizational section for feed grouping)
• feed.name (optional human-readable feed identifier)

List existing feeds with GET /v2/:siteUuid/feeds filtered by services[] and order parameters. Update feed configurations through PATCH /v2/:siteUuid/feeds/:feedUuid or remove feeds completely with DELETE /v2/:siteUuid/feeds/:feedUuid.

This programmatic approach enables dynamic feed management for multi-client agencies, automated client onboarding workflows, or seasonal campaign adjustments. Flockler API access requires a Premium or Agency plan subscription. Feed count is limited based on your subscription tier. This method requires server-side API implementation rather than manual Flockler dashboard access.

Automate workflows with Webflow webhooks

Trigger actions when Webflow content changes using POST /sites/:site_id/webhooks with trigger types including collection_item_created, collection_item_changed, collection_item_deleted, form_submission, and site_publish. Flockler does not provide webhook functionality, so incoming social content notifications cannot trigger automated workflows. Webflow webhooks enable one-way outbound automation from Webflow to your middleware or external services. Updates from Flockler to Webflow require polling-based synchronization using the Flockler API with minimum 5-minute intervals. Real-time updates are not possible.

Configure a webhook to notify your middleware when new Webflow collection items are added and trigger custom logic like updating Flockler displays or synchronizing bidirectional content changes.

What you can build

Integrating Flockler with Webflow enables social proof displays, user-generated content galleries, live event feeds, and shoppable social commerce experiences directly on your site.

• E-commerce social galleries: Display Instagram posts and TikTok videos tagged with specific product identifiers on product pages and link social content to purchase pages for direct conversion paths. Advanced shoppable overlays with Add to Cart buttons require custom Webflow development beyond Flockler's embed functionality.
• Event social walls: Aggregate attendee posts from event hashtags into live-updating displays on conference websites that show real-time participation and engagement
• Brand trust hubs: Combine customer testimonials, review content, and user-generated social media posts into unified landing pages with moderation controls for trust-building displays
• Multi-location showcases: Display location-specific social content from different properties or venues on real estate or hospitality sites, filtered by geographic tags or venue accounts