Widget Integration — Embed FAQ on Your Site

Embed TheFAQApp FAQ widgets in your website or app using the JavaScript snippet or React SDK. Customizable and lightweight.

Quick Install

Install the TheFAQApp SDK to embed a fully functional FAQ widget in your website.

npm install @faqapp/core

yarn add @faqapp/core

pnpm add @faqapp/core

bun add @faqapp/core

Basic Usage

import { FAQClient } from '@faqapp/core';

const client = new FAQClient({
  apiKey: process.env.FAQ_API_KEY!,
  organizationSlug: 'your-org',
});

// Fetch all published questions
const page = await client.questions.list({ status: 'published' });
console.log(page.data);

Render in HTML

<div id="faq-widget"></div>

<script type="module">
  import { FAQClient } from 'https://unpkg.com/@faqapp/core';

  const client = new FAQClient({
    apiKey: 'faq_your-public-read-key',
    organizationSlug: 'your-org',
  });

  const page = await client.questions.list();
  const container = document.getElementById('faq-widget');

  page.data.forEach((item) => {
    const details = document.createElement('details');
    details.innerHTML = `
      <summary>${item.question}</summary>
      <div>${item.answer}</div>
    `;
    container.appendChild(details);
  });
</script>

Next.js Integration

For Next.js applications, use the dedicated @faqapp/nextjs package which provides React hooks, components, and server-side data fetching.

npm install @faqapp/nextjs

Server Component (Recommended)

import { FAQClient, FaqList } from '@faqapp/nextjs';

export default async function FaqPage() {
  const client = new FAQClient({
    apiKey: process.env.FAQ_API_KEY!,
    organizationSlug: 'your-org',
  });

  const page = await client.questions.list({ status: 'published' });
  const categories = await client.categories.list({ limit: 100 });

  return (
    <FaqList
      questions={page.data}
      categories={categories.data}
      showCategories
      searchable
    />
  );
}

Client-Side with Search

'use client';

import { useSearch } from '@faqapp/nextjs';

export default function SearchableFaq() {
  const { data, loading, search } = useSearch({
    config: {
      apiKey: process.env.NEXT_PUBLIC_FAQ_API_KEY!,
      organizationSlug: 'your-org',
    },
  });

  return (
    <div>
      <input
        placeholder="Search FAQs..."
        onChange={(e) => search(e.target.value)}
      />
      {data?.results.map((q) => (
        <a key={q.id} href={`/faq/${q.slug}`}>{q.question}</a>
      ))}
    </div>
  );
}

See TypeScript SDK and Next.js SDK for the full API reference.

Configuration

The SDK client accepts these configuration options:

Option	Type	Required	Description
`apiKey`	string	Yes	Your API key (use `read` scope)
`organizationSlug`	string	Yes	Your organization slug
`baseUrl`	string	No	API base URL (default: `https://api.faq.money`)
`timeout`	number	No	Request timeout in ms (default: 30000)

const client = new FAQClient({
  apiKey: process.env.FAQ_API_KEY!,
  organizationSlug: 'your-org',
  baseUrl: 'https://api.faq.money',
  timeout: 5000,
});

Customization

Custom CSS

Override default styles with CSS custom properties:

.faq-list {
  --faq-primary: #0066cc;
  --faq-bg: #ffffff;
  --faq-text: #1a1a1a;
  --faq-border: #e5e7eb;
  --faq-radius: 8px;
  --faq-font: 'Inter', sans-serif;
}

Custom Rendering

For full control, fetch data with the SDK and render your own UI:

import { FAQClient } from '@faqapp/core';

const client = new FAQClient({
  apiKey: process.env.FAQ_API_KEY!,
  organizationSlug: 'your-org',
});

// Fetch questions by category
const page = await client.questions.list({
  category: 'getting-started',
  status: 'published',
});

// Render with your own components
page.data.forEach((q) => {
  console.log(q.question, q.answer);
});

Widget Integration — Embed FAQ on Your Site

On this page