Product FAQs

See product FAQs in action on our demo site.

Overview

Product FAQs is a feature that generates FAQs automatically for each product on your e-commerce store, anticipating customer questions and providing instant answers to improve their shopping experience. Smart FAQs lead to better customer support and happier shoppers by proactively addressing common queries about your products.

This documentation will guide you through the steps to configure Product FAQs in the Alhena AI dashboard, customize their appearance, and embed them on your website.

Please note that this feature is only available for shopify/woocommerce customers. For other e-commerce stores, contact support and they can help you enable this feature.

Navigating to Product FAQs Settings

1. Log in to your Alhena AI dashboard.

2. In the sidebar, click on Settings > Integrations.

3. From the Integrations section, select "AI Powered FAQs" to begin configuring your Product FAQs.

4. Enable the AI Powered FAQs and click on Configure settings to start customizing.

Customizing Product FAQs Appearance

1. Container Style

Screenshot of container style customization options, including header text and colors.

• Header Text: Enter a heading, like "Got a product question?", to display above the FAQ widget.

• Text and Background Colors: Set the color for header text, container background, and container borders to match your website branding.

• Border Radius: Adjust the border radius to make the FAQ container match your website's design.

2. FAQ Style

Screenshot of FAQ style customization options

• FAQ Icon: Upload a custom icon for your FAQs to make the widget more visually engaging.

• FAQ Background & Text Colors: Choose colors for the FAQ text and background that align with your brand.

• Number of FAQs to Show: Set the number of FAQs visible by default in the widget.

3. Chat Input Style

Screenshot of chat input style customization options.

• Placeholder Text: Customize the placeholder text in the input box to encourage shoppers to ask questions.

• Colors for Background, Text, and Send Button: Adjust these colors to ensure consistency with your store's theme.

Previewing Your FAQ Widget

• The Preview section on the right-hand side allows you to see how your widget will appear to customers as you make changes. Adjust settings until you're satisfied with the look and feel.

• Click "Save Changes" to save your customizations.

Testing FAQs with Playground

Screenshot of the Playground tab for testing product FAQs.

1. Navigate to the Playground tab in the Product FAQs settings.

2. Select a product page URL from the dropdown to preview the auto-generated FAQs.

3. Click the FAQs to receive answers.

Embedding Product FAQs on Your Website

🛠️ Integration Steps

For Shopify users, we provide an app block that is available if you've installed the Alhena Shopify app to your store for easier installation. If you are using Shopify, you can skip these steps and see the Shopify instructions.

1. Prerequisites

• Ensure the Alhena SDK is already embedded and initialized on your site.

• No additional script needs to be imported—the existing widget handles FAQ rendering.

2. Install the FAQ Widget

1. Click on the Installation tab in the Product FAQs settings.

2. If you haven't yet installed the Alhena SDK, expand the Alhena SDK Installation section and follow the instructions. You can skip this if you've already added the chat widget. For full SDK installation details, see the Installation page.

3. Add the FAQ Widget to Your Pages

There are two ways to add the FAQ widget to your product pages: Auto-Insert or Manual Installation.

Option A: Auto-Insert Product FAQs

Auto-Insert automatically places the FAQ widget on matching pages without requiring you to edit your website's HTML. This is the easiest way to get started.

1. Toggle on Auto-Insert Product FAQs at the top of the section.

2. Add URL/Title Rules — Click Add rule to define which pages should display the FAQ widget. Each rule has the following options:

   • Field: Choose Page URL or Page Title to match against.

   • Operator: Select Contains, Equals, Starts with, or Ends with.

   • Value: Enter one or more values (one per line). If any value matches, the rule triggers.

   • Ignore URL parameters (URL rules only): Check this to ignore query strings (everything after ?) when matching.

   If any rule matches the current page, the widget will be inserted.

3. CSS Selector — Enter a CSS selector for the element where the widget should be placed (e.g., #product-description, .product-details).

4. Position — Choose where the widget appears relative to the selected element:

   • Insert before: Places the widget immediately before the element.

   • Insert after: Places the widget immediately after the element.

   • Append child: Places the widget inside the element, at the end.

5. Click Save Settings.

You can edit or delete rules at any time from the rules table.

Option B: Manual Installation

If you prefer to control exactly where the widget appears, insert the following <div> element directly into your product page HTML:

<div id="gleen-product-faqs"></div>

Place this code in the section of your website where you want the FAQ widget to appear.

---

⚙️ Behavior Notes

• Independent of the Chatbot:

  • The FAQ module does not initiate human transfers. It’s purely for on-page product question deflection.

• Smart Knowledge Base:

  • It uses the same knowledge base as the chatbot, so even non-product-specific questions may be answered.

---

🧪 A/B Testing or Delayed Initialization

To load the FAQ module dynamically after page load or conditionally in an experiment, use this script:

document.addEventListener("DOMContentLoaded", function () {
  const faqDiv = document.createElement("div");
  faqDiv.id = "gleen-product-faqs";
  document.querySelector("#target-section").appendChild(faqDiv);
  window.gleenWidget.initializeFAQWidget();
});

• Replace #target-section with the actual selector where the FAQ block should appear (e.g., #product-details).

Note: Make sure to call window.gleenWidget.initializeFAQWidget() after adding the div. This function is already included in the Alhena Widget script and is required to render the FAQ content into the div.

---

Conclusion

The Product FAQs feature helps streamline customer support by providing relevant answers to shoppers' questions directly on your product pages. By reducing the need for manual customer queries, it increases customer satisfaction and speeds up the decision-making process.

Make sure to customize the look of the widget to match your brand and embed it properly to offer a seamless experience for your customers.

For further assistance, use the Get Help button in your Alhena AI dashboard.