Circle

Webflow handles site design, CMS content, and hosting, but lacks built-in community features like member forums, courses, events, or real-time discussions. Circle fills that gap by letting you embed community spaces on Webflow pages, sync member data and events to the Webflow CMS through Zapier, and use Circle's APIs alongside the Webflow Data API to build headless community features—creating a single branded experience where visitors move between your public site and private community without switching platforms.

This integration is most useful for course creators who want student forums alongside marketing pages, membership site operators who need gated community access tied to sign-ups, SaaS teams adding peer support to documentation, and agencies building community-driven sites for clients. Anyone running a Webflow site that needs member engagement beyond static content will benefit from connecting these two platforms.

How to integrate Circle with Webflow

What is Circle? Circle is an all-in-one community platform that combines discussion forums, online courses, events, live streams, and native payments under a single brand. It supports community spaces, direct messaging, gamification, and built-in email marketing. Circle also offers embeds on Professional and higher plans, Admin and Headless APIs on Business and higher plans, and custom SSO on Circle Plus.

Teams pair Circle with Webflow when they need the design flexibility of Webflow for their public-facing site and the community infrastructure of Circle for member engagement. A Webflow site handles the brand experience, landing pages, and CMS-driven content, while Circle manages everything that happens after a visitor becomes a member. The two platforms connect through embeds, automation, or API calls depending on how tightly coupled the experience needs to be.

The Circle-Webflow integration supports 4 approaches:

• Code Embed elements handle embedding Circle community spaces, discussion threads, and widgets directly on Webflow pages without writing custom code.
• Custom subdomain mapping lets you host your Circle community at a branded URL like community.yourdomain.com alongside your Webflow site.
• Zapier connects explicit Webflow and Circle triggers and actions, such as Webflow New Form Submission → Circle Invite Member or Circle New Event Created → Webflow Create Item, without code.
• The Webflow and Circle APIs give you full control over member management, content sync, and headless community features, but require server-side development.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Embed Circle content with Code Embed elements

Circle provides iFrame snippets and JavaScript widgets that you can place on any Webflow page using Code Embed elements. This is the most common starting point for teams that want community content visible on their Webflow site without building a custom integration. You can embed your full community, a single space (such as a specific forum or course), or a post's comment thread. Circle's embed code is available under Settings > Embed in your Circle dashboard. This method requires a Circle Professional plan or higher, and your Webflow site needs a paid site plan to support Code Embed elements.

Embed your full community

A full community iFrame places your entire Circle environment inside a Webflow page. Visitors can browse spaces, read posts, and interact with the community without leaving your site.

To embed your full Circle community:

1. In Circle, click your community name or logo in the top navigation bar, then select Settings.
2. In the sidebar, click Embed, scroll to the Space widget section, and copy the embed code.
3. Replace [insert community URL] in the snippet with your actual community URL (for example, yourname.circle.so).
4. In Webflow, open the Add panel and drag a Code Embed element onto the canvas.
5. Double-click the Code Embed element, paste the Circle iFrame code, and click Save & Close.
6. Publish your site. Custom code only renders on the published site, not in the Webflow canvas preview.

These steps give you a basic full-community embed without custom development.

A responsive full-window embed looks like this:

<center>
  <iframe
    style="border: 0; box-shadow: none; width: 100%; height: 150vh;"
    src="[INSERT COMMUNITY URL]">
  </iframe>
</center>

Be aware that mobile apps may show a "View in App" link instead of inline content. Private communities require SSO for member authentication within the iFrame. Chrome and Safari may also block third-party cookies when the embed and host site use different domains, which can force members to log in separately.

Embed a single space or post thread

You can scope the embed to a single Circle space or a specific post's comment thread instead of the full community. This is useful for placing a course discussion below a lesson page or adding a feedback thread to a product page.

To embed a single space:

1. In Circle, click your community name or logo, go to Settings > Embed > Space widget, and copy the code.
2. Replace [space_slug_goes_here] with your space's custom URL slug. Find the slug by opening the space, clicking the three dots icon, selecting Options, and copying the value from the Custom URL slug field.
3. In Webflow, add a Code Embed element, paste the snippet, and publish.

That setup limits the embed to one space instead of the entire community.

To embed a post's comment thread:

1. In Circle, click your community name or logo, go to Settings > Embed > Post widget, and copy the code.
2. Replace [space_slug_goes_here]/[post_slug_goes_here] with the appropriate slugs. Find the post slug by clicking the More actions (three dots) icon next to the post title, selecting Edit post, clicking the Settings ⚙️ icon, and copying the slug from the Custom URL slug field.
3. In Webflow, add a Code Embed element, paste the snippet, and publish.

That approach works well when you want discussion attached to a specific page.

Both methods work the same way in Webflow: drag a Code Embed element to the canvas, paste the snippet, and publish. You can test how embeds will look before deploying by using jsfiddle.net to preview the output.

Add JavaScript widgets

Circle also provides JavaScript-based widgets that use <div> elements with data attributes instead of static iFrames. These widgets offer more flexibility for rendering circle content.

The widget syntax from Circle's embed settings looks like this:

<!-- Space widget -->
<div class="circle-space-widget" data-space-id="SPACE_ID"></div>

<!-- Topic widget -->
<div class="circle-topic-widget" data-topic-id="TOPIC_ID"></div>

The full script tag and SPACE_ID/TOPIC_ID values are generated in Circle's Settings → Embed panel.

You can place JavaScript widgets in Webflow three ways:

1. Use a Code Embed element on a specific page (paste both the <div> and <script> tags).
2. Add the script to a single page via the Pages panel > gear icon > Custom Code > Before </body> tag field. See custom code in head and body tags for details.
3. Add the script site-wide via Site settings > Custom Code > Footer Code to make widgets available on every page.

These options let you control whether widgets load per page or across the entire site.

Place <script> tags before the closing </body> tag so page content loads before JavaScript executes. Code Embed elements have a 50,000-character limit per block. If your scripts exceed that, host them externally and reference them with a <script src=""> tag.

Map Circle to a custom subdomain

Custom subdomain mapping lets your Circle community live at a branded address like community.yourdomain.com instead of the default yourname.circle.so. This approach does not embed Circle inside a Webflow page. Instead, it gives your community its own subdomain that sits alongside your Webflow site under the same root domain. Visitors click a link on your Webflow site and arrive at a fully branded Circle URL. The two platforms coexist through separate DNS records, so there is no conflict.

To set up a custom subdomain:

1. In Circle, open your custom domain settings and enter the subdomain you want (for example, community.yourdomain.com).
2. Circle displays a required CNAME record value.
3. Add that CNAME record in your domain host's DNS settings, pointing the subdomain to Circle's servers.
4. Wait for DNS propagation, then verify the connection in Circle's settings.

Once complete, your Circle community will live on its own branded subdomain.

Your Webflow site uses its own A records or CNAME records for the main domain, and the Circle subdomain CNAME is a completely separate DNS entry. The two do not interfere with each other. See Webflow's custom domain for details on how Webflow handles DNS.

Setting up a custom domain on Circle removes Google, Facebook, and Twitter sign-in options. Members who previously used social login can only sign in if they have an existing password set on their Circle account. If you plan to configure SSO, set up the custom domain first. Configuring SSO before the domain is ready changes the Callback URL and can result in account lockout.

Connect Circle and Webflow with Zapier

Zapier provides a direct Circle + Webflow integration with dedicated triggers, actions, and seven pre-built templates. This is the main no-code path for workflows where Webflow is explicitly the trigger or action app. Because Webflow forms submit to Webflow's backend, Zapier (or similar middleware) is needed for workflows such as Webflow New Form Submission → Circle Invite Member.

To connect Circle and Webflow through Zapier:

1. Create a Zapier account and connect both your Webflow and Circle accounts.
2. Set a trigger such as Webflow New Form Submission or Circle New Member Added.
3. Set an action such as Circle Invite Member or Webflow Create Item.
4. Map fields like email and name from the trigger to the action.
5. Test and activate the Zap.

This gives you a working automation path between the two tools without custom code.

Circle triggers available on Zapier include:

• Circle New Member Added
• Circle New Post
• Circle New Event Created
• Circle Member Removed
• Circle Content Rejected

These Circle-side triggers cover the main events most teams send into Webflow or downstream tools.

Webflow triggers and actions available on Zapier include:

• Webflow New Form Submission
• Webflow Site Published
• Webflow Create Item
• Webflow Fulfill Order
• Webflow Update Live Item
• Webflow Find Live Item
• Webflow API Request (Beta)

These Webflow-side options cover both event-based triggers and follow-up actions.

The seven pre-built Zap templates cover common workflows:

• Create new Webflow items from new Circle posts
• Add new Circle members to Webflow as live items
• Invite new members in Circle for every new Webflow form submission
• Create new Webflow items for every new Circle event
• Create Webflow live items from new Circle events
• Create items in Webflow whenever new members are added in Circle
• Create new Circle contacts from new Webflow form submissions

These templates are a practical starting point if you want to launch a workflow quickly and adjust the field mapping afterward.

Set up custom profile fields in Circle before configuring Zapier to make sure field mapping works correctly. Zapier usage does not count toward Circle's monthly Admin API limits.

Build with the Webflow and Circle APIs

For teams that need full control over member management, content sync, and embedded community features, the Circle and Webflow APIs provide direct programmatic access. This approach requires server-side development and is best suited for custom member directories, headless community experiences, automated enrollment workflows, and real-time data pipelines between the two platforms.

The relevant APIs are:

• Circle's Admin API v2 handles member creation, space management, and access group assignments. Requires a Circle Business plan or higher.
• Circle's Headless API lets you embed Circle features (discussions, feeds, events) in your Webflow site using member-specific JWTs. Requires a Circle Business plan or higher.
• Webflow's Data API v2 handles CMS collections, items, form submissions, and ecommerce data.
• Webflow webhooks trigger real-time events like form_submission, collection_item_created, and ecomm_new_order.

Together, these APIs support deeper integrations than embeds or no-code automations alone.

Circle authenticates Admin API requests with a token header (Authorization: Token <AUTH_TOKEN>) plus a host header on every v2 request. Webflow authenticates with a Bearer token (Authorization: Bearer <token>). Both tokens must be kept server-side and never exposed in client code.

Sync Circle members to a Webflow CMS collection

When a new member joins your Circle community, you can automatically create a corresponding CMS item in Webflow for a public member directory page. One event-driven pattern is to use Circle's Workflows UI to send a webhook to your server when a member joins. That webhook action requires Circle Plus. Your server then creates the CMS item through the Webflow API.

To implement member sync:

1. In Circle, create an automation workflow with the "Joined community" trigger and a "Send to webhook" action pointing to your server endpoint.
2. When your server receives the webhook payload (containing email, name, and member ID), call GET /v2/sites/{site_id}/collections to find the target collection ID.
3. Call POST /v2/collections/{collection_id}/items to create a draft CMS item with the member's data.
4. Publish the item with POST /v2/collections/{collection_id}/items/publish, or create it as a live item with POST /v2/collections/{collection_id}/items/live.

This pattern keeps a public Webflow directory aligned with your Circle membership data.

Store the circle-member-id as a plain text field in your Webflow collection for deduplication. Without it, checking for existing members requires scanning the entire item list. Plan your collection structure accordingly if you expect a large member base.

Authenticate members with the Headless API

The Headless API lets you generate member-specific JWTs so authenticated users can interact with Circle features embedded in your Webflow site without logging in a second time. This solves the double-login problem that occurs with basic iFrame embeds.

To implement headless authentication:

1. Generate a Headless Auth token in Circle under Settings > Developers > Tokens (select "Headless Auth" token type).
2. When a member loads your Webflow page, client-side JavaScript calls your auth server.
3. Your server calls Circle's Auth API at POST /api/v1/headless/auth_token with the member's identity and your application token.
4. Circle returns an access_token (JWT, expires in 1 hour) and a refresh_token (expires in 1 month).
5. Your server passes the access_token to the client, which uses it to call the Circle Member API for community data.
6. To set session cookies in iFrame embeds, use Circle's /api/headless/v1/cookies endpoint or a URL redirect with the access token.

This is the most flexible path when you need embedded community features with a smoother sign-in experience.

The community domain must share the same top-level domain as your Webflow site to avoid third-party cookie restrictions in Chrome and Safari. Webflow's native Memberships system does not expose OAuth 2.0 endpoints, so for SSO setups you need a third-party auth provider like Memberstack or Auth0 to act as the OAuth bridge between your Webflow site and Circle's SSO. Custom SSO itself requires Circle Plus.

What can you build with the Circle Webflow integration?

Integrating Circle with Webflow lets you run community-driven features alongside a fully designed marketing site without rebuilding either platform.

• Course platform with student forums: Build a Webflow marketing site for course sales and embed Circle discussion spaces on member-only pages so students can ask questions, share progress, and collaborate on lessons directly within your branded site.
• Public member directory: Sync new Circle members to a Webflow CMS collection through Zapier or the API, then display a searchable, publicly visible member directory on your Webflow site using a Collection List.
• Community-driven event calendar: Use Circle New Event Created to trigger Webflow Create Item in Zapier so each event gets its own SEO-friendly page on your Webflow site with a registration link that points back to Circle.
• Form-based community onboarding: Use Webflow New Form Submission to trigger Circle Invite Member in Zapier so new subscribers get an invitation to join your community without manual data entry.

These examples cover the most common ways teams combine Webflow's site-building tools with Circle's community features.

If you need more control over access group assignments, headless authentication, or bidirectional data sync, the API integration path covers those cases with full flexibility.