This page summarizes the key Developer Documentation for the SearchStax Site Search solution.

Search UI Kit

To accelerate front-end development, we offer the Search UI Kit – a pre-configured search user interface with essential features for a world-class search experience.

Build your search page using pre-built UI components in a variety of frameworks, including:

• JavaScript
• Vue
• React
• Angular

The Search UI is a hosted search page that lets you quickly share the results of your SearchStax Site Search project to give your audience a preview of what their search will look like when completed. Learn more about Search UI.

API Documentation

SearchStax Site Search includes Search, Analytics, Discovery, and Ingest APIs to streamline and accelerate implementation.

Learn more about the SearchStax Site Search API Documentation.

Security

SearchStax Site Search offers several ways to increase the security of your search application:

• Change Password – see how to change your Site Search password
• Two-Factor Authentication (2FA) – increase security with Two-Factor Authentication
• Single Sign-On (SSO) – learn more about Single Sign-On for Site Search
• Single Sign-On with Okta – see how to implement Single Sign-On using Okta

Muli-Language Experiences

A Search App can be configured to offer a Search Experience tailored to the viewer’s preferred language. Learn more about the Available Languages and how to add language-specific experiences to Site Search.

Regions

When creating a Search App, you can select a region that you want the App to be provisioned in. Learn more about Site Search regions.

Search UI App

The Search UI App is a set of tools that make it easy to set up a search page that uses all of the features of SearchStax Site Search.

Learn more about the Search UI App:

• API Documentation Overview
• Search APIs – Search APIs are components that allow developers to seamlessly introduce search and auto-suggest capabilities to websites and applications
• Analytics APIs – the Analytics APIs are designed to capture the tracking and reporting analytics data used by Site Search
• Discovery APIs – the Discovery APIs drive the information for Popular Searches and Related Searches
• Ingest APIs – the Ingest API lets you update Solr documents in your Site Search project

Connectors

SearchStax Site Search has connectors with:

• Crawler
• Sitecore
• Drupal

Service Limits

Site Search has some limitations to ensure stability and performance for all users and client applications.

Learn more about the Service limits for SearchStax Site Search:

• App Level Limits
• Security Limits
• Other Technical Limits

Questions?

Subscription Level, App Level Limits and Technical Limits?

Do not hesitate to contact the SearchStax Support Desk.

The post Developer Documentation Overview appeared first on SearchStax Docs.

Searchstudio-ux-angular brings the power of the SearchStax Site Search solution to Angular applications through easy-to-use components. It allows you to rapidly build engaging search experiences in Angular apps.

Goal of the Components Library

The goal of SearchStudio-UX-Angular is to simplify building visually appealing and high-performance search interfaces in Angular apps. It handles all the complexities around frontend search UI development.

It provides Angular components like search box, results, filters etc. that can be easily combined to craft exceptional search experiences. The focus on performance, accessibility and aesthetics frees you to focus on UX.

Key Benefits of Using SearchStudio-UX-Angular

• Fully integrates SearchStudio capabilities like synonyms, faceting, sorting etc.
• Ready-made performant and accessible Angular components for search
• Customizable components to match your brand style
• Handles UI complexities allowing you to focus on UX
• Quickly build visually appealing search experiences
• Leverage SearchStudio search features without UI implementation concern
• Seamless integration into existing Angular applications
• Rapid development of stunning search interfaces

Visit the Get Started Page now to build awesome search experiences faster than ever before with searchstudio-ux-angular.

The post What is searchstudio-ux-angular appeared first on SearchStax Docs.

Searchstudio-ux-react offers the power of the SearchStax Site Search solution within React applications. It also works with Next.js applications. It provides ready-made components that integrate seamlessly to deliver exceptional search experiences.

Goal of the Components Library

The goal of SearchStudio-UX-React is to streamline the development of search UIs in React and Next.js apps by handling all front-end and UI complexities.

It offers a suite of React components like search box, results, filters etc. that can be easily combined to create engaging search interfaces. The focus on performance, accessibility and visual appeal allows you to craft remarkable search UIs with minimal effort.

Key Benefits of Using SearchStudio-UX-React

• Fully integrates with Site Search capabilities like typo tolerance, synonyms, facets etc.
• Ready-made performant and accessible React and Next.js components for search
• Customizable components to match your brand style
• Handles UI complexities allowing you to focus on UX
• Quickly build visually appealing search experiences
• Leverage Site Search features without UI implementation concern
• Seamless integration into existing React applications

Get started now to build awesome search experiences faster than ever before with searchstudio-ux-react.

The post What is searchstudio-ux-react? appeared first on SearchStax Docs.

Searchstudio-ux-vue offers the power of the SearchStax Site Search solution within Vue.js applications. It provides ready-made Vue components that integrate seamlessly to deliver exceptional search experiences.

Goal of the Components Library

The goal of SearchStudio-UX-Vue is to streamline the development of stunning search UIs in Vue.js apps by handling all frontend and UI complexities.

It offers a suite of Vue components like search box, results, filters etc. that can be easily combined to create engaging search interfaces. The focus on performance, accessibility and visual appeal allows you to craft remarkable search UIs with minimal effort.

Key Benefits of Using SearchStudio-UX-Vue

• Fully integrates with Site Search capabilities like typo tolerance, synonyms, facets etc.
• Ready-made performant and accessible Vue components for search
• Customizable components to match your brand style
• Handles UI complexities allowing you to focus on UX
• Quickly build visually appealing search experiences
• Leverage Site Search features without UI implementation concern
• Seamless integration into existing Vue.js applications

Get started now to build awesome search experiences faster than ever before with searchstudio-ux-vue.

The post What is searchstudio-ux-vue appeared first on SearchStax Docs.

Example

This is an example of using Angular with the SearchStax Site Search solution.

For a full example, see searchstudio-ux-angular.

Installation

npm install --save @searchstax-inc/searchstudio-ux-angular

Usage

Add following code to <head>

<script type="text/javascript">
      var _msq = _msq || []; //declare object
      var analyticsBaseUrl = '<https://analytics-us-east.searchstax.co>';
      (function () {
        var ms = document.createElement('script');
        ms.type = 'text/javascript';
        ms.src = '<https://static.searchstax.co/studio-js/v3/js/studio-analytics.js>';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ms, s);
      })();
    </script>

Import Components

Import SearchstudioUxAngularModule:

import { SearchstudioUxAngularModule } from '@searchstax-inc/searchstudio-ux-angular';

App Module

Add SearchstudioUxAngularModule to imports[]:

@NgModule({
  imports: [
    SearchstudioUxAngularModule
  ]
})

Wrapper Component

Wrap all other components in <app-searchstax-wrapper>:

<app-searchstax-wrapper>

  {/* Other SearchStudio components */}

</app-searchstax-wrapper>

Configuration

Pass search configuration to <app-searchstax-wrapper>:

<app-searchstax-wrapper
  [searchURL]="config.searchURL"
  [suggesterURL]="config.suggesterURL"
  [trackApiKey]="config.trackApiKey"
  [searchAuth]="config.searchAuth"
  [beforeSearch]="beforeSearch"
  [afterSearch]="afterSearch"
>
</app-searchstax-wrapper>

Adding Components

Add any other Site Search angular component as needed:

<app-searchstax-wrapper>

  <app-searchstax-input></app-searchstax-input>

  <app-searchstax-results></app-searchstax-results>

  {/* Other components */}

</app-searchstax-wrapper>

Styles

Import the CSS:

./../node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/mainTheme.css

The post Getting Started with searchstudio-ux-angular appeared first on SearchStax Docs.

Example

This is an example of using the React/Next.js library with the SearchStax Site Search solution.

For a full React example, see searchstax-accelerator-react. For a full Next.js example, see next-js-example.

Installation

npm install --save @searchstax-inc/searchstudio-ux-react

Usage

Add following code to <head>

<script type="text/javascript">
      var _msq = _msq || []; //declare object
      var analyticsBaseUrl = '<https://analytics-us-east.searchstax.co>';
      (function () {
        var ms = document.createElement('script');
        ms.type = 'text/javascript';
        ms.src = '<https://static.searchstax.co/studio-js/v3/js/studio-analytics.js>';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ms, s);
      })();
    </script>

Import Components

Import the necessary components:

import { 
  SearchstaxWrapper,
  SearchstaxInputWidget,
  SearchstaxResultsWidget
} from '@searchstax-inc/searchstudio-ux-react';

Wrapper Component

Wrap all other Site Search components in SearchstaxWrapper:

<SearchstaxWrapper>

  {/* Other SearchStudio components */}

</SearchstaxWrapper>

Configuration

Pass search configuration to SearchstaxWrapper:

<SearchstaxWrapper
  language={sampleConfig.language}
  searchURL={sampleConfig.searchURL}
  suggesterURL={sampleConfig.suggesterURL}
  trackApiKey={sampleConfig.trackApiKey}
  searchAuth={sampleConfig.searchAuth}
  authType={sampleConfig.authType}
  router={sampleConfig.router}
  beforeSearch={sampleConfig.hooks.beforeSearch}
  afterSearch={sampleConfig.hooks.afterSearch}
>
</SearchstaxWrapper>

Initialization example:

const sampleConfig = {
  language: 'en',
  searchURL: '',
  suggesterURL: '',
  trackApiKey: '',
  searchAuth: '',
  authType: 'basic',
  router: {
    enabled: true,
    routeName: 'searchstax',
    title: (result) => `Search results for: ${result.query}`,
    ignoredKeys: []
  },
  hooks: {
    beforeSearch: (props) => {
// modify props
      return props;
    },
    afterSearch: (results) => {
// modify results
      return results;
    }
  }
};

The sampleConfig needs to match the ISearchstaxConfig interface.

interface ISearchstaxConfig {
  language: string; // language code. Example: 'en'
  searchURL: string; // SearchStudio select endpoint
  suggesterURL: string; //SearchStudio suggest endpoint
  trackApiKey: string; // Api key used for tracking events
  searchAuth: string; // Authentication value. based on authType it's either a token value or basic auth value
  authType: "token" | "basic"; // Type of authentication
  autoCorrect?: boolean; // if set to true it will autoCorrect misspelled words. Default is false
  router?: IRouterConfig; // optional object containing router settings
  hooks?: {
    // optional object that provides various hook options
    beforeSearch?: (props: ISearchObject) => ISearchObject | null; // this function gets called before firing search. searchProps are being passed as a property and can be modified, if passed along further search will execute with modified properties, if null is returned then event gets canceled and search never fires.
    afterSearch?: (results: ISearchstaxParsedResult[]) => ISearchstaxParsedResult[]; // this function gets called after firing search and before rendering. It needs to return array of results that are either modified or untouched.
  };
}

Adding Components

Add any other Site Search components as needed:

<SearchstaxWrapper>

  <SearchstaxInputWidget />

  <SearchstaxResultsWidget />

  {/* Other components */}

</SearchstaxWrapper>

Styles

Import the CSS:

import '@searchstax-inc/searchstudio-ux-react/dist/styles/mainTheme.css';

See the React Styling section for information on theming and customization.

The post Getting Started with searchstudio-ux-react appeared first on SearchStax Docs.

Example

This is an example of using Vue with the SearchStax Site Search solution.

For a full example, see searchstudio-ux-vue.

Installation

Install the searchstudio-ux-vue package:

npm install --save @searchstax-inc/searchstudio-ux-vue

Import and Register Components

Import and globally register the Site Search components:

import { SearchstaxWrapper, SearchstaxInputWidget } from '@searchstax-inc/searchstudio-ux-vue';

Vue.component('SearchstaxWrapper', SearchstaxWrapper);
Vue.component('SearchstaxInputWidget', SearchstaxInputWidget);

Wrapper Component

Wrap all other Site Search components within the SearchstaxWrapper component:

<SearchstaxWrapper>

<!-- Other SearchStudio components here -->

</SearchstaxWrapper>

Configuration

Pass search configuration to the SearchstaxWrapper component:

<SearchstaxWrapper
    :language="sampleConfig.language"
    :searchURL="sampleConfig.searchURL"
    :suggesterURL="sampleConfig.suggesterURL"
    :trackApiKey="sampleConfig.trackApiKey"
    :searchAuth="sampleConfig.searchAuth"
    :authType="sampleConfig.authType"
    :router="sampleConfig.router"
    :beforeSearch="sampleConfig.hooks.beforeSearch" 
    :afterSearch="sampleConfig.hooks.afterSearch"
  >
  </SearchstaxWrapper>

Initialization example:

sampleConfig = {
    language: "en",
    searchURL: "",
    suggesterURL: "",
    trackApiKey: "",
    searchAuth: "",
    authType: "basic",
    router: {
      enabled: true,
      routeName: "searchstax",
      title: (result: ISearchObject) => {
        return "Search results for: " + result.query;
      },
      ignoredKeys: [],
    },
    hooks: {
      beforeSearch: function (props: ISearchObject) {
        const propsCopy = { ...props };
        return propsCopy;
      },
      afterSearch: function (results: ISearchstaxParsedResult[]) {
        const copy = [...results];
        return copy;
      },
    }
  };

Initialization object needs to be of type: ISearchstaxConfig

interface ISearchstaxConfig {
  language: string; // language code. Example: 'en'
  searchURL: string; // SearchStudio select endpoint
  suggesterURL: string; //SearchStudio suggest endpoint
  trackApiKey: string; // Api key used for tracking events
  searchAuth: string; // Authentication value. based on authType it's either a token value or basic auth value
  authType: "token" | "basic"; // Type of authentication
  autoCorrect?: boolean; // if set to true it will autoCorrect misspelled words. Default is false
  router?: IRouterConfig; // optional object containing router settings
  hooks?: {
    // optional object that provides various hook options
    beforeSearch?: (props: ISearchObject) => ISearchObject | null; // this function gets called before firing search. searchProps are being passed as a property and can be modified, if passed along further search will execute with modified properties, if null is returned then event gets canceled and search never fires.
    afterSearch?: (results: ISearchstaxParsedResult[]) => ISearchstaxParsedResult[]; // this function gets called after firing search and before rendering. It needs to return array of results that are either modified or untouched.
  };
}

Adding Components

Add any Site Search components needed:

<SearchstaxWrapper>

  <SearchstaxInputWidget />

  <SearchstaxResultsWidget />

<!-- Other components -->

</SearchstaxWrapper>

Styles

Import the CSS styles:

@import '@searchstax-inc/searchstudio-ux-vue/dist/styles/mainTheme.css';

See the Styling section for information on theming and customization.

The post Getting Started with searchstudio-ux-vue appeared first on SearchStax Docs.

node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/mainTheme.css

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

.searchstax-input {
  /* Override input styling */ 
}

.searchstax-result {
  /* Override result styling */
}

/* Override other class names */

@import 'node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/scss/mainTheme.scss';

// Override SCSS variables and mixins

@import 'mainTheme.scss';

// Override variables and add custom CSS

The post Searchstax-ux-react Styling appeared first on SearchStax Docs.

The SearchStax Site Search solution offers a variety of Vue widgets for your custom search page.

To learn more about the Searchstudio-ux-vue Widgets, follow the links to each page to see the templates and examples:

• SearchstaxInputWidget – provides a search input box with autosuggest/autocomplete functionality
• SearchstaxResultWidget – displays the search results
• SearchstaxFacetsWidget – displays the facet filters
• SearchstaxPaginationWidget – displays pagination controls for search results
• SearchstaxSearchFeedbackWidget – displays search feedback like number of results found
• SeaerchstaxExternalPromotionsWidget – displays external promotions fetched from the API
• SearchstaxSortingWidget – displays sorting options for search results

The post Vue Widgets appeared first on SearchStax Docs.

The SearchStax Site Search solution offers a variety of React widgets to assist with your custom search page.

To learn more about the Searchstudio-ux-react Widgets, follow the links to each page to see the templates and examples:

• SearchstaxInputWidget – provides a search input box with autosuggest/autocomplete functionality
• SearchstaxResultWidget – displays the search results
• SearchstaxFacetsWidget – displays the facet filters
• SearchstaxPaginationWidget – displays pagination controls for search results
• SearchstaxSearchOverviewWidget – displays search feedback and stats
• SearchstaxRelatedSearchesWidget – displays related searches
• SeaerchstaxExternalPromotionsWidget – displays external promotions fetched from the API
• SearchstaxSortingWidget – displays sorting options for search results

The post React Widgets appeared first on SearchStax Docs.