alby-guided-questionnaire

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

Basic Example

<alby-guided-questionnaire
   category="CATEGORY-NAME"
   product-ids="PRODUCT-ID-1,PRODUCT-ID-2,PRODUCT-ID-3"
   widget-id="widget-id"
></alby-guided-questionnaire>

Properties

Attribute	Description	Type	Default	Required
`widget-id`	The unique identifier for the widget, found on the Widget Embed page in the alby Dashboard. Required for correctly loading the designated widget instance.	`string`	`undefined`	Yes
`category`	The product category for contextual AI responses.	`boolean`	`undefined`	Yes
`product-ids`	Comma-separated list of external product IDs for multi-product contexts.	`string`	`undefined`	Yes
`test-mode`	Enables internal testing of the widget. When enabled, conversations created will not appear in the inbox or impact reporting. This is not related to A/B testing.	`boolean`	`undefined`	No

CSS Variables Configuration

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

Usage

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

<alby-guided-questionnaire
  style="--alby-guided-questionnaire-background: #000; --alby-guided-questionnaire-button-color: #fff"
></alby-guided-questionnaire>

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-guided-questionnaire-max-width-desktop`	Sets the maximum width of the questionnaire container on desktop	`640px`
`--alby-guided-questionnaire-max-width-mobile`	Sets the maximum width of the questionnaire container on mobile	`100%`
`--alby-guided-questionnaire-container-padding`	Sets the padding of the questionnaire container	`24px`
`--alby-guided-questionnaire-background`	Sets the background color of the questionnaire container	`#ffffff`
`--alby-guided-questionnaire-border-width`	Sets the border width of the questionnaire container	`1px`
`--alby-guided-questionnaire-border-color`	Sets the border color of the questionnaire container	`#f3f4f6`
`--alby-guided-questionnaire-border-radius`	Sets the border radius of the questionnaire container	`16px`
`--alby-guided-questionnaire-font-size`	Sets the font size of the question text	`18px`
`--alby-guided-questionnaire-question-font-weight`	Sets the font weight of the question text	`500`
`--alby-guided-questionnaire-question-color`	Sets the text color of the question	`#111827`
`--alby-guided-questionnaire-button-font-size`	Sets the font size of the option buttons	`14px`
`--alby-guided-questionnaire-button-padding`	Sets the padding of the option buttons	`8px 16px`
`--alby-guided-questionnaire-button-background`	Sets the background color of the option buttons	`#F0F2F7`
`--alby-guided-questionnaire-button-color`	Sets the text color of the option buttons	`#1F2A37`
`--alby-guided-questionnaire-button-border`	Sets the border of the option buttons	`none`
`--alby-guided-questionnaire-button-border-radius`	Sets the border radius of the option buttons	`9999px`
`--alby-guided-questionnaire-icon-display`	Sets the display property of the AI logo icon	`block`
`--alby-guided-questionnaire-icon-size`	Sets the size of the AI logo icon	`18px`
`--alby-guided-questionnaire-icon-color`	Sets the color of the AI logo icon	`#111928`
`--alby-guided-questionnaire-font-family`	Sets the font family for the entire component	`Figtree, sans-serif`

Notes

The component automatically applies responsive behavior for mobile devices using the --alby-guided-questionnaire-max-width-mobile variable
Responsive Breakpoint: The component uses @media (max-width: 768px) as the breakpoint to switch between desktop and mobile layouts