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):
- 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 |
Updated 21 days ago