Product FAQs

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 reach out to Team Alhena and they can help you enable this feature for you.

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

Product FAQ setup on the website

After configuring the FAQs, follow these steps to add them to your website:

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

  2. Copy the provided embed code which looks like this:

<script>
document.gleenConfig = {
    company: "gleen-aidemo"
};
</script>
<script src="https://app.alhena.ai/sdk/gleenWidget.js">
</script>

  1. Paste the embed code into your website's HTML, just before the closing <body> tag.

  2. Insert the provided <div> element (<div id="gleen-product-faqs"></div>) where you want the FAQ widget to appear on your product page.

You can also send the code via email to a team member or directly copy it for your development team.

Here is the updated internal wiki with a clear note about the initializeFAQWidget() call:

🛠️ Integration Steps

1. Prerequisites

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

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

2. Insert the FAQ Container

You can embed the following HTML snippet directly into the desired section of your product page:

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

Alternatively, if you're A/B testing or want dynamic control, use the JS-based method below.

⚙️ 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.

PreviousConfigure Proactive NudgesNextWebsite chatsdk events

Last updated