-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathchatbees_demo.html
More file actions
116 lines (111 loc) · 6.36 KB
/
chatbees_demo.html
File metadata and controls
116 lines (111 loc) · 6.36 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChatBot</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css'>
<link rel="stylesheet" href="chatbees_styles.css">
</head>
<body>
<!-- Your unique page content goes here -->
<div class="mt-8 px-4">
<h2>Hello ChatBees</h2>
</div>
<!-- Floating button -->
<button id="chatbeesFloatBtn"
class="fixed bottom-8 right-8 inline-flex items-center justify-center text-sm font-medium disabled:pointer-events-none disabled:opacity-50 border rounded-full w-16 h-16 hover:bg-gray-700 m-0 cursor-pointer border-gray-200 p-0 normal-case leading-5 hover:text-gray-900 floating-button"
type="button" aria-haspopup="dialog" aria-expanded="false" data-state="closed"
style="background-color: #fb9e40; z-index: 9998;"
aria-label="Open ChatBees Popup">
<svg xmlns=" http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="white"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-white block border-gray-200 align-middle">
<path d="m3 21 1.9-5.7a8.5 8.5 0 1 1 3.8 3.8z" class="border-gray-200"></path>
</svg>
</button>
<!-- Chat Popup -->
<div class="chatbees-popup" id="chatbeesPopup">
<div class="chatbees-header bg-black p-2.5">
<div class="chatbees-left-section">
<img src="chatbees_logo_favicon_white.svg" alt="Chat Logo" class="chatbees-logo mr-2">
<a href="https://www.chatbees.ai/pricing" target="_blank" style="color: white;"><strong>ChatBees</strong></a>
</div>
<div class="chatbees-right-section">
<button id="chatbeesClearBtn" aria-label="Clear ChatBees Chat Message" class="w-8 h-8">
<svg viewBox="0 0 36 36" class="w-5" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" stroke="#ffffff" aria-hidden="true"><path d="M22.4,11.65a1.09,1.09,0,0,0,1.09,1.09H34.43V1.81a1.09,1.09,0,1,0-2.19,0V8.95a16.41,16.41,0,1,0,1.47,15.86,1.12,1.12,0,0,0-2.05-.9,14.18,14.18,0,1,1-1.05-13.36H23.5A1.09,1.09,0,0,0,22.4,11.65Z"></path></svg>
</button>
<button id="chatbeesCloseBtn" aria-label="Close ChatBees Popup" class="w-8 h-8">
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="#ffffff" stroke="#ffffff" ><path d="M19.41,18l8.29-8.29a1,1,0,0,0-1.41-1.41L18,16.59,9.71,8.29A1,1,0,0,0,8.29,9.71L16.59,18,8.29,26.29a1,1,0,1,0,1.41,1.41L18,19.41l8.29,8.29a1,1,0,0,0,1.41-1.41Z"></path></svg>
</button>
</div>
</div>
<div class="chatbees-chat-area" id="chatbeesChatArea">
</div>
<div class="hidden relative" id="chatbeesFeedbackArea">
<div class="border p-3">
<div class="flex text-gray-700 mb-4 text-sm">
<div>
We value your feedback! Please leave your email and a message below.
</div>
<button type="button"
id="chatbeesFeedbackCloseBtn"
class="w-8 h-8 hover:text-blue-700"
aria-label="Close Feedback Form">
<svg width="24" height="24" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" stroke="currentColor">
<path d="M19.41,18l8.29-8.29a1,1,0,0,0-1.41-1.41L18,16.59,9.71,8.29A1,1,0,0,0,8.29,9.71L16.59,18,8.29,26.29a1,1,0,1,0,1.41,1.41L18,19.41l8.29,8.29a1,1,0,0,0,1.41-1.41Z"></path>
</svg>
</button>
</div>
<div class="flex pb-2">
<input type="email"
class="flex-grow border border-gray-200 p-2 focus:border-blue-500"
id="chatbeesEmailInput" placeholder="Please enter your email address" />
</div>
<div class="flex">
<textarea
class="flex-grow border border-gray-200 p-2 mr-2 resize-none focus:border-blue-500"
id="chatbeesFeedbackTextArea"
maxlength="140"
placeholder="Your message (optional, up to 140 characters)"></textarea>
<button type="button"
class="border p-2 w-20 flex items-center justify-center hover:bg-blue-50 hover:text-blue-700 hover:border-blue-500"
id="chatbeesSubmitFeedbackButton">
Submit
</button>
</div>
<div id="chatbeesFeedbackMask" class="hidden absolute inset-0 bg-black opacity-80 flex items-center justify-center">
<div class="sending text-blue-700 text-3xl font-bold italic">
Sending<span class="dot">.</span><span class="dot">.</span><span class="dot">.</span>
</div>
</div>
</div>
</div>
<div class="chatbees-user-input-area">
<textarea id="chatbeesUserInput" placeholder="Type your message here"></textarea>
<!--
Please replace the chatbeesAccountID and chatbeesCollectionName with your account id
and collection name. chatbeesNamespaceName is "public" by default currently, you can
change it when we support creating namespace.
Note: if the collection does not allow public read, please add your Api-Key to the
rest request in chatbees_script.js
-->
<input type="hidden" id="chatbeesAccountID" value="public">
<input type="hidden" id="chatbeesNamespaceName" value="public">
<input type="hidden" id="chatbeesCollectionName" value="collectionName">
<button
id="chatbeesSendMessageBtn"
class="flex h-16 w-16 items-center justify-center rounded-md bg-primary text-white hover:text-gray-900 bg-black"
aria-label="Ask ChatBees Question">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"fill="none">
<path d="M22 2L11 13" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="chatbees_script.js"></script>
</body>
</html>