Skip to main content
Need to open the chat from your own JavaScript or from an existing element on your page (an image, a banner, a custom-styled button)? Use the programmatic API on the embedded widget element.
If you just want a “Chat with us” button, paste the prebuilt <molin-shop-ai-button> instead. It is one HTML tag, no JavaScript, and you style it with a single bg attribute. Use this page when you need to wire up something custom.

​
API

The embedded widget element exposes two methods you can call from anywhere on the page:
  • document.querySelector('molin-shop-ai').openChat() opens the chat window
  • document.querySelector('molin-shop-ai').closeChat() closes it
For sending a message at the same time, see Send message programmatically.

​
Wire up your own button

Wrap any element in an onclick that calls openChat(): 
<button type="button" onclick="document.querySelector('molin-shop-ai').openChat()">Chat with us</button>
Style it however you want, the API is independent of the markup: 
<button
  type="button"
  onclick="document.querySelector('molin-shop-ai').openChat()"
  class="rounded-full bg-[#601FEB] px-8 py-2 text-base font-medium text-white transition-colors duration-200 hover:bg-[#8624FF]">
  Chat with us
</button>

​
Make an existing element clickable

If you already have an image, banner, or text block you want to use as the trigger, wrap it in an anchor that calls openChat(): 
<a href="javascript:void(0);" onclick="document.querySelector('molin-shop-ai').openChat()">
  <!-- your element here -->
</a>