Skip to main content
The FAQ Provider lets you deliver dynamic, multilingual FAQ content with offline-first caching.

​
Initialization

After initializing the main Stringboot SDK, you need to initialize the FAQ module. 
import StringBoot from '@stringboot/web-sdk';

// After initializing StringBoot, initialize FAQ Provider
await StringBoot.FAQ.initialize({
  apiToken: 'YOUR_API_TOKEN',
  baseUrl: 'https://api.stringboot.com',
  cacheSize: 200  // Optional: default is 200
});

​
Fetching FAQs

The getFAQs method provides a flexible way to query your FAQ content.

​
Get All FAQs

// Get all FAQs regardless of tag
const allFAQs = await StringBoot.FAQ.getFAQs({
  tag: 'all',
  lang: 'en',
  allowNetworkFetch: true
});

​
Filter by Tag

// Get FAQs by specific tag
const paymentFAQs = await StringBoot.FAQ.getFAQs({
  tag: 'payments',
  lang: 'en',
  allowNetworkFetch: true
});

​
Advanced Filtering (Sub-tags)

Stringboot supports 2-level filtering using mandatory tags and optional sub-tags. 
// Get FAQs with sub-tag filtering (2-level filtering)
const refundFAQs = await StringBoot.FAQ.getFAQs({
  tag: 'payments',
  subTags: ['refunds', 'disputes'],
  lang: 'en',
  allowNetworkFetch: true
});

​
React Integration

Here is a complete example of how to build an FAQ section in React. 
import { useState, useEffect } from 'react';
import StringBoot from '@stringboot/web-sdk';

function FAQSection() {
  const [faqs, setFaqs] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function loadFAQs() {
      // Initialize FAQ Provider first
      await StringBoot.FAQ.initialize({
        apiToken: 'YOUR_API_TOKEN',
        baseUrl: 'https://api.stringboot.com'
      });

      // Fetch FAQs
      const fetchedFAQs = await StringBoot.FAQ.getFAQs({
        tag: 'all',
        lang: 'en',
        allowNetworkFetch: true
      });

      setFaqs(fetchedFAQs);
      setLoading(false);
    }

    loadFAQs();
  }, []);

  if (loading) return <div>Loading FAQs...</div>;

  return (
    <div>
      {faqs.map(faq => (
        <div key={faq.id}>
          <h3>{faq.question}</h3>
          <p dangerouslySetInnerHTML={{ __html: faq.answer }} />
          <span className="tag">{faq.tag}</span>
        </div>
      ))}
    </div>
  );
}

​
Key Features

  • 2-level filtering: Organize content with a primary Tag and multiple Sub-tags.
  • “All” tag: Use tag: 'all' to fetch your entire FAQ catalog.
  • Offline-first: Content is served from memory first, then IndexedDB, and finally Network.
  • Multi-language: Automatic fallback to the default language if a translation is missing.
  • Delta sync: bandwidth-efficient updates that only download changed FAQs.