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.CSS color
Background color. Defaults to the Molin brand purple (
#601feb). Snippets copied from the Elements admin page set this to your widget’s brand color.CSS color
Text and icon color. Defaults to white or black, whichever contrasts better with
bg.'none' | 'sm' | 'md' | 'lg' | 'full'
default:"full"
Corner rounding preset.
'sm' | 'md' | 'lg'
default:"md"
Padding and font size preset.
'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.
boolean
When present, the chat opens filling the screen on desktop instead of the floating window. Mobile is always fullscreen.
<molin-shop-ai-button>
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.
string
Text to prefill or autosend when the chat opens.
boolean
When present, sends
message immediately instead of just prefilling the input.'chat' | 'sparkle' | 'none'
default:"chat"
Leading icon inside the button.
'solid' | 'outline' | 'ghost'
default:"solid"
Visual style.
'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.
string
Input placeholder text.
string
default:"Ask"
Label on the submit button.
string
default:""
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.
'none' | 'search' | 'sparkle' | 'chat'
default:"none"
Leading icon inside the input.
boolean
default:"true"
When
true, the typed text is sent immediately on submit. Set to false to only prefill it.CSS color
Background color of the input field.
'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.
string
default:"Ask AI about this product"
First message (always displayed).
string
Second message to cycle through. Leave empty to only show message 1.
string
Third message to cycle through.
boolean
default:"true"
When
true, the current message is sent immediately on click.'help' | 'chat' | 'sparkle' | 'none'
default:"help"
Leading icon to the left of the animated text.
number
default:"50"
Milliseconds per character when typing.
number
default:"30"
Milliseconds per character when deleting.
number
default:"2000"
Milliseconds to hold the fully-typed message before deleting.