-
Notifications
You must be signed in to change notification settings - Fork 17
/
index.html
119 lines (106 loc) · 3.67 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./src/icons/ic-sendbird-colored.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Sendbird AI ChatBot</title>
<link rel="preload" href="https://fonts.cdnfonts.com/css/gellix" as="style">
<link rel="stylesheet" href="https://fonts.cdnfonts.com/css/gellix">
<link rel="preload" href="https://fonts.cdnfonts.com/css/sf-pro-display" as="style">
<link rel="stylesheet" href="https://fonts.cdnfonts.com/css/sf-pro-display">
<!-- Prism CSS and JavaScript -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-okaidia.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/toolbar/prism-toolbar.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-bash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-jsx.min.js"></script>
<!-- Prism 'Copy to Clipboard' plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<!-- Custom CSS -->
<style>
body {
margin: 0;
font-family: Gellix, sans-serif;
background-color: #FFFFFF;
}
header {
padding-top: 40px;
padding-left: 80px;
padding-bottom: 41px;
background-color: #F7F7F7;
color: #0D0D0D;
}
h1 {
padding-top: 32px;
margin: 0;
font-size: 56px;
font-weight: 700;
}
main {
padding-left: 80px;
padding-right: 80px;
color: #333;
}
h2 {
font-size: 28px;
color: #000000;
margin-top: 40px;
margin-bottom: 20px;
font-weight: 700;
}
p {
font-size: 1.2em;
line-height: 1.6;
}
pre {
background-color: #f0f0f0;
border-radius: 10px;
}
code {
font-size: 1.1em;
}
footer {
text-align: center;
padding: 20px;
color: #333;
}
a {
color: #5c00c7;
}
div.code-toolbar>.toolbar>.toolbar-item>button {
font-size: 1.1em;
}
</style>
</head>
<body>
<header>
<img src="./src/icons/sendbird-logo.svg" alt="Sendbird Logo" style="height: 25px;width: 145px" />
<h1>AI Chatbot Demo</h1>
</header>
<main>
<h2>How to Integrate the Sendbird AI Chatbot</h2>
<p>Once you have your Sendbird account and Application ID, you can install the <strong>Sendbird AI Chatbot Widget</strong> using npm:</p>
<pre><code class="language-bash">npm install @sendbird/chat-ai-widget</code></pre>
<p>Then follow the code snippet below to integrate the <strong>Sendbird AI Chatbot</strong> in your application:</p>
<pre><code class="language-jsx">import { ChatAiWidget } from "@sendbird/chat-ai-widget";
import "@sendbird/chat-ai-widget/dist/style.css";
const App = () => {
return (
<ChatAiWidget
applicationId = "AE8F7EEA-4555-4F86-AD8B-5E0BD86BFE67"
botId = "khan-academy-bot"
/>
);
};
export default App;
</code></pre>
<p>If you need the Sendbird Application ID and Bot ID, you can visit the <a href="https://github.com/sf-luke-cha/ai-chatbot-tutorial/blob/main/README.md" target="_blank">Sendbird AI Chatbot Tutorial</a> for detailed instructions.</p>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</main>
<footer>
</footer>
</body>
</html>