How to open AI Chatbot on the Button widget click

[Sina]

Want to open the AI Chatbot widget by clicking on the Button widget? We’ve got a solution!

Steps for the Button widget

Add open-ai-chat-with-button class to the installation code of your Button widget (right after the Widget ID) and install the resulted code to your website.

Here is how it will look:

<!-- Elfsight Button | Untitled Button -->
<script src="https://static.elfsight.com/platform/platform.js" async></script>
<div class="elfsight-app-WIDGET-ID open-ai-chat-with-button" data-elfsight-app-lazy></div>

Do not forget to replace WIDGET ID with the ID of your widget

Steps for the AI Chatbot widget

1. Add this code to the Custom JS field on the General tab of your widget’s settings:

const TRIGGER_BUTTON_SELECTOR = '.open-ai-chat-with-button button';

const waitForElement = (selector, root = document) =>
	new Promise((res) => {
		const observer = new MutationObserver(() => {
			const element = root.querySelector(selector);
			if (element) {
				res(element);
				observer.disconnect();
			}
		});

		observer.observe(root, { childList: true, subtree: true });
	});

waitForElement(TRIGGER_BUTTON_SELECTOR).then((triggerBtn) => {
	triggerBtn?.addEventListener('click', (e) => {
		e.preventDefault();
		e.stopPropagation();

		const chatWindow = document.querySelector(
			'[class*="widget-window__MessagesContainer-sc"]'
		);

		if (!chatWindow) {
			const openChatBtn = document.querySelector(
				'[class*="eapps-ai-chatbot"] [class*="FloatingButtonContainer-sc"] button'
			);

			openChatBtn?.click();
		}
	});
});

2. Hide the chat bubble using this code in the Custom CSS field on the General tab of your widget’s settings:

 [class*="ButtonBase__ButtonContainer-sc"] {
    display:none;
  }

3. Install your AI Chatbot widget to the website

Voila! Now your chatbot is automatically opened on the Button widget click:

Guys, was this workaround helpful to you? Share your feedback in the comments below