> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stringboot.com/llms.txt
> Use this file to discover all available pages before exploring further.

# FAQ Provider

> Integrate dynamic FAQs with offline support

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.

```javascript theme={null}
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

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

### Filter by Tag

```javascript theme={null}
// 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.

```javascript theme={null}
// 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.

```tsx theme={null}
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.