Zapience Chat Widget – Reference Implementation for Integration

<script type="module">
	import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed@2.0.9/dist/web.min.js';
	Chatbot.init({
		chatflowid: '1f37b64f-b31d-43c5-9f1b-89e91fcaee46',
		apiHost: 'https://chat.zapience.ai',
		observersConfig: {
			observeLoading: (loading) => {
				if (loading) {
					document.querySelector("flowise-chatbot").shadowRoot.querySelector("div[part='bot']").style.height = 'calc(100% - 150px)';
				}
			},
		},
		theme: {
			"button": {
				"backgroundColor": "#7f82e8",
				size: "large",
				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
				},
			},
			"chatWindow": {
				"height": "undefined",
				"title": "Zapience Chatwidget",
				"titleColor": "#7f82e8",
				"welcomeMessage": "Hallo! 👋 Wie können wir dir helfen?",
				"clearChatOnReload": true,
				"botMessage": {
					"backgroundColor": "#cbcdffff",
					"textColor": "#111"
				},
				"userMessage": {
					"backgroundColor": "#ebebebff",
					"textColor": "#111"
				},
				"textInput": {
					"placeholder": "Schreib uns eine Nachricht...",
					"sendButtonColor": "#7f82e8"
				},
				"footer": {
					"showFooter": false
				}
			}
		},
	});
</script>