This page summarizes the key Developer Documentation for SearchStax Studio.

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 (coming soon)
• Angular (coming soon)

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

API Documentation

SearchStax Studio includes a number of APIs to streamline and seamlessly accelerate the implementation process.

Learn more about the SearchStax Studio API Documentation:

• 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 the Studio
• 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 Studio project

Security

SearchStax Studio offers several ways to increase the security of your site search application:

• Change Password – see how to change your Studio password
• Two-Factor Authentication (2FA) – increase security with Two-Factor Authentication
• Single Sign-On (SSO) – learn more about Single Sign-On for Studio
• 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 Studio.

Regions

Regions

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

UX Accelerator

The UX Accelerator is a set of tools that make it easy to set up a search page that uses all of the features of SearchStax Studio.

Learn more about the UX Accelerator:

• 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 the Studio
• 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 Studio project

Integrations

SearchStax Studio has integrations with:

• Sitecore
• Drupal

Service Limits

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

Learn more about the Service limits for SearchStax Studio:

• 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 Studio Developer Documentation appeared first on SearchStax Docs.

Studio > Search Experience > Overview

SearchStax Studio has an easy-to-use interface for updating, enhancing and managing the site search experience for your website.

• Results Configuration – lets you manage the fields that will be displayed in your search results, select your search facets and define the options for sorting search results
• Basic Relevance – provides an interface to manage stopwords, synonyms and spellcheck for your search experience
• Relevance Modeling – lets you define a Relevance Model to set up the behavior of your search experience using the following features:
  • Search Fields – identify the fields that will be used to determine the search results
  • Global Filters – create Include and Exclude filters to partition your index and focus your search results on relevant results
  • Ranking – use the sliders to determine which fields or calculated fields are emphasized in the search results
  • Rules – modify the search results with Rules to finetune the search results
  • Promotions – create internal or external promotions to ‘promote’ specific content to the top of the search results and shape a better search experience for your users

The post Overview appeared first on SearchStax Docs.

Searchstudio-ux-angular brings the power of SearchStax Studio search 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 SearchStax Studio search within React applications. It provides ready-made React 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 stunning search UIs in React apps by handling all frontend 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 SearchStudio search capabilities like typo tolerance, synonyms, facets etc.
• Ready-made performant and accessible React 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 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 SearchStax Studio search 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 SearchStudio 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 SearchStudio 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.

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 SearchStudio 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.

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 SearchStudio 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 SearchStudio 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.

Installation

Install the searchstudio-ux-vue package:

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

Import and Register Components

Import and globally register the SearchStudio components:

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

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

Wrapper Component

Wrap all other SearchStudio 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 SearchStudio 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.

SearchStax Studio provides resources to implement site search in the front-end of your web application. These resources are meant to accelerate the development of the site search page regardless of your environment.

• Search UI App
• JS Frameworks
• Search UI Rest APIs

Here is a brief overview of each of these resources.

Search UI App

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

You can find the Search UI App under the Search UI Kit in the left navigation pane. You can either view the Search UI directly using the View button or copy the Search Experience Template URL and paste the URL in a separate browser window.

JavaScript or JS Frameworks

SearchStax Studio lets you build your search page using pre-built UI components in a variety of JavaScript frameworks in headless environments. You can find the JS Frameworks under the Search UI Kit in the left navigation pane.

There is a strong push toward headless CMS systems to manage, deliver and render content for users. For more background on headless content management systems, check out our blog post on What are Headless Content Management Systems?.

There are four JS Framework options:

• JavaScript – is a programming language that is used to create interactive web pages and can be used for both front-end and back-end development.
• Vue – is a JavaScript-based framework that uses a data object and HTML templates to create web applications, and is known to be smaller, faster and easier to use than other frameworks.
• React – is a JavaScript library that uses a state object and JSX to create web applications and is ideal for larger and more complex applications.
• Angular JS – is a JavaScript-based web application framework that supports full-stack development for building all types of web applications, especially single-page applications (SPAs), and based on the concept of components.

SearchStudio UX Packages

For each of the UX Packages, you can find the Framework description, the Getting Started page and NPM Package Libraries to build SearchStax Studio search pages:

Widgets Directory

Here are the Widgets for each framework that can be used to create search experiences:

Pages Directory

The Pages directory contains example applications that demonstrate how to use the various widgets together to build real apps. Follow the links to GitHub below to see the application that implements one or more of the available Framework-related widgets:

Search UI Rest APIs

SearchStax Studio includes a number of APIs to streamline and seamlessly accelerate the implementation process.

Selecting one of the APIs will provide you with the Endpoints needed to query the index or enable the search functionality.

• 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 the Studio
• 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

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post Search UI Kit appeared first on SearchStax Docs.

SearchStax clients sometimes ask if our JS Frameworks are WCAG 2.1 compliant.

We’ve designed our Search UI Toolkit as a flexible foundation for developers to build customized search experiences. While our JS Frameworks provide a robust starting point, we understand that each implementation has unique requirements, including accessibility.

We encourage developers to augment and tailor the provided base to meet specific needs, including compliance with WCAG 2.1 standards. Our role is to provide a strong, adaptable core, upon which developers can implement additional features such as accessibility, ensuring their search solutions are inclusive and accessible to all users.

What is WCAG 2.1?

The Web Content Accessibility Guidelines (WCAG) 2.1 cover a wide range of recommendations for making Web content more accessible to people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations.

The guidelines include additional markup and data that screen readers can read aloud, tagging for keyword navigation, visual guidelines for colors, and more.

It’s the responsibility of individual website owners and developers to ensure that their sites are configured to meet WCAG guidelines for the various experiences, content types, navigation interfaces, and other site-specific features.

Visual Media

Search result pages can include thumbnail images, image galleries, or video snippets. If these are included in search results, they may need additional tagging including image alt description and descriptive filename or video title, description, and captions for any spoken dialog included in a video snippet.

You may need to add additional fields to your search index (such as image description or captions) so that they can be included in each search result.

Inputs, Navigation, and Filtering

Search inputs (including suggested keyword results) may need additional tagging (e.g. tab order) and other functions to support keyboard navigation and selection.

Search result filtering interfaces including facets, filters, and sorting options may need additional functionality to ensure that all selectable options are visible and that input labels are appropriately tied to their relevant input. Inputs may need to support keyboard navigation to select or update options as well as navigate between different inputs.

Search Interface

Other critical WCAG guidelines include ensuring that text is large enough with enough background contrast to be perceptible. Colors for text, inputs, and other interface items should have enough contrast ratio so that they can be perceived against the backdrop and should not use color alone to convey information.

Other accessibility considerations may include how content is displayed and updated to ensure that users can consistently find interface items and search results as they continue to refine or update their search keywords.

Additional WCAG Resources

Since every site and search experience is different it is up to individual site developers and maintainers to ensure that the information and user experience meets WCAG guidelines.

• W3C WCAG Site
• W3C WCAG Checklist
• How to Meet WCAG

Questions?

Do not hesitate to contact the SearchStax Support Desk.

The post WCAG 2.1 Compliance appeared first on SearchStax Docs.