alby-conversation-prompt

Encourage your customers to engage with your AI assistant with a chat 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):

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

Available CSS Variables

CSS VariableDescriptionDefault Value
--alby-conversation-prompt-widthSets the width of the conversation prompt form250px
--alby-conversation-prompt-backgroundSets the background color of the form#ffffff
--alby-conversation-prompt-hover-backgroundSets the background color on hover#f9fafb
--alby-conversation-prompt-text-colorSets the text color of the input#111928
--alby-conversation-prompt-placeholder-colorSets the placeholder text color#6b7280
--alby-conversation-prompt-border-radiusSets the border radius for rounded corners9999px
--alby-conversation-prompt-border-colorSets the border color#e1e5f0
--alby-conversation-prompt-active-border-colorSets the border color when input is focused#111928
--alby-conversation-prompt-border-widthSets the border width1px
--alby-conversation-prompt-paddingSets the internal padding of the form10px 16px
--alby-conversation-prompt-font-sizeSets the font size of the input text16px
--alby-conversation-prompt-font-weightSets the font weight of the input text400
--alby-conversation-prompt-icon-sizeSets the size of the AI logo icon20px
--alby-conversation-prompt-icon-colorSets the color of the AI logo icon#1f2937
--alby-conversation-prompt-icon-displaySets the display property of the AI logo iconblock
--alby-conversation-prompt-send-icon-sizeSets the size of the send button icon14px
--alby-conversation-prompt-send-icon-colorSets the color of the send button icon#1f2937
--alby-conversation-prompt-send-icon-displaySets the display property of the send buttonflex
--alby-conversation-prompt-send-button-paddingSets the padding of the send button8px
--alby-conversation-prompt-send-button-border-radiusSets the border radius of the send button9999px
--alby-conversation-prompt-send-button-hover-backgroundSets the background color of send button on hover#eeeeee