Chat Widget

The FAQSIR chat widget provides a conversational AI interface that lets users ask questions about your articles. Available on Plus and Pro plans, the chat feature can be embedded as part of the full panel or as a standalone floating chat bubble.

Chat Modes

Panel Chat

The chat is available as a tab within the <faqsir-panel> component. When a user opens the panel and selects the Chat tab (labelled "Discuss This Article"), they see a full-height chat interface embedded in the modal.

<faqsir-panel></faqsir-panel>

The panel chat includes:

• A welcome screen with suggested questions when the chat is empty
• An input field for typing messages
• A scrollable message thread with user messages (right-aligned) and AI responses (left-aligned)
• An "AI Assisted" indicator

Standalone Chat

The standalone chat renders as a floating bubble button, typically in the bottom-right corner of the page:

<faqsir-widget type="chat"></faqsir-widget>

When clicked, it opens a compact chat window (320px wide, 400px tall) with:

• A header bar showing "Ask FAQsIR"
• A "clear chat" button to reset the conversation
• A close button
• Suggested questions when the thread is empty
• The same message input and thread display as panel chat

Conversation Flow

Starting a Conversation

When the chat opens for the first time, it displays a welcome screen with suggested questions. These are generated from the article content and give users a starting point for their enquiry. Users can click a suggestion or type their own question.

Message Exchange

1. The user types a message and submits it
2. The message is sent to the Chat endpoint along with the session_id and source_id
3. The AI generates a response using the article content as context
4. The response is displayed in the chat thread

Conversation History

The chat maintains up to 20 messages of conversation history per session. This allows natural follow-up questions — the AI remembers what was discussed earlier in the conversation and can build on previous responses.

The session_id is stored in the browser's localStorage, so conversations persist across page reloads. Clearing the chat (via the clear button) generates a new session ID, starting a fresh conversation.

Basic vs Advanced Chat

The chat feature has two tiers that differ in the AI's available context:

Basic Chat (Plus Plan)

The AI responds using only the content extracted from the specific article being viewed — the summary paragraphs and FAQ content. This works well for questions directly related to the article. Chat is not available on the Starter plan.

Advanced Chat (Pro Plan)

In addition to the article content, the AI can perform vector search across your site's Knowledge Base. This means the AI can draw on your uploaded documents, reference materials, and organisational knowledge to provide richer, more comprehensive answers.

Advanced Chat is enabled automatically on Pro plans when you have at least one indexed Knowledge Base document. No additional configuration is required.

Capability	Basic Chat	Advanced Chat
Answer from article content	✓	✓
Follow-up questions (20 msg history)	✓	✓
Search Knowledge Base documents	—	✓
Cross-reference multiple topics	—	✓

Configuration

The chat widget inherits its configuration from the global window.faqsir object. No chat-specific configuration options are required beyond the standard widget configuration.

Key configuration that affects chat:

Option	Effect on Chat
api_key	Authenticates chat requests
site_id	Identifies which site's content to use
options.api_url	Base URL for chat API calls

Error Handling

If the chat encounters an error (network issue, server error, or AI processing failure), it displays:

"Sorry, something went wrong."

The user can send another message to retry. There is no automatic retry for chat messages, as the user may want to rephrase their question.

If the AI determines a question is outside the scope of the article content, it returns a polite message indicating it cannot answer that particular question based on the available information.

Combining with Other Elements

You can use the standalone chat alongside the panel on the same page. Both elements share the same underlying data, so only one API call is made:

<!-- Full panel with all features including chat tab -->
<faqsir-panel></faqsir-panel>

<!-- Standalone floating chat bubble -->
<faqsir-widget type="chat"></faqsir-widget>

Next Steps