Add the Smart Answers UX Widget to a Custom Search UI

If you use a SearchStax UX Kit, you can use the SearchStax sample app for JavaScript, Vue, React, or Angular. Those samples already include Smart Answers integration.

If you use a custom search experience, you can add Smart Answers while continuing to use your existing search UI, search APIs, and result rendering.

This article explains how to add the SearchStax Smart Answers UX Widget to a custom search implementation and enable:

• Streaming Smart Answers responses
• Show More functionality for long answers
• Search feedback with thumbs up and thumbs down controls
• Analytics tracking

A complete working sample implementation is available in the SearchStax UX samples repository:

Smart Answers standalone sample

How This Integration Works

This approach lets you use only the SearchStax Smart Answers UX Widget while keeping your existing search implementation intact.

SearchStax Handles

• Smart Answers API requests
• Streaming answer rendering
• Show More functionality
• Search feedback collection
• Analytics tracking

Your Application Handles

• Search box UI
• Search button behavior
• Search result rendering
• Filters and sorting
• Custom search APIs

The only requirement is that your application notifies SearchStax whenever a new search is executed.

Prerequisites

Before you implement Smart Answers, make sure that:

1. Smart Answers is enabled for your SearchStax account.
2. Smart Answers is configured and published for the Search Profile you are using.
3. You have access to the following API values.

Step 1: Add Smart Answers to Your Existing Search UI

Assume your custom search page already contains a search box and search button:

<input id="custom-query-input" />
<button id="custom-search-button">Search</button>

Add the following container to your page for Smart Answers. The Smart Answers widget renders the answer and feedback controls inside this container.

<div id="searchstax-answer-container"></div>

Step 2: Install the SearchStax UX Library

Install the latest SearchStax UX package:

npm install @searchstax-inc/searchstudio-ux-js

Import the library into your application:

import { Searchstax } from "@searchstax-inc/searchstudio-ux-js";

Step 3: Initialize SearchStax

Create a SearchStax instance and configure it using your Smart Answers and analytics credentials:

const searchstax = new Searchstax();

searchstax.initialize({
  searchURL: "",
  suggesterURL: "",
  language: "en",
  questionURL: "YOUR_SMART_ANSWERS_API_URL",
  searchAuth: "YOUR_SEARCH_READ_ONLY_TOKEN",
  authType: "token",
  analyticsBaseUrl: "YOUR_ANALYTICS_TRACKING_URL",
  trackApiKey: "YOUR_ANALYTICS_TRACKING_KEY",
  model: "YOUR_SEARCH_PROFILE_NAME",
  sessionId: makeId(25),
});

Configuration Properties

Why Are searchURL and suggesterURL Empty?

This integration uses only the Smart Answers widget. Since your application already handles search requests and suggestions independently, the Search API and Suggester API are not required.

Step 4: Create a Session ID

The sample generates a unique session ID for analytics tracking:

function makeId(length: number) {
  let result = "";
  const characters =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  const charactersLength = characters.length;

  for (let i = 0; i < length; i++) {
    result += characters.charAt(
      Math.floor(Math.random() * charactersLength)
    );
  }

  return result;
}

Step 5: Add the Smart Answers Widget

After you initialize SearchStax, add the Smart Answers widget and attach it to the HTML container:

searchstax.addAnswerWidget("searchstax-answer-container", {
  templates: {
    main: {
      template: ``,
    },
  },
  feedbackwidget: {
    renderFeedbackWidget: true,
    thumbsUpValue: 10,
    thumbsDownValue: 0,
  },
});

The feedback widget automatically renders thumbs up and thumbs down controls and sends feedback to SearchStax Analytics. You can review this feedback later to understand answer quality and user satisfaction.

Step 6: Customize Templates

The sample project contains the complete Smart Answers template used by SearchStax. You can use the template as-is or customize it to match your site’s branding and user experience.

Step 7: Trigger Smart Answers When a Search Occurs

The final step is connecting your search experience to SearchStax.

Whenever a search is executed, notify SearchStax by updating the SearchStax search object:

function triggerSearchStaxReload(query: string) {
  searchstax.dataLayer.setSearchObject({
    ...searchstax.dataLayer.searchObject,
    query: query,
    page: 1,
  });
}

When this method is called:

1. SearchStax receives the query.
2. Smart Answers requests an answer.
3. The answer streams into the widget.
4. Analytics are tracked automatically.

Example: Triggering from a Search Button

window.onload = function () {
  const customQueryInput = document.getElementById("custom-query-input") as HTMLInputElement;
  const customSearchButton = document.getElementById("custom-search-button") as HTMLButtonElement;

  customSearchButton.addEventListener("click", function () {
    const query = customQueryInput.value;
    triggerSearchStaxReload(query);
  });
}

Example: Triggering on Enter Key

customQueryInput.addEventListener("keypress", (event) => {
  if (event.key === "Enter") {
    triggerSearchStaxReload(customQueryInput.value);
  }
});

Example: Integrating with an Existing Search Function

If your application already has a search function, call SearchStax whenever a search is performed:

function executeSearch(query: string) {
  performCustomSearch(query);
  triggerSearchStaxReload(query);
}

Styling

To use the default SearchStax styles, import the main theme:

@import "@searchstax-inc/searchstudio-ux-js/dist/styles/mainTheme.css";

You can override these styles to match your site’s branding.

Common customizations include:

• Typography
• Colors
• Button styling
• Mobile responsiveness
• Answer container layout

For feedback control styles, review the main.scss file in the sample project.

End-to-End Flow

User enters question
|
v
Custom Search UI
|
v
triggerSearchStaxReload(query)
|
v
SearchStax UX Library
|
+--> Smart Answers API
|
+--> Analytics Tracking
|
v
Smart Answers Widget Updates

Troubleshooting and FAQs

I Cannot Run a Package Manager. Is There Another Way to Include the Smart Answers UX Widget?

SearchStax also hosts the JavaScript library, which you can import instead of using npm install.

The SearchStax Studio JS changelog lists the latest version of the JavaScript library:

SearchStax Studio JS changelog

Import the JavaScript and styles in your HTML head. Replace v4.2.10 with the latest version from the changelog.

<script src="https://static.searchstax.com/studio-js/v4.2.10/js/search-ux.js"></script>
<link rel="stylesheet" href="https://static.searchstax.com/studio-js/v4.2.10/css/search-ux.css" />

In Step 2, replace this import:

import { Searchstax } from "@searchstax-inc/searchstudio-ux-js";

With this reference to the hosted library:

const Searchstax =
  window["@searchstaxInc/searchstudioUxJs"].Searchstax;

A sample implementation that uses the hosted JavaScript library is available in the samples repository:

Smart Answers standalone sample

Smart Answers Is Not Appearing

Verify that:

• Smart Answers is enabled.
• The Search Profile is published.
• The query is being passed to setSearchObject().
• The questionURL value is correct.
• The Search Read-Only Token is valid.
• The answer container exists on the page.
• No network errors appear in browser developer tools.

Feedback Buttons Are Not Showing Up

Verify that renderFeedbackWidget: true is configured when initializing the widget.

Analytics Is Not Getting Recorded on the Site Search Dashboard for Smart Answers

Verify that:

• analyticsBaseUrl is correct.
• trackApiKey is correct.
• A valid sessionId is being generated.

Expected Result

After implementation:

1. A user submits a question from your custom search UI.
2. SearchStax generates a Smart Answer using your indexed content.
3. The answer streams into the Smart Answers widget.
4. Users can expand long answers using Show More.
5. Users can provide thumbs up or thumbs down feedback.
6. Analytics and feedback are automatically tracked by SearchStax.

Your custom search experience remains fully intact while benefiting from SearchStax Smart Answers.