> ## Documentation Index
> Fetch the complete documentation index at: https://docs.molin.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Send message programmatically
> Use the openChat API to programmatically open the chat window and send a message on the customer's behalf from your own code.
export const OpenChatPlayground = () => {
const [message, setMessage] = useState('Hello! I need help with my order');
const [autoSend, setAutoSend] = useState(true);
const [status, setStatus] = useState(null);
const showStatus = (text, type) => {
setStatus({
text,
type
});
setTimeout(() => {
setStatus(null);
}, 5000);
};
const sendMessage = () => {
if (typeof window !== 'undefined' && window.Molin && window.Molin.openChat) {
try {
window.Molin.openChat({
message,
autoSend
});
showStatus('✅ Message sent via window.Molin.openChat()', 'success');
} catch (err) {
showStatus('❌ Error: ' + err.message, 'error');
}
} else {
showStatus('⚠️ Molin widget not loaded. Make sure the widget script is installed on this page.', 'warning');
}
};
const sendMessageWithSelector = () => {
if (typeof window !== 'undefined') {
const molinWidget = document.querySelector('molin-shop-ai');
if (molinWidget && typeof molinWidget.openChat === 'function') {
try {
molinWidget.openChat({
message,
autoSend
});
showStatus("✅ Message sent via querySelector('molin-shop-ai')", 'success');
} catch (err) {
showStatus('❌ Error: ' + err.message, 'error');
}
} else {
showStatus('⚠️ Molin widget element not found. Make sure the widget script is installed on this page.', 'warning');
}
}
};
return
When unchecked, the message will only be prefilled
{status &&
{status.text}
}
;
};
export const ProductGrid = () => {
const products = [{
id: 1,
name: 'Nomad Pouch',
href: '#',
price: '$50',
availability: 'White and Black',
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/category-page-07-product-01.jpg',
imageAlt: 'White fabric pouch with white zipper, black zipper pull, and black elastic loop.',
type: 'product'
}, {
id: 2,
name: 'Zip Tote Basket',
href: '#',
price: '$140',
availability: 'Washed Black',
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/category-page-07-product-02.jpg',
imageAlt: 'Front of tote bag with washed black canvas body, black straps, and tan leather handles and accents.',
type: 'product'
}, {
id: 3,
name: 'Medium Stuff Satchel',
href: '#',
price: '$220',
availability: 'Blue',
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/category-page-07-product-03.jpg',
imageAlt: 'Front of satchel with blue canvas body, black straps and handle, drawstring top, and front zipper pouch.',
type: 'product'
}, {
id: 4,
name: 'High Wall Tote',
href: '#',
price: '$210',
availability: 'Black and Orange',
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/category-page-07-product-04.jpg',
imageAlt: 'Front of zip tote bag with black canvas, black handles, and orange drawstring top.',
type: 'product'
}, {
id: 5,
name: 'Not finding what you are looking for?',
href: '#',
price: '',
availability: 'Get personalized recommendations and assistance',
imageSrc: '',
imageAlt: 'AI expert consultation',
type: 'ai-expert'
}, {
id: 6,
name: 'Zip High Wall Tote',
href: '#',
price: '$150',
availability: 'White and blue',
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/category-page-07-product-06.jpg',
imageAlt: 'Front of zip tote bag with white canvas, blue canvas straps and handle, and front zipper pocket.',
type: 'product'
}];
const handleAIExpertClick = () => {
if (typeof window !== 'undefined' && window.Molin && window.Molin.openChat) {
window.Molin.openChat({
message: 'I need help finding the right product. Can you assist me with personalized recommendations?',
autoSend: true
});
} else {
alert('Would open chat with AI expert for personalized recommendations');
}
};
return
;
};
export const AutoSendExample = () => {
const sendSupportMessage = type => {
let message = '';
switch (type) {
case 'order':
message = "I need help with my order status. Can you please check what's happening with my recent purchase?";
break;
case 'return':
message = 'I would like to return an item I purchased. Can you help me with the return process?';
break;
case 'billing':
message = 'I have a question about my billing. There seems to be an issue with my last payment.';
break;
default:
message = 'I need help with something';
}
if (typeof window !== 'undefined' && window.Molin && window.Molin.openChat) {
window.Molin.openChat({
message,
autoSend: true
});
} else {
alert(`Demo: Would auto-send message: "${message}"`);
}
};
return
Auto-send Message Example
Quick support buttons that automatically send specific messages:
;
};
export const ProductInquiryExample = () => {
const [selectedColor, setSelectedColor] = useState('black');
const [selectedSize, setSelectedSize] = useState('s');
const sampleProduct = {
name: "Women's Basic Tee",
description: 'Premium cotton blend t-shirt with comfortable fit and modern styling',
price: 32,
rating: 3.9,
reviews: 512,
image: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-01-featured-product-shot.jpg'
};
const handleAskAI = () => {
const message = `I have questions about the product pricing, availability, and features. Can you help me with that?`;
if (typeof window !== 'undefined' && window.Molin && window.Molin.openChat) {
window.Molin.openChat({
message,
autoSend: false
});
} else {
alert(`Would open chat with message: "${message}"`);
}
};
const handleAddToBag = e => {
e.preventDefault();
};
return
;
};
export const BasicChatButton = () => {
const openChat = () => {
if (typeof window !== 'undefined' && window.Molin && window.Molin.openChat) {
window.Molin.openChat();
} else {
alert('Molin widget not loaded. This is just a demo.');
}
};
return
Basic Usage Example
Simple button that opens the chat widget
;
};
## Overview
The `openChat` API allows you to programmatically open the chat window and send a message on behalf of the user. This is useful for:
* Sending automated support requests based on user actions
* Creating contextual help buttons that send specific inquiries
* Triggering chat conversations from forms, errors, or page events
* Automating customer service workflows
For controlling widget visibility, see [Show/Hide Widget](/apis/experimental/show-hide-widget).
**No code required?** You can also open the chat via URL parameters without any JavaScript. See [Open chat via URL](/home/general/url-prefill) for a simple way to create links for marketing
campaigns, emails, and QR codes.
## Method
The widget exposes this method for opening the chat:
```javascript Open chat with optional message, auto-send, and fullscreen control theme={null}
window.Molin.openChat({ message, autoSend, fullscreen });
```
### Alternative method (web component)
You can also use the web component selector:
```javascript Open chat using web component selector theme={null}
document.querySelector('molin-shop-ai').openChat({ message, autoSend, fullscreen });
```
### Parameters
Optional configuration object. Can be omitted entirely to simply open the chat without any message. When provided, can contain the following optional properties:
The message to send when opening the chat. If omitted, the chat opens without any pre-filled message.
Whether to automatically send the message. When `false` (default), the message will only be prefilled in the input field for the user to review and send manually. When `true`, the message is sent
immediately.
Whether to open the chat window filling the whole screen on desktop. When `false` (default), the chat opens in the normal floating window. On mobile the chat is always fullscreen regardless of
this setting.
**Valid function calls:**
* `openChat()` - Opens chat without any message
* `openChat({ message: "Hello" })` - Opens chat with pre-filled message (not sent)
* `openChat({ message: "Hello", autoSend: true })` - Opens chat and sends message immediately
* `openChat({ fullscreen: true })` - Opens chat fullscreen on desktop
## Open the launcher in fullscreen by default
The `fullscreen` option above controls a single `openChat` call. To make the launcher (the floating bubble) and every other affordance open the chat fullscreen on desktop by default, set it once at the widget level.
Set it before the widget loads via `window.molinSettings`:
```html theme={null}
```
Or add the `fullscreen` attribute to the embed tag:
```html theme={null}
```
A per-call `openChat({ fullscreen })` always wins over this default, so a specific button can still open the normal floating window. On mobile the chat is always fullscreen regardless of this setting.
## Examples
### Basic Usage - Open Chat Button
```javascript Basic Usage lines icon="js" theme={null}
// Method 1:
window.Molin.openChat();
// Method 2:
document.querySelector('molin-shop-ai').openChat();
```
### Pre-filled Message - Product Inquiry
```javascript Pre-filled Message lines wrap icon="js" theme={null}
// Method 1:
window.Molin.openChat({
message: 'I have questions about the product pricing, availability, and features. Can you help me with that?',
autoSend: false,
});
// Method 2:
document.querySelector('molin-shop-ai').openChat({
message: 'I have questions about the product pricing, availability, and features. Can you help me with that?',
autoSend: false,
});
```
### Auto-send Messages - Support Scenarios
```javascript Order Status Help lines wrap icon="js" theme={null}
// Method 1:
window.Molin.openChat({
message:
"I need help with my order status. Can you please check what's happening with my recent purchase?",
autoSend: false,
})
// Method 2:
document.querySelector("molin-shop-ai").openChat({
message:
"I need help with my order status. Can you please check what's happening with my recent purchase?",
autoSend: false,
})
```
```javascript Return Item lines wrap icon="js" theme={null}
// Method 1:
window.Molin.openChat({
message:
"I would like to return an item I purchased. Can you help me with the return process?",
autoSend: false,
})
// Method 2:
document.querySelector("molin-shop-ai").openChat({
message:
"I would like to return an item I purchased. Can you help me with the return process?",
autoSend: false,
})
```
```javascript Billing Questions lines wrap icon="js" theme={null}
// Method 1:
window.Molin.openChat({
message: 'I have a question about my billing. There seems to be an issue with my last payment.',
autoSend: false,
});
// Method 2:
document.querySelector('molin-shop-ai').openChat({
message: 'I have a question about my billing. There seems to be an issue with my last payment.',
autoSend: false,
});
```
### Smart Search with AI Integration
```javascript AI Search Integration theme={null}
// When user searches, open chat with search context
const searchQuery = 'wireless headphones';
window.Molin.openChat({
message: `I'm looking for: ${searchQuery}. Can you help me find what I need?`,
autoSend: false,
});
```
The search component integrates AI assistance with product search, allowing users to get personalized recommendations through the chat widget.
### Product Grid with AI Expert
```javascript Product Grid with AI Expert theme={null}
// When user clicks on AI expert card
window.Molin.openChat({
message: 'I need help finding the right product. Can you assist me with personalized recommendations?',
autoSend: false,
});
```
The product grid includes an AI expert consultation option that opens the chat widget with a pre-filled message for personalized assistance.
## Interactive Playground
Try the openChat API with this interactive example:
This playground will only work if the Molin widget is installed on this documentation page. If you're viewing this in the documentation, it may show a warning that the widget is not loaded.
## Technical note
The `openChat` method is only available after the widget script has loaded. The recommended approach is to listen for the [`molin:ready`](/home/marketing/javascript-events#molinready) event:
```javascript theme={null}
window.addEventListener('molin:ready', () => {
window.Molin.openChat({ message: 'Your message here' });
});
```
Alternatively, you can check if `window.Molin` already exists:
```javascript theme={null}
if (window.Molin && window.Molin.openChat) {
window.Molin.openChat({ message: 'Your message here' });
}
```
