Help Drawer
An in-app help side panel with instant search, suggested articles for the current page, an article reader with back, was-this-helpful thumbs and a contact-support footer, opened from a ? button.
Preview
Billing
Current plan
Team · Yearly
12 seats · renews Mar 4
Payment method
•••• 4242
Last invoice
$1,140.00 · Mar 4
Help
Suggested for Billing
Popular
Still stuck?
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| articles | { id, title, summary, body, keywords?, readTime? }[] | — | Help content; search matches title, summary and keywords. Required. |
| suggested / pageName | string[] / string | [] / — | Article ids suggested for the current page (“Suggested for Billing”). |
| open / defaultOpen / onOpenChange | boolean / boolean / (open) => void | — / false / — | Controlled or uncontrolled. |
| defaultArticle | string | — | Start in the reader on this article. |
| onContactSupport | () => void | — | Shows the Contact support footer. |
| onFeedback | (articleId, helpful) => void | — | “Was this helpful?” thumbs. |
| container | "viewport" | "parent" | "viewport" | Dock to the window, or inside the nearest positioned frame. |
| autoFocus | boolean | true | Focus search when it starts open. |
| showTrigger | boolean | true | Render the round “?” button. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.