@schmitech/chatbot-widget 0.4.7 → 0.4.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +73 -46
- package/dist/chatbot-widget.bundle.js +61 -96
- package/dist/chatbot-widget.css +1 -1
- package/dist/chatbot-widget.es.js +2469 -2632
- package/dist/chatbot-widget.umd.js +60 -95
- package/dist/config/index.d.ts +0 -4
- package/dist/ui/MessagesList.d.ts +2 -2
- package/package.json +1 -1
- package/dist/config.d.ts +0 -42
package/README.md
CHANGED
|
@@ -27,57 +27,84 @@ Add this code to your website:
|
|
|
27
27
|
<script>
|
|
28
28
|
window.addEventListener('load', function() {
|
|
29
29
|
window.initChatbotWidget({
|
|
30
|
+
// Required parameters
|
|
30
31
|
apiUrl: 'https://your-api-url.com', // Your chatbot API endpoint
|
|
31
32
|
apiKey: 'your-api-key', // Your API key
|
|
32
33
|
sessionId: 'optional-session-id', // Required: Provide a session ID
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
{
|
|
43
|
-
text: "How can you help me?", // Display text (truncated based on maxSuggestedQuestionLength)
|
|
44
|
-
query: "What can you do?" // Query sent to API (truncated based on maxSuggestedQuestionQueryLength)
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
text: "Contact support", // Display text
|
|
48
|
-
query: "How do I contact support?" // Query sent to API
|
|
49
|
-
}
|
|
50
|
-
],
|
|
51
|
-
// Optional: Customize length limits for suggested questions
|
|
52
|
-
maxSuggestedQuestionLength: 60, // Display length limit (default: 50)
|
|
53
|
-
maxSuggestedQuestionQueryLength: 300, // Query length limit (default: 200)
|
|
54
|
-
theme: {
|
|
55
|
-
primary: '#4f46e5',
|
|
56
|
-
secondary: '#7c3aed',
|
|
57
|
-
background: '#ffffff',
|
|
58
|
-
text: {
|
|
59
|
-
primary: '#111827',
|
|
60
|
-
inverse: '#ffffff'
|
|
61
|
-
},
|
|
62
|
-
input: {
|
|
63
|
-
background: '#f9fafb',
|
|
64
|
-
border: '#e5e7eb'
|
|
65
|
-
},
|
|
66
|
-
message: {
|
|
67
|
-
user: '#4f46e5',
|
|
68
|
-
assistant: '#f8fafc',
|
|
69
|
-
userText: '#ffffff'
|
|
34
|
+
|
|
35
|
+
// Optional: Custom container selector
|
|
36
|
+
containerSelector: '#my-chat-container', // Place widget in specific container
|
|
37
|
+
|
|
38
|
+
// Widget configuration
|
|
39
|
+
widgetConfig: {
|
|
40
|
+
// Header configuration
|
|
41
|
+
header: {
|
|
42
|
+
title: "Chat Assistant" // Title shown in the chat header
|
|
70
43
|
},
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
hoverBackground: '#f8fafc'
|
|
44
|
+
|
|
45
|
+
// Welcome message configuration
|
|
46
|
+
welcome: {
|
|
47
|
+
title: "Welcome!", // Welcome message title
|
|
48
|
+
description: "How can I help you today?" // Welcome message description
|
|
77
49
|
},
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
50
|
+
|
|
51
|
+
// Suggested questions configuration
|
|
52
|
+
suggestedQuestions: [
|
|
53
|
+
{
|
|
54
|
+
text: "How can you help me?", // Display text (truncated based on maxSuggestedQuestionLength)
|
|
55
|
+
query: "What can you do?" // Query sent to API (truncated based on maxSuggestedQuestionQueryLength)
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
text: "Contact support", // Display text
|
|
59
|
+
query: "How do I contact support?" // Query sent to API
|
|
60
|
+
}
|
|
61
|
+
],
|
|
62
|
+
|
|
63
|
+
// Optional: Customize length limits for suggested questions
|
|
64
|
+
maxSuggestedQuestionLength: 60, // Display length limit (default: 50)
|
|
65
|
+
maxSuggestedQuestionQueryLength: 300, // Query length limit (default: 200)
|
|
66
|
+
|
|
67
|
+
// Theme configuration
|
|
68
|
+
theme: {
|
|
69
|
+
// Main colors
|
|
70
|
+
primary: '#4f46e5', // Header and minimized button color
|
|
71
|
+
secondary: '#7c3aed', // Send button and header title color
|
|
72
|
+
background: '#ffffff', // Widget background color
|
|
73
|
+
|
|
74
|
+
// Text colors
|
|
75
|
+
text: {
|
|
76
|
+
primary: '#111827', // Main text color
|
|
77
|
+
secondary: '#6b7280', // Secondary text color
|
|
78
|
+
inverse: '#ffffff' // Text color on colored backgrounds
|
|
79
|
+
},
|
|
80
|
+
|
|
81
|
+
// Input field styling
|
|
82
|
+
input: {
|
|
83
|
+
background: '#f9fafb', // Input field background
|
|
84
|
+
border: '#e5e7eb' // Input field border color
|
|
85
|
+
},
|
|
86
|
+
|
|
87
|
+
// Message bubble styling
|
|
88
|
+
message: {
|
|
89
|
+
user: '#4f46e5', // User message bubble color
|
|
90
|
+
userText: '#ffffff', // User message text color
|
|
91
|
+
assistant: '#f8fafc' // Assistant message bubble color
|
|
92
|
+
},
|
|
93
|
+
|
|
94
|
+
// Suggested questions styling
|
|
95
|
+
suggestedQuestions: {
|
|
96
|
+
background: '#fff7ed', // Background color
|
|
97
|
+
hoverBackground: '#ffedd5', // Hover background color
|
|
98
|
+
text: '#4338ca' // Text color
|
|
99
|
+
},
|
|
100
|
+
|
|
101
|
+
// Chat button styling
|
|
102
|
+
chatButton: {
|
|
103
|
+
background: '#ffffff', // Button background
|
|
104
|
+
hoverBackground: '#f8fafc' // Button hover background
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
81
108
|
});
|
|
82
109
|
});
|
|
83
110
|
</script>
|