Skip to content

Commit 2ed3725

Browse files
damlayildizdamlayildiz
committed
chore: update readme.md
1 parent b0af50f commit 2ed3725

File tree

1 file changed

+48
-10
lines changed

1 file changed

+48
-10
lines changed

‎README.md‎

Lines changed: 48 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -44,24 +44,52 @@ function App() {
4444
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
4545
</head>
4646
<body>
47-
<div id="chatbot-container"></div>
48-
4947
<script src="https://unpkg.com/@sqliteai/docs-chatbot/dist/umd/docs-chatbot.min.js"></script>
5048

51-
<script>
52-
DocsChatbot.init({
53-
containerId: "chatbot-container",
54-
searchUrl: "your-edge-function-url",
55-
apiKey: "your-api-key",
56-
title: "Your Docs",
57-
});
58-
</script>
49+
<docs-chatbot
50+
search-url="your-edge-function-url"
51+
api-key="your-api-key"
52+
title="Your Docs"
53+
empty-state-title="How can we help?"
54+
empty-state-description="Ask us anything about the documentation">
55+
</docs-chatbot>
5956
</body>
6057
</html>
6158
```
6259

60+
**With dynamic configuration:**
61+
62+
```html
63+
<script src="https://unpkg.com/@sqliteai/docs-chatbot/dist/umd/docs-chatbot.min.js"></script>
64+
65+
<docs-chatbot
66+
title="Your Docs"
67+
empty-state-title="How can we help?"
68+
empty-state-description="Ask us anything about the documentation">
69+
</docs-chatbot>
70+
71+
<script>
72+
const chatbot = document.querySelector('docs-chatbot');
73+
chatbot.setAttribute('search-url', 'your-edge-function-url');
74+
chatbot.setAttribute('api-key', 'your-api-key');
75+
</script>
76+
```
77+
78+
**With CSS custom properties for theming:**
79+
80+
```html
81+
<docs-chatbot
82+
search-url="your-edge-function-url"
83+
api-key="your-api-key"
84+
title="Your Docs"
85+
style="--primary: #f5426c; --primary-foreground: #ffffff">
86+
</docs-chatbot>
87+
```
88+
6389
## Props / Configuration
6490

91+
### React Component
92+
6593
| Property | Type | Required | Description |
6694
| ------------------------ | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------- |
6795
| `searchUrl` | `string` | Yes | Full URL of your deployed SQLite Cloud edge function (e.g., `https://yourproject.sqlite.cloud/v2/functions/aisearch-docs`) |
@@ -70,3 +98,13 @@ function App() {
7098
| `emptyState` | `object` | No | Customizes the initial empty state of the chatbot |
7199
| `emptyState.title` | `string` | No | Main heading shown before the first message |
72100
| `emptyState.description` | `string` | No | Subtext shown below the empty state title |
101+
102+
### Web Component Attributes
103+
104+
| Attribute | Required | Description |
105+
| ----------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------- |
106+
| `search-url` | Yes | Full URL of your deployed SQLite Cloud edge function (e.g., `https://yourproject.sqlite.cloud/v2/functions/aisearch-docs`) |
107+
| `api-key` | Yes | SQLite Cloud API key with permissions to execute the edge function |
108+
| `title` | Yes | Title displayed in the chatbot header |
109+
| `empty-state-title` | No | Main heading shown before the first message |
110+
| `empty-state-description` | No | Subtext shown below the empty state title |

0 commit comments

Comments
 (0)