Layouts

Everything the embed puts in your product is a widget, and each layout below is one Widget() call. You choose two things:

• Where it shows: inline, inside an element on your page (the default), or floating, over your page behind a button.
• What it shows first: home, assistant or docs.

These examples assume init() has run. If not, start with the Quickstart or Frameworks.

Docs in your page

A docs page inside a screen of your product, such as next to a setup form. It grows to its full height like the rest of your page, with the AI Assistant in its corner.

DocumentationAI.Widget({
  target: '#help',
  defaultView: 'docs',
  path: '/getting-started/quickstart',
});

• path is the page it starts on. Without it, your docs' first page.
• header: true adds a bar above the page with its title, a Back button and search.
• Docs pages show without your docs site's navbar, sidebar and table of contents.

AI chat in your page

The AI Assistant as a chat inside an element on your page:

DocumentationAI.Widget({ target: '#chat', defaultView: 'assistant' });

Help button

A Help button in the corner of the screen. It opens a panel with a greeting, a box to ask, your starter questions and your own lists of links.

DocumentationAI.Widget({
  display: 'floating',
  greeting: 'How can we help?',
  collections: [
    {
      title: 'Get started',
      links: [
        { title: 'Quickstart', path: '/getting-started/quickstart' },
        { title: 'Contact support', href: 'mailto:support@example.com' },
      ],
    },
  ],
});

• A link with path opens that docs page inside the panel. A link with href opens in a new tab.
• launcher changes the button's text and position. See Launcher options.

Ask AI bar

An Ask AI a question... bar at the bottom of the screen. When a user types a question and presses Enter, the panel opens with the answer in the bar's place.

DocumentationAI.Widget({
  display: 'floating',
  launcher: { type: 'input', position: 'bottom-center' },
});

Docs without the AI Assistant

Add assistant: false to any layout to show docs only, with no box to ask and no Ask AI. A site with its AI Assistant turned off works the same way.

DocumentationAI.Widget({ target: '#help', defaultView: 'docs', assistant: false });

Match your product's look

• Light and dark: pass theme to init(), then call setTheme() from your app's theme switch.
• Brand color: pass accentColor to init() to use your color in the AI Assistant. Without it, the AI Assistant uses your docs site's brand color.

DocumentationAI.init({ publishableKey: 'pk_...', theme: 'system', accentColor: '#4f46e5' });

// From your app's theme switch:
DocumentationAI.setTheme('dark');

Docs pages keep your docs site's own colors and typography.

Next steps