Integrating Asklo on Other Platforms

Introduction

You can now integrate Asklo on any e-commerce platform. This allows you to display the "Live FAQs" widget on your product detail pages (PDPs) and enhance the shopping experience with conversational Q&A.

Getting Started

1. Login to Asklo Hub

Visit Asklo Hub and log in with your credentials.

2. Create a New Widget

Navigate to the Widgets section.
Click "Add Widget".
Enter the details and ensure to choose "Others" as the platform type.
Once created, you will receive a unique Asklo Widget ID, for example: pqa-cbf46b85-faac-42bd-871e-f99034a4255e.

Integration Steps on Your Storefront

3. Add Required Scripts to the Header

Paste the following code into your store’s <head> tag:

<script type="module" src="https://resources-webcomponents.klevu.com/latest/klevu-ui/klevu-ui.esm.js"></script>
<link href="https://resources-webcomponents.klevu.com/pqa/pqa_full.css" rel="stylesheet" />

4. Insert the Widget in Your PDP

Paste this HTML where you want the Asklo widget to appear:

<klevu-init disable-user-session="true">
  <klevu-product-query 
    pqa-widget-id="WIDGET_ID"
    pqa-widget-layout="embedded"
    product-info-generator="getProductInfo()"
    item-id="234"
    item-group-id="456"
    item-variant-id="678"
    channel-id="cust-group-123"
    locale="en_US"
  >
  </klevu-product-query>
</klevu-init>

Replace "WIDGET_ID" with your actual Asklo Widget ID.

5. Implement getProductInfo() Function

Define a JavaScript function on your PDP that returns product details in the following format:

function getProductInfo() {
  return {
    itemId: "234",
    itemGroupId: "456",
    itemVariantId: "678",
    locale: "en_US",
    channelId: "cust-group-123",
    title: "Sample Product",
    url: "https://yourstore.com/sample-product",
    description: "High-quality product...",
    vendor: "YourBrand",
    priceMax: "99.99",
    priceMin: "79.99",
    tags: ["durable", "limited edition"],
    options: [
      { name: "Size", values: ["S", "M", "L"] }
    ],
    metafieldsV2: [
      { key: "Care", value: "Hand Wash", encoding: "" }
    ],
    images: ["https://yourstore.com/image.jpg"],
    variants: [
      {
        itemVariantId: "678",
        title: "Size M",
        sku: "SKU-M",
        url: "https://yourstore.com/sample-product?variant=M",
        image: "https://yourstore.com/image-m.jpg",
        price: "89.99",
        weight: "200g",
        metafieldsV2: [],
        inventoryStatus: "IN_STOCK"
      }
    ]
  };
}

Notes:

itemId and locale are a must. For locale, if you can hardcode to en_US.
If using metafieldsV2, the encoding key is mandatory (can be left as an empty string for no encoding).

Verify the Integration

Once added, go to your product page and ensure:

The Asklo "Live FAQs" widget is visible.
Product data loads correctly.
Interactions function as expected.

Add Checkout Tracking (Recommended)

To attribute orders and enable analytics, follow this guide to implement post-purchase tracking: Add Checkout Order Tracking

1-Click Integration on Shopify

Manual Integration on Shopify

Add Checkout (Order) Tracking

Using Klevu Catalog

Integrating Asklo on BigCommerce