Embed your help articles directly on your website so customers can find answers without opening a ticket.
The knowledge base widget is configured in Settings → Team → Public Library. Toggle articles to "Public" in your Library to make them visible.
Installation
Drop this script tag on any page:
<script src="https://www.cstar.help/library/embed.js?team=YOUR_TEAM_ID"></script>
Optional theme parameters:
<script src="https://www.cstar.help/library/embed.js?team=YOUR_TEAM_ID&accent=ff6600&bg=ffffff&text=1f2937&radius=12"></script>
| Param | Value |
|---|---|
accent |
Accent color, hex without # |
bg |
Background color, hex without # |
text |
Text color, hex without # |
radius |
Border radius in pixels |
Widget Components
Accordion (categories)
Display articles grouped by category in expandable panels:
<div data-cstar-library-accordion></div>
Pass a category slug to limit it to one category:
<div data-cstar-library-accordion="getting-started"></div>
Search box
Render a search input that queries your library:
<div data-cstar-library-search></div>
Recently viewed
Show the visitor's recently viewed articles:
<div data-cstar-library-recent></div>
Click-to-Open Attributes
Add these attributes to any element to make it open library content. The script delegates clicks automatically.
| Attribute | What it does |
|---|---|
data-cstar-article="slug" |
Open the article with this slug |
data-cstar-article-id="id" |
Open the article by ID |
data-cstar-search="query" |
Open the library with this search query |
data-cstar-library |
Open the library home |
data-cstar-chat |
Open the chat widget (requires the chat embed too) |
Example:
<a href="#" data-cstar-article="getting-started">
Getting Started Guide
</a>
<button data-cstar-search="billing">Search billing articles</button>
<button data-cstar-library>Browse the help center</button>
Combining With the Chat Widget
If you also embed the chat widget (/cstar.js?team=YOUR_TEAM_SLUG), the JavaScript SDK exposes programmatic library calls under the CStarChat global:
await CStarChat.searchArticles('billing', 5);
await CStarChat.getArticle('article-slug');
await CStarChat.getPopularArticles(5);
await CStarChat.getCategories();
The library embed alone doesn't define CStarChat. Pair the two scripts when you want both UI widgets and JS control.
Making Articles Public
- Go to Library in cStar.
- Open the article you want to share.
- Toggle Public to on.
- The article appears in your widget and public library.
Only published, public articles show up in the widget. Drafts and private articles stay internal.