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 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, 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.
radius
'none' | 'sm' | 'md' | 'lg' | 'full'
default:"full"
Corner rounding preset.
size
'sm' | 'md' | 'lg'
default:"md"
Padding and font size preset.
font-weight
'normal' | 'medium' | 'semibold' | 'bold'
default:"medium"
Font weight for labels and headings so the component matches your store typography.
Open the chat in fullscreen
Every element that opens the chat (<molin-shop-ai-button>, <molin-shop-ai-ask>, and <molin-shop-ai-typewriter>) 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.
<molin-shop-ai-button fullscreen autosend message="I need help with my order">Get help</molin-shop-ai-button>
When present, the chat opens filling the screen on desktop instead of the floating window. Mobile is always fullscreen.
variant, size, and icon attributes, see the chip recipe below.
<molin-shop-ai-button message="Tell me about this product" autosend> Ask about this product </molin-shop-ai-button>
<molin-shop-ai-button variant="outline" size="sm" icon="none" autosend message="What's your return policy?"> Returns </molin-shop-ai-button>
Text to prefill or autosend when the chat opens.
When present, sends message immediately instead of just prefilling the input.
icon
'chat' | 'sparkle' | 'none'
default:"chat"
Leading icon inside the button.
variant
'solid' | 'outline' | 'ghost'
default:"solid"
Visual style.
size
'sm' | 'md' | 'lg'
default:"md"
Padding and font size preset. Use sm for chip-style pills.
<molin-shop-ai-ask>
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.
<molin-shop-ai-ask placeholder="Ask anything about our products"></molin-shop-ai-ask>
<molin-shop-ai-ask icon="search" prefix="Help me find: " placeholder="Search products…" submit-label="Search"></molin-shop-ai-ask>
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.
icon
'none' | 'search' | 'sparkle' | 'chat'
default:"none"
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.
border
'solid' | 'none'
default:"solid"
Whether the input has a visible border.
<molin-shop-ai-typewriter>
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.
<molin-shop-ai-typewriter text-1="Ask AI about this product" text-2="What sizes are available?"></molin-shop-ai-typewriter>
text-1
string
default:"Ask AI about this product"
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.
icon
'help' | 'chat' | 'sparkle' | 'none'
default:"help"
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.
<div style="border: 1px solid rgba(96, 31, 235, 0.15); border-radius: 16px; padding: 24px; background: linear-gradient(145deg, rgba(96, 31, 235, 0.03), rgba(96, 31, 235, 0.1));">
<div style="display: flex; gap: 2px; margin-bottom: 12px;">
<!-- 5 inline SVG stars (filled fill="#f59e0b", empty stroke="#f59e0b" with opacity 0.3) -->
</div>
<h3 style="margin: 0; font-weight: 600; font-size: 15px; color: #111;">What do customers say?</h3>
<p style="margin: 4px 0 16px; font-size: 14px; color: rgba(96, 31, 235, 0.7);">Ask our AI for a summary of customer reviews</p>
<molin-shop-ai-button message="What do people think about this product?" autosend bg="#601feb" icon="none">Ask about reviews</molin-shop-ai-button>
</div>
<div
style="position: relative; overflow: hidden; border-radius: 16px; padding: 40px 32px; background: linear-gradient(145deg, #0f1225, #1a1d3a); border: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;">
<div
aria-hidden="true"
style="position: absolute; width: 200px; height: 200px; top: 20%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(96, 31, 235, 0.25), transparent 70%); pointer-events: none;"></div>
<div
style="position: relative; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 9999px; background: rgba(96, 31, 235, 0.6); color: white; box-shadow: 0 0 40px rgba(96, 31, 235, 0.4), 0 0 80px rgba(96, 31, 235, 0.15);">
<!-- inline SVG icon (sparkle / chat / etc) -->
</div>
<p style="position: relative; max-width: 260px; margin: 0; font-size: 14px; line-height: 1.5; color: #9ca3af;">Get personalized recommendations in seconds</p>
<molin-shop-ai-button message="" autosend bg="#601feb">Ask our AI</molin-shop-ai-button>
</div>
