Skip to main content
All Collectionsalby
Adding an alby Q&A widget to your site
Adding an alby Q&A widget to your site
Updated this week

Within alby, there are different kinds of AI sales conversations you can embed into your site, called widgets.

Widgets can be placed throughout your site, on either product detail pages (PDPs) or product listing pages (PLPs).

Widgets are configured with one or more skills, different types of questions that alby generates and answers.

Generative Q&A is the most common skill used by alby users. It will automatically generate frequently asked questions on product pages, and provide a space for customers to ask their own questions. The Comparison skill can also be added to PDP widgets to help customers compare similar products.

There are other skills that can be added to PDPs, but require additional data integrations to enable:

  • Review Summaries

    • Aggregates key sentiments to provide an overview of a product’s feedback

    • Requires integration with review platform

  • Co-Purchase

    • List other products that are commonly purchased together

  • Best Sellers

    • Return best selling products in the same category of the product

  • Style Matcher

    • Helps find items that complement the chosen product, such as accessories to enhance your outfit

  • Compatibility

    • Accurately verify that specific parts are compatible with particular products

On PLPs, only one skill is currently available – Category Generative Q&A. It generates FAQs for each category to help customers narrow down to a specific product.

Add Generative Q&A skill

Follow the steps below to add the Generative Q&A skill to your site.

New Widget

  1. In the alby menu, click Widgets. The Widgets page displays a list of current Widgets.

  2. Click New Widget. The New Widget page displays.

  3. Name your widget

    1. This is an internal-only name.

  4. Click Product Detail page.

  5. Click Get Started. The widget playground displays.

  6. Click Select Skills. The skills menu displays.

  7. Enable the Generative Q&A skill.

    1. Since this widget will be placed on PDPs, the Comparison skill is also an option for enabling.

  8. Click Save and Exit to return to the widget settings.

  9. In Customize, click Design Widget. The Customize page appears.

Customize Widget

On the Customize page, you can change the look and feel of your Generative Q&A skill, including its colors, number of question prompts, and what the placeholder text displays. When changing many settings, you may need to click Save and Exit to see your changes appear in the preview.

As you change the look of 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.

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 some of the customizable settings do with the Generative Q&A skill:

  • The “Number of pre-generated questions” setting adjusts how many question prompts will display for users on each PDP. It defaults to five.

  • The font setting allows you to 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.

Note: 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.

  • The title setting allows you to remove or edit a title for the widget when a response is given to customers. It defaults to “Instant Answers.”

  • The “Show sparkle icon” setting removes or edits the sparkle icon next to the title when a response is given to customers. It defaults to enabled, with the color defaulted to white (#FFFFFF).

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

Embedding the Widget

When you’re ready to embed the widget onto your website, click View instructions to access the embed code.

You will need the widget code, located in step 2 of the instructions. Steps 1 and 3 are not needed at this time.

Copy and paste the widget Code onto your PDP template, changing the PRODUCT-ID to call your product’s ID within your product catalog.

Like the Bluecore Website Integration, this step is best performed by your company’s website administrator or director of e-commerce, whomever manages the website.

Did this answer your question?