Integrate a knowledge base in FlutterFlow by connecting to an existing help center platform via its API or by building a custom Firestore article database. Zendesk Help Center: API Group at https://{subdomain}.zendesk.com/api/v2/help_center/ with GET /articles for search. Notion as KB: Notion API POST /search for article lookup. Custom Firestore KB: articles collection with title, excerpt, body, and category fields, with Algolia for full-text search. Always load only article titles and excerpts in the list view — fetch the full body only when an article is tapped.
Embed your help center directly in your FlutterFlow app
A knowledge base inside your app reduces support requests by letting users find answers without leaving the app or emailing support. You have three options: connect to an existing help desk platform (Zendesk, Intercom, Freshdesk) via its API, use Notion as a lightweight content management system for your articles, or build a fully custom knowledge base in Firestore with your own categories, tags, and search. This tutorial walks through all three approaches so you can pick the one that fits your existing tools.
Prerequisites
- A FlutterFlow project created and open in the editor
- One of: a Zendesk account with Help Center enabled, a Notion workspace with your articles, or a Firebase Firestore project
Step-by-step guide
Option A: Connect to Zendesk Help Center API
Option A: Connect to Zendesk Help Center API
In FlutterFlow's API Manager, add an API Group named ZendeskHelpCenter with base URL https://{your-subdomain}.zendesk.com/api/v2/help_center. Add the Accept: application/json header. For the API Call named searchArticles: method GET, path /articles/search.json, query parameters: query=[searchQuery] (variable, String), locale=en-us (static). Add a second API Call named listArticles: method GET, path /articles.json, query parameters: per_page=20 (static), page=[pageNumber] (variable). For categories: path /categories.json. Test both calls to verify responses. The response has an articles array with: id, title, html_url, snippet (excerpt), section_id. NOTE: Only the free Help Center is publicly accessible without auth. If your Help Center requires sign-in, add an Authorization header with a Zendesk API token in Basic Auth format: email/token:{your-api-token}.
Expected result: The API Manager test returns a list of your Zendesk articles with titles and excerpt snippets.
Option B: Use Notion as a knowledge base
Option B: Use Notion as a knowledge base
In Notion, create a database page named Knowledge Base. Add properties: Title (default), Category (select), Published (checkbox). Add your articles as Notion pages inside this database. In FlutterFlow's API Manager, add an API Group named NotionAPI with base URL https://api.notion.com/v1. Add headers: Authorization: Bearer [NOTION_API_KEY], Notion-Version: 2022-06-28. Store the API key in Settings → Secrets. Add an API Call named queryDatabase: method POST, path /databases/{databaseId}/query, body: {"filter": {"property": "Published", "checkbox": {"equals": true}}, "sorts": [{"property": "title", "direction": "ascending"}]}. Replace {databaseId} with your Notion database ID (found in the database URL). For search, use POST /search with body {"query": [searchQuery], "filter": {"property": "object", "value": "page"}}. For article detail, GET /blocks/{pageId}/children to retrieve the page content blocks.
Expected result: The API Manager returns your Notion database pages as articles with titles and properties.
Option C: Build a custom Firestore knowledge base
Option C: Build a custom Firestore knowledge base
In FlutterFlow's Firestore panel, create a collection named articles with fields: title (String), excerpt (String, first 200 characters of the article), body (String, full markdown content), category (String), tags (Array of String), publishedAt (Timestamp), viewCount (Integer). Add a categories collection with fields: name (String), icon (String). Populate articles via the FlutterFlow Content Manager or directly in Firebase Console. For search: because Firestore does not support full-text search, integrate Algolia (algolia.com). Create a Cloud Function triggered by Firestore writes to articles → sync document to Algolia index on create/update/delete. In FlutterFlow, add an API Call to the Algolia search API: GET https://{APP_ID}-dsn.algolia.net/1/indexes/articles/query with headers X-Algolia-API-Key and X-Algolia-Application-Id (these are search-only keys, safe to use in the app). Display search results with title and excerpt.
Expected result: A full-featured knowledge base with category browsing and real-time search powered by Algolia is available inside your FlutterFlow app.
Build the knowledge base UI in FlutterFlow
Build the knowledge base UI in FlutterFlow
Create a HelpCenter page. Add a TextField at the top for search queries, a Row of ChoiceChips for category filtering (All, Getting Started, Billing, Troubleshooting). Below that, add a Backend Query to a Column widget using whichever data source you chose. Use Generate Dynamic Children to create one article card per item. Each article card: a Container with title (Text, bold), excerpt (Text, 2-line max, gray), and a row showing the category chip + viewCount. Make the entire card tappable: navigate to ArticleDetail page passing the article ID as a page parameter. On the ArticleDetail page, add a Backend Query for the full article by ID. Display the title as an H1-sized Text. For the body: if using plain text, use a Text widget. For markdown content, add a Custom Widget using the flutter_markdown package. For HTML (Zendesk), add a Custom Widget using flutter_html package. Add a Back button in the AppBar.
Expected result: The help center shows a searchable, filterable list of articles. Tapping an article opens a detail page with the full content rendered correctly.
Complete working example
1KNOWLEDGE BASE IN FLUTTERFLOW — THREE OPTIONS23OPTION A: ZENDESK HELP CENTER4├── API Group: ZendeskHelpCenter5│ └── Base URL: https://{subdomain}.zendesk.com/api/v2/help_center6├── API Call: searchArticles7│ └── GET /articles/search.json?query=[q]&locale=en-us8├── API Call: listArticles9│ └── GET /articles.json?per_page=20&page=[page]10└── Response fields: articles[].id, title, snippet, html_url1112OPTION B: NOTION API13├── API Group: NotionAPI14│ └── Base URL: https://api.notion.com/v115│ └── Headers: Authorization, Notion-Version16├── API Call: queryDatabase17│ └── POST /databases/{dbId}/query18├── API Call: getPageContent19│ └── GET /blocks/{pageId}/children20└── Response: pages[].properties.Title, page blocks2122OPTION C: CUSTOM FIRESTORE23├── Collection: articles24│ └── Fields: title, excerpt, body, category, tags25├── Collection: categories26│ └── Fields: name, icon27├── Search: Algolia index synced via Cloud Function28│ └── Search API Call: Algolia search endpoint29└── All managed in FlutterFlow Content Manager3031UI STRUCTURE:32├── HelpCenter page33│ ├── TextField (search query)34│ ├── ChoiceChips Row (category filter)35│ └── ListView (article cards: title + excerpt)36│ └── onTap: navigate to ArticleDetail37└── ArticleDetail page (param: articleId)38 ├── Backend Query by ID39 ├── Text (title, large bold)40 └── Custom Widget (flutter_markdown or flutter_html)4142PERFORMANCE RULE:43└── List view: load title + excerpt ONLY44 └── Never load full article bodies in the listCommon mistakes
Why it's a problem: Loading full article bodies in the list view when articles can be 10KB or more of HTML
How to avoid: Fetch only title and excerpt (first 200 characters) in the list query. Load the full article body only when the user taps a specific article and navigates to the detail page.
Why it's a problem: Using Firestore's built-in query filters for article search instead of Algolia
How to avoid: Sync your Firestore articles to Algolia via a Cloud Function trigger. Use Algolia's search API for keyword searches. Keep Firestore for structured queries (by category, by date) and Algolia for text search.
Why it's a problem: Rendering HTML article bodies with a standard Text widget, displaying raw HTML tags to users
How to avoid: Add the flutter_html package as a Custom Widget. It renders HTML correctly with proper heading sizes, bold text, lists, and links. For Markdown content (from Notion or custom Firestore), use the flutter_markdown package instead.
Best practices
- Load only article title and excerpt in list views — fetch full article body only when the user navigates to the detail page
- Add a viewCount field to articles and increment it with FieldValue.increment(1) each time an article is opened — use this data to surface the most helpful articles first
- Implement Algolia or another search service for any knowledge base with more than 20 articles — Firestore filters cannot do full-text search
- Use a Custom Widget with flutter_html or flutter_markdown for article bodies — never use a plain Text widget for HTML or markdown content
- Add a 'Was this helpful? Yes / No' rating at the bottom of each article detail page and store ratings in Firestore — use this data to improve content
- Cache the article list in App State after first load — knowledge base content changes infrequently and re-fetching on every navigation wastes API calls
- Keep your knowledge base content in sync between your help desk platform and any Firestore cache using webhooks or scheduled Cloud Functions
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building a FlutterFlow app and want to add a help center section that lets users search for articles and read them in-app. I currently use [Zendesk / Notion / nothing yet]. Explain the best approach to integrate article browsing and search into my FlutterFlow app, including how to render rich text article bodies and how to handle search when I have 50+ articles.
Create a help center section in my FlutterFlow app using a custom Firestore knowledge base. Set up an articles collection with fields: title, excerpt, body, category, tags. Build a HelpCenter page with a search TextField and category ChoiceChips filter. Display articles in a ListView showing title and excerpt. Navigate to an ArticleDetail page on tap, passing the article document reference, and display the full article body using a flutter_markdown Custom Widget.
Frequently asked questions
How do I add a knowledge base to my FlutterFlow app?
You have three options: (1) Connect to Zendesk Help Center via the API Manager using GET /articles.json and /articles/search.json endpoints. (2) Use Notion as a CMS — query your Notion database via the Notion API and display pages as articles. (3) Build a custom knowledge base in Firestore with an articles collection and use Algolia for search. All three follow the same UI pattern: search + category filter on a list page, full article content on a detail page.
Can I use my existing Zendesk Help Center inside my FlutterFlow app?
Yes. Zendesk has a REST API for its Help Center. Add an API Group in FlutterFlow pointing to https://{subdomain}.zendesk.com/api/v2/help_center. Public (unauthenticated) help centers work without any credentials. Password-protected help centers require Basic Auth with your Zendesk email and API token. The /articles/search.json endpoint lets users search by keyword and returns matching articles with titles and snippets.
How do I display HTML article content in FlutterFlow?
Add the flutter_html package as a Custom Widget in FlutterFlow (Custom Code → Custom Widgets → Add Widget → add flutter_html to pubspec dependencies). The widget accepts an HTML string and renders it with proper heading formatting, bold/italic text, ordered and unordered lists, links, and basic images. Pass the article's HTML body field to the widget via a Custom Widget parameter.
Can I use Notion as a knowledge base for my FlutterFlow app?
Yes. Create a Notion database with your articles, create a Notion integration at developers.notion.com, and share your database with the integration to get an API token. In FlutterFlow's API Manager, add the Notion API Group with Authorization: Bearer [token] and Notion-Version: 2022-06-28 headers. Query your database with POST /databases/{id}/query and display the returned page titles and properties. For article body content, fetch page blocks with GET /blocks/{pageId}/children and render them as text.
How do I add full-text search to a Firestore-based knowledge base?
Firestore does not support full-text search — where clauses only work for exact matches or range queries. To add search, integrate Algolia: (1) create a free Algolia account, (2) create an index named articles, (3) deploy a Firebase Cloud Function triggered by Firestore article writes that syncs documents to Algolia on create, update, and delete. In FlutterFlow, call the Algolia search API with a search-only API key (safe to put in the app). Algolia returns ranked, partial-match results for any search query.
What is the difference between a knowledge base and a simple FAQ section?
A FAQ section is typically a static list of question-answer pairs displayed with an accordion on one page — suitable for 5-15 items. A knowledge base is a structured, searchable collection of longer articles organized into categories — appropriate for 20+ articles covering how-to guides, troubleshooting steps, policy explanations, and tutorials. If you have more than 15 support topics or need search, build a knowledge base rather than extending a FAQ.
Can RapidDev build a custom in-app knowledge base for my FlutterFlow app?
Yes. A production knowledge base includes article management, search, category navigation, reading analytics, helpful/not helpful ratings, and admin tools for publishing new articles — all connected to your existing support platform. RapidDev can build the full in-app help center including the FlutterFlow UI, Firestore schema, Algolia integration, and a web-based admin panel for your support team to manage articles.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation