alby-single-button-embed

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-single-button-embed component can be embedded in your webpage with the below example.

Basic Example

<alby-single-button-embed
  widget-id="widget-id"                 
</alby-single-button-embed>

CSS Variables Configuration

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

Usage

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

<alby-single-button-embed
  widget-id="widget-id"                 
  style="--alby-single-button-background: #007bff; --alby-single-button-hover-background: #0056b3"
></alby-single-button-embed>

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-single-button-width`	Sets the width of the button	`auto`
`--alby-single-button-height`	Sets the height of the button	`auto`
`--alby-single-button-background`	Sets the background color of the button	`#ffffff`
`--alby-single-button-text-color`	Sets the text color of the button	`#1f2937`
`--alby-single-button-border-radius`	Sets the border radius for rounded corners	`9999px`
`--alby-single-button-padding`	Sets the internal padding of the button	`8px 16px`
`--alby-single-button-gap`	Sets the gap between the icon and text	`8px`
`--alby-single-button-border-width`	Sets the border width	`1px`
`--alby-single-button-border-color`	Sets the border color	`#e5e7eb`
`--alby-single-button-hover-background`	Sets the background color on hover	`#f9fafb`
`--alby-single-button-hover-text-color`	Sets the text color on hover	`#1f2937`
`--alby-single-button-font-size`	Sets the font size of the button text	`16px`
`--alby-single-button-font-weight`	Sets the font weight of the button text	`500`
`--alby-single-button-icon-display`	Sets the display property of the icon	`block`
`--alby-single-button-icon-size`	Sets the size of the icon	`20px`
`--alby-single-button-icon-color`	Sets the color of the icon	`#1f2937`