Widget Setup
Custom Elements Reference
The FAQsIR widget registers two custom HTML elements. Both are standard web components that work in any HTML page -- no framework required.
FAQSIR Panel
A full-featured tabbed panel with a launcher button and modal overlay.
<faqsir-panel></faqsir-panel>
Behavior
- Renders a launcher callout with button (labeled "Summarise" by default, customizable via
panel_launcher_label). - When clicked, opens a full-screen modal with a tabbed interface.
- Always-visible tabs: Summary, FAQs, Chat.
- Conditional tabs: Video (shown when the API returns a video URL and your plan enables it).
- The modal locks background scroll while open and restores it on close.
- Focus is trapped inside the modal for accessibility.
- Press
Escapeto close the modal. - When sticky CTA is enabled, the launcher callout button becomes fixed-position hides when the modal is open.
Launcher Button
The launcher button appearance is controlled by configuration:
- Label: Set via
options.panel_launcher_label(default: "Summarise"). - Position: Inline by default; fixed-position when
sticky_cta.enabledistrue.
Modal Tabs
| Tab | Label (Desktop) | Description |
|---|---|---|
| Summary | Article Summary | AI-generated summary with optional sentiment bar |
| FAQs | Key Questions | Accordion list of AI-generated FAQs |
| Video | Video Summary | Embedded YouTube/Vimeo player (conditional) |
| Chat | Discuss This Article | Conversational AI chat interface |
FAQSIR Widget
A standalone element that renders a single feature inline on the page.
<faqsir-widget type="faq"></faqsir-widget>
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
type |
string |
"faq" |
Which feature to render. See Type Values. |
Type Values
| Value | Renders | Description |
|---|---|---|
faq |
FAQ Accordion | List of AI-generated questions and answers |
summary |
Summary Button/Modal | Button that opens a summary modal overlay |
chat |
Chat Interface | Floating chat bubble (bottom-right corner) |
Usage Examples
Inline FAQ list:
<faqsir-widget type="faq"></faqsir-widget>
Summary button that opens a modal:
<faqsir-widget type="summary"></faqsir-widget>
Floating chat bubble:
<faqsir-widget type="chat"></faqsir-widget>
Multiple Elements on One Page
You can use multiple <faqsir-widget> and <faqsir-panel> elements on the same page. They share the same underlying data store, so only one API call is made regardless of how many elements are present.
<!-- Floating panel with all features -->
<faqsir-panel></faqsir-panel>
<!-- Inline FAQ list elsewhere on the page -->
<faqsir-widget type="faq"></faqsir-widget>