> ## 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.
# Elements
> Drop-in HTML tags for buttons, inputs, and typewriter animations, plus paste-and-edit recipes for review and product cards.
export const ProductCardPreview = () => {
const openChat = () => {
if (typeof window !== 'undefined' && window.Molin && window.Molin.openChat) {
window.Molin.openChat({
autoSend: true
});
} else {
alert('Molin widget not loaded. This is just a demo.');
}
};
return
Get personalized recommendations in seconds
;
};
export const ReviewCardPreview = () => {
const openChat = () => {
if (typeof window !== 'undefined' && window.Molin && window.Molin.openChat) {
window.Molin.openChat({
message: 'What do people think about this product?',
autoSend: true
});
} else {
alert('Molin widget not loaded. This is just a demo.');
}
};
return
{[0, 1, 2, 3, 4].map(i => )}
What do customers say?
Ask our AI for a summary of customer reviews
;
};
Elements are prebuilt components you embed on your store with a single HTML tag. No JavaScript, no setup. They theme from their style attributes, with sensible defaults. Override any attribute when you want a different look.
The [Elements admin page](https://molin.ai/app/elements) lets you tweak attributes in a live preview and copy the resulting HTML to paste into your store theme. Use it if you want to iterate on the
look without editing your site between attempts.
## Shared style attributes
Every component accepts these style attributes. Set them on the tag, or copy a pre-styled snippet from the [Elements admin page](https://molin.ai/app/elements), which fills in your brand color for you.
Background color. Defaults to the Molin brand purple (`#601feb`). Snippets copied from the Elements admin page set this to your widget's brand color.
Text and icon color. Defaults to white or black, whichever contrasts better with `bg`.
Corner rounding preset.
Padding and font size preset.
Font weight for labels and headings so the component matches your store typography.
## Open the chat in fullscreen
Every element that opens the chat (``, ``, and ``) accepts a `fullscreen` attribute. When present, clicking the element opens the chat window filling the whole screen on desktop. On mobile the chat is always fullscreen.
```html theme={null}
Get help
```
When present, the chat opens filling the screen on desktop instead of the floating window. Mobile is always fullscreen.
## ``
A call-to-action button. Opens the chat, optionally prefilling or auto-sending a message.
The same tag doubles as a quick-question chip via the `variant`, `size`, and `icon` attributes, see the chip recipe below.
```html theme={null}
Ask about this product
```
Chip configuration for FAQ rows:
```html theme={null}
Returns
```
Text to prefill or autosend when the chat opens.
When present, sends `message` immediately instead of just prefilling the input.
Leading icon inside the button.
Visual style.
Padding and font size preset. Use `sm` for chip-style pills.
The button's label is the inner text of the tag (the default slot).
## ``
An input field with a send button. On submit, opens the chat with whatever the visitor typed.
The same tag doubles as a product search bar via the `prefix` and `icon` attributes, see the second example below.
```html theme={null}
```
Product-search configuration:
```html theme={null}
```
Input placeholder text.
Label on the submit button.
Text prepended to the visitor's typed text before it is sent to the chat. Use it to turn an "Ask AI" input into a "Help me find" search prompt.
Leading icon inside the input.
When `true`, the typed text is sent immediately on submit. Set to `false` to only prefill it.
Background color of the input field.
Whether the input has a visible border.
## ``
An animated CTA that cycles through up to 3 messages with a typewriter effect. The motion draws attention and the rotating prompts teach visitors what the AI can answer. On click, opens the chat with the current message.
```html theme={null}
```
First message (always displayed).
Second message to cycle through. Leave empty to only show message 1.
Third message to cycle through.
When `true`, the current message is sent immediately on click.
Leading icon to the left of the animated text.
Milliseconds per character when typing.
Milliseconds per character when deleting.
Milliseconds to hold the fully-typed message before deleting.
## Review card recipe
A card with decorative stars that fits into a product review section. Visitors who want a summary of customer reviews tap the button and the chat opens with a ready-to-send question. Paste the snippet below into your product page and edit colors, copy, and spacing to match your store.
```html theme={null}
What do customers say?
Ask our AI for a summary of customer reviews
Ask about reviews
```
## Promotional product card recipe
A dark promotional card that slots into your product grid. Visitors tap the button and the AI helps them find what they need. Paste the snippet below into your grid and adjust copy, colors, or the icon to match your store.
```html theme={null}