alby-conversation-prompt

Prerequisites

Ensure alby is installed to unlock these elements and elevate your storefront. Learn more here.
This widget triggers the alby chatbot, please ensure that is setup before using this widget. You can set it up on the experiences page inside the alby dashboard.

Usage

The alby-conversation-prompt component can be embedded in your webpage with the below example.

Basic Example

<alby-conversation-prompt
  widget-id="widget-id"                 
</alby-conversation-prompt>

CSS Variables Configuration

The alby-conversation-prompt component can be customized using CSS custom properties (CSS variables). These variables allow you to control the appearance and behavior of the conversation prompt input without modifying the component's internal styles.

Usage

You can set these variables using inline styles on the component:

<alby-conversation-prompt
  widget-id="your-widget-id"
  style="--alby-conversation-prompt-background: #f8f9fa; --alby-conversation-prompt-text-color: #212529"
></alby-conversation-prompt>

Priority Order

CSS variables follow this priority order (highest to lowest):

Inline styles - Set directly on the component element
Widget styling - Configured through the Alby dashboard
Default values - Built-in component defaults

Available CSS Variables

CSS Variable	Description	Default Value
`--alby-conversation-prompt-width`	Sets the width of the conversation prompt form	`250px`
`--alby-conversation-prompt-background`	Sets the background color of the form	`#ffffff`
`--alby-conversation-prompt-hover-background`	Sets the background color on hover	`#f9fafb`
`--alby-conversation-prompt-text-color`	Sets the text color of the input	`#111928`
`--alby-conversation-prompt-placeholder-color`	Sets the placeholder text color	`#6b7280`
`--alby-conversation-prompt-border-radius`	Sets the border radius for rounded corners	`9999px`
`--alby-conversation-prompt-border-color`	Sets the border color	`#e1e5f0`
`--alby-conversation-prompt-active-border-color`	Sets the border color when input is focused	`#111928`
`--alby-conversation-prompt-border-width`	Sets the border width	`1px`
`--alby-conversation-prompt-padding`	Sets the internal padding of the form	`10px 16px`
`--alby-conversation-prompt-font-size`	Sets the font size of the input text	`16px`
`--alby-conversation-prompt-font-weight`	Sets the font weight of the input text	`400`
`--alby-conversation-prompt-icon-size`	Sets the size of the AI logo icon	`20px`
`--alby-conversation-prompt-icon-color`	Sets the color of the AI logo icon	`#1f2937`
`--alby-conversation-prompt-icon-display`	Sets the display property of the AI logo icon	`block`
`--alby-conversation-prompt-send-icon-size`	Sets the size of the send button icon	`14px`
`--alby-conversation-prompt-send-icon-color`	Sets the color of the send button icon	`#1f2937`
`--alby-conversation-prompt-send-icon-display`	Sets the display property of the send button	`flex`
`--alby-conversation-prompt-send-button-padding`	Sets the padding of the send button	`8px`
`--alby-conversation-prompt-send-button-border-radius`	Sets the border radius of the send button	`9999px`
`--alby-conversation-prompt-send-button-hover-background`	Sets the background color of send button on hover	`#eeeeee`