Customize alby's look and feel

Customize the alby widget to match the look and feel of your storefront.

When building your alby widget, you can change its look and feel, including its colors, number of question prompts, and what the placeholder text displays. 

Customize your widget to match brand styling, color scheme, and preferred settings.

When changing many settings, you may need to click Save and Exit to see your changes appear in the preview. 

As you change the widget, you can click the dropdown to see what it would look like with a specific product in your catalog. You can also toggle a preview of the widget on desktop or mobile.

To customize a widget, go to the Widgets section, choose the widget you'd like to adjust, then click Customize.

There are four sections within the Customize page:

• General
  • Change the overall look of the widget
• Buttons
  • Change the look of the pre-generated questions
• Chat Input
  • Change the visuals of the text that customers type into the input field
• Messages
  • Change the look of the responses alby provides to customers

Here is a breakdown of what each customizable setting does:

General

1. Number of pre-generated questions
   1. Shows how many question prompts will display for users on each PDP
   2. Defaults to five
2. Font
   
   1. Type in a specific font to be used for this Generative Q&A skill. It must be a font that is loaded on your website, or it will not look correct.
   2. The font might not render correctly in the preview panel, but will still be displayed correctly on your site, as long as the font is loaded correctly on your website. 
   3. Defaults to blank, using the default alby font
3. Background color 
   1. Change the color of the background of the Widget
   2. Defaults to white (#FFFFFF)
4. Background border
   1. Add or edit a border around the Widget, and change its color
   2. Defaults to 1, with a #EEEEF5 color
5. Max height (desktop)
   1. Change the maximum amount of space the Widget can take up vertically when viewed on desktops
6. Max height (mobile)
   1. Change the maximum amount of space the Widget can take up vertically when viewed on phones
7. Background rounded corners
   1. Change how round the corners of the Widget will appear on your site, from 0 to 
   2. Default is 16
8. Title
   1. Remove or edit a title for the Widget when a response is given to customers
   2. Defaults to “Instant Answers”
9. Show sparkle icon
   1. Remove or edit the sparkle icon next to the title when a response is given to customers
   2. Defaults to enabled, with the color defaulted to white (#FFFFFF)
10. Disclaimer message
    1. Change the disclaimer message that displays at the bottom of the Widget
    2. Defaults to “May display inaccurate information about products and facts.”
11. Powered by/disclaimer color
    1. Change the color of the “Powered by” and disclaimer text
    2. Defaults to #939DAF

Buttons

1. Buttons dropdown
   1. Change this to edit buttons related to the skill, or any secondary buttons that may come from additional skills. 

1. Regular/Hover 
   1. Toggle between changing the settings on buttons as they appear, or if a user is hovering over them on a desktop
   2. Defaults to Regular
2. Background color
   1. Change the color of the buttons
   2. Defaults to #F0F2F7
3. Button text color
   1. Change the color of the text within the buttons
   2. Defaults to #1F2A37
4. Button shape
   1. Change the shape of buttons
      1. Pill
      2. Rounded
      3. Square
      4. Custom rounded corners
   2. Defaults to Rounded
5. Button size
   1. Change the size of the buttons
      1. Small 
      2. Medium 
      3. Large
      4. Custom button height
   2. Defaults to Small
6. Padding
   1. Change the padding around the text within the buttons
   2. Defaults to 8
7. Button border
   1. Add or edit a border to the buttons
   2. Defaults to 0 (no border) and color #D1D1D8
8. Show sparkle icon
   1. Remove or edit the icon next to the pre-generated questions
   2. Defaults to enabled, with the color defaulted to white (#FFFFFF)

Chat Input

1. Regular/Hover 
   1. Toggle between changing the settings of the text input as it appears, or if a user is hovering over it on a desktop
   2. Defaults to Regular
2. Background color
   1. Change the color of the text input box
   2. Defaults to white (#FFFFFF)
3. Button text color
   1. Change the color of the text users input
   2. Defaults to #ABB3C4
4. Border
   1. Add or edit a border to the text input box
   2. Defaults to 1 and color #E1E5F0
5. Rounded corners
   1. Change the shape of the text input box
      1. Pill
      2. Rounded
      3. Square
      4. Custom rounded corners
   2. Defaults to Rounded
6. Placeholder text
   1. Add, edit, or remove the placeholder text that appears in the text box
   2. Defaults to “Ask any question about this product” with color #9CA3AF
7. Loading message
   1. Add, edit, or remove the text that appears while alby is generating a response to a customer’s question
   2. Defaults to “Looking up the best way to help you…”

Messages

1. User message background color
   1. Change the background color of the text field that a user inputted
   2. Defaults to #3B3B40
2. User message text color
   1. Change the color of the text that a user inputted
   2. Defaults to white (#FFFFFF)
3. Border
   1. Add or edit a border around the text field that a user inputted
   2. Defaults to 0 with #EEEEEE
4. alby response text color
   1. Change the color of the text of alby’s responses to questions
   2. Defaults to #525258
5. alby response border
   1. Add, edit, or remove a border around alby’s responses to questions
   2. Defaults to 0 (no border) and color #EEEEEE
6. alby response padding
   1. Add, edit, or remove padding around alby’s responses to customers
   2. Click the checkbox to toggle the same padding on all sides of the text field
   3. Defaults to 12 on all sides

When you’re finished customizing, click Save and Exit to return to the Customize page.