FlowiseChatEmbed/index.html at main · olegchetrean/FlowiseChatEmbed · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chatbot Local Development</title>
</head>

<body>
    <script type="module">
        import Chatbot from 'http://localhost:5678/web.js';
        Chatbot.init({
            chatflowid: '9b59121c-3523-4f5e-afe3-efe7bc7f3cb3',
            apiHost: 'https://bubble.aichat.md',
            observersConfig: {
                // (optional) Allows you to execute code in parent based upon signal observations within the chatbot.
                // The userinput field submitted to bot ("" when reset by bot)
                // observeUserInput: (userInput) => {
                //     console.log({ userInput });
                // },
                // // The bot message stack has changed
                // observeMessages: (messages) => {
                //     console.log({ messages });
                // },
                // // The bot loading signal changed
                // observeLoading: (loading) => {
                //     console.log({ loading });
                // },
            },
            theme: {
                button: {
                    backgroundColor: '#3B81F6',
                    right: 20,
                    bottom: 20,
                    size: 48, // small | medium | large | number
                    dragAndDrop: true,
                    iconColor: 'white',
                    // customIconSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',
                    autoWindowOpen: {
                        autoOpen: true, //parameter to control automatic window opening
                        openDelay: 2, // Optional parameter for delay time in seconds
                        autoOpenOnMobile: false, //parameter to control automatic window opening in mobile
                    },
                },
                tooltip: {
                    showTooltip: true,
                    tooltipMessage: 'Train your website or other resources to get an AI model based on your business expertise. 👋!',
                    tooltipBackgroundColor: 'white',
                    tooltipTextColor: 'black',
                    tooltipFontSize: 16,
                },
                chatWindow: {
                    showTitle: true,
                    showAgentMessages: true,
                    title: 'Flowise Bot',
                    // titleAvatarSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',
                    welcomeMessage: 'Hello! This is custom welcome message',
                    errorMessage: 'This is a custom error message',
                    backgroundColor: '#ffffff',
                    // backgroundImage: 'enter image path or link', // If set, this will overlap the background color of the chat window.
                    height: 700,
                    width: 400,
                    fontSize: 16,
                    starterPrompts: ['What is a bot?', 'Who are you?'], // It overrides the starter prompts set by the chat flow passed
                    starterPromptFontSize: 15,
                    clearChatOnReload: false, // If set to true, the chat will be cleared when the page reloads
                    sourceDocsTitle: 'Sources:',
                    botMessage: {
                        backgroundColor: '#f7f8ff',
                        textColor: '#303235',
                        showAvatar: false,
                        // avatarSrc: 'https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/parroticon.png',
                    },
                    userMessage: {
                        backgroundColor: '#3B81F6',
                        textColor: '#ffffff',
                        showAvatar: false,
                        // avatarSrc: 'https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png',
                    },
                    textInput: {
                        placeholder: 'Type your question',
                        backgroundColor: '#ffffff',
                        textColor: '#303235',
                        sendButtonColor: '#3B81F6',
                        maxChars: 100,
                        maxCharsWarningMessage: 'You exceeded the characters limit. Please input less than 50 characters.',
                        autoFocus: true, // If not used, autofocus is disabled on mobile and enabled on desktop. true enables it on both, false disables it on both.
                        sendMessageSound: true,
                        // sendSoundLocation: "send_message.mp3", // If this is not used, the default sound effect will be played if sendSoundMessage is true.
                        receiveMessageSound: true,
                        // receiveSoundLocation: "receive_message.mp3", // If this is not used, the default sound effect will be played if receiveSoundMessage is true.
                    },
                    feedback: {
                        color: '#303235',
                    },
                    dateTimeToggle: {
                        date: true,
                        time: true,
                    },
                    footer: {
                        textColor: '#303235',
                        text: 'Powered by',
                        company: 'aichat.md',
                        companyLink: 'https://aichat.md',
                    },
                    disclaimer: {
                        title: 'Disclaimer',
                        message: 'By using this chatbot, you agree to the <a target="_blank" href="https://flowiseai.com/terms">Terms & Condition</a>',
                    }
                },
            },
        });
    </script>
</body>

</html>