How to open AI Chatbot on the Button widget click

Pro Tips Elfsight Widgets Tips
,
1

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 :slightly_smiling_face:


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 :wink:

2 Likes