This comprehensive guide will help you integrate a button on your website that opens your Molin chat window. There are two ways to go about this: either by creating a new custom button or by making an existing element on your webpage clickable to launch the chat window.
For advanced usage including sending messages programmatically, see Send message programmatically.

​
Interactive Example

Basic Usage Example

Simple button that opens the chat widget

​
Method 1: Creating a Custom Button

​
Step 1: Insert the Button Code

Locate the section of your website where you want the button to be displayed. Insert the following HTML code: 
<button type="button" onclick="document.querySelector('molin-shop-ai').openChat()">Chat with Shop AI</button>

​
Step 2: Customize the Button

Feel free to personalize the appearance and text of the button. For instance, you can replace the “Chat with Molin AI” text with a label that better fits your brand. Additional CSS can be added to style the button according to your design preferences. Example using Tailwind CSS: 
<button 
  type="button" 
  onclick="document.querySelector('molin-shop-ai').openChat()" 
  class="bg-[#601FEB] hover:bg-[#8624FF] text-white font-medium py-2 px-8 rounded-full text-base transition-colors duration-200"
>
  Chat with Molin AI
</button>
The design that this button has:

​
Method 2: Making an Existing Element Clickable

If you already have an element (such as an image, graphic, or text) on your website that you’d like to use for launching the Molin chat, follow these steps:

​
Step 1: Wrap The Existing Element

Wrap the existing element in an <a> tag and insert the following snippet. Replace the ‘Insert your element here’ text with the HTML element you wish to make clickable: 
<a href="javascript:void(0);" onclick="document.querySelector('molin-shop-ai').openChat()">
  <!-- your element here -->
</a>

​
Testing

Regardless of the method you choose, remember to conduct thorough tests to ensure everything is functioning as intended. By following either of these methods, you can make it easy for visitors to open your Molin AI chat window directly from your website.

​
Technical Note

  • ‘molin-shop-ai’ is our web component that allows for interaction via JavaScript.
  • ‘openChat’ and ‘closeChat’ are two publicly available methods on the web component for controlling the chat window.