Introduction

The SearchStax Site Search solution’s Hosted Search Experience provides a Vue.js Based Search Interface for your Site Search App. It serves PCs, tablets, and mobile platforms with equal facility.

The Hosted Search Experience allows users to:

• Search using keywords
• View a “Smart Answers” AI-based response when the query takes the form of a question.
• Show search results in grid or list format
• Track searches and clicks for analysis
• Search with auto-suggest/ auto-complete feature
• Show facets (refinements) as configured in the Studio
• Pagination of search results
• Result sorting by customizable options.
• Show did-you-mean suggestions for misspellings
• Show related searches
• Show external promotions
• Ability to apply transformation functions to show fields
• Ability to submit feedback for tracking and analysis

Implementation

Each Site Search App has its own Hosted Search app out of the box. To access it, navigate to Site Search > Configurations > Search UI > Hosted Search App.

The Hosted Search App is preconfigured to provide an appropriate search experience to the Search App’s index and settings. Click the View button to open the Hosted Search App in a browser window. You can copy the URL to share with stakeholders and coworkers.

Each time you update the Search Experience in any way, click the Regenerate button before using the Hosted Search App.

The post Hosted Search Experience appeared first on SearchStax Docs.

The Search UI App is a set of prebuilt tools that make it easy to set up a search page that uses all of the features of the Searchstax Hosted Search Experience.

• Search UI App: This app provides a Vue.js Based Search Interface to integrate with your Search App. It provides interface to:
  • Allow users to be able to search using keywords
  • Ability to show search results in grid or list format
  • Built in analytics tracking – tracking searches and clicks
  • Search with auto-suggest/ auto-complete feature
  • Show facets (refinements) as configured in Site Search
  • Pagination of search results and ability to sort by relevance and date
  • Show did-you-mean suggestions for misspellings
  • Ability to apply transformation functions to show fields
• Search UI App Search Bar: The SearchStax Search UI App provides a lightweight pure javascript widget to show a simple search icon and searchbox on your website. When the search is fired, the widget redirects to your actual search page.
• Search UI App Feedback: Site Search offers a special widget that you can optionally install on your application search page to encourage visitors to leave feedback about the search experience.

JS/CSS Libraries:

To integrate the Hosted Search Experience, download the following JS and CSS files or include them directly on your webpage:

• https://static.searchstax.com/studio-js/v3.8/css/studio-app.css
• https://static.searchstax.com/studio-js/v3.8/js/studio-app.js
• https://static.searchstax.com/studio-js/v3.8/js/studio-vendors.js
• https://static.searchstax.com/studio-js/v3.8/js/studio-analytics.js
• https://static.searchstax.com/studio-js/v3.8/js/studio-feedback.js (Optional to include Search Feedback)

The above integrates a specific version of the library. To get the latest v3 version, use the following:

• https://static.searchstax.com/studio-js/v3/css/studio-app.css
• https://static.searchstax.com/studio-js/v3/js/studio-app.js
• https://static.searchstax.com/studio-js/v3/js/studio-vendors.js
• https://static.searchstax.com/studio-js/v3/js/studio-analytics.js
• https://static.searchstax.com/studio-js/v3/js/studio-feedback.js (Optional to include Search Feedback.)

Integration

1. Include the downloaded files or hosted version of these files in the head section of the HTML page

<script type="text/javascript">
     var _msq = _msq || []; //declare object
     var analyticsBaseUrl = 'https://app.searchstax.com';
     (function () {
       var ms = document.createElement("script");
       ms.type = "text/javascript";
       ms.src = "https://static.searchstax.com/studio-js/v3/js/studio-analytics.js";
       var s = document.getElementsByTagName("script")[0];
       s.parentNode.insertBefore(ms, s);
     })();
</script>
<link href=https://static.searchstax.com/studio-js/v3/css/studio-app.css rel=preload as=style />
<link href=https://static.searchstax.com/studio-js/v3/js/studio-app.js rel=preload as=script />
<link href=https://static.searchstax.com/studio-js/v3/js/studio-vendors.js rel=preload as=script />
<link href=https://static.searchstax.com/studio-js/v3/css/studio-app.css rel=stylesheet />

2. Change the 'analyticsBaseUrl' based on the Analytics URL shown in the “Analytics API” section of your App within Site Search App Settings.
3. Define the DIVs in your HTML where the search box and various other components should be shown:

<div class="search-input-wrapper">
     <div class="feedback-wrapper"><div id="sf-feedback"></div></div>
      <div id="searchInput"></div>
    </div>

    <div class="search-results-summary-options-wrapper">
      <div id="searchResultSummarySection"></div>
      <div id="searchOptionsSection"></div>
    </div>

    <div class="search-results-wrapper">
      <div class="facet-container-wrapper">
        <div id="searchFacetSection"></div>
      </div>
      <div class="result-container-wrapper">
        <div id="external-search-result-container"></div>
        <div id="searchResultsSection"></div>
        <div id="relatedSearchesSection"></div>
        <div id="paginationSection"></div>
      </div>
    </div>

• searchInput is the input textbox for Search
• searchResultSummarySection is the area where summary of the search results should be shown. Example: Showing 1-10 of 200 results for Sitecore
• searchOptionsSection is the section where options for display (list/grid) and Sort Options are shown.
• searchFacetSection is the area for showing the Facets/Filters
• external-search-result-container is the area for showing External Promotions
• searchResultsSection is the area for showing the Search Results
• relatedSearchesSection is the area for showing Related Searches
• paginationSection is the area for showing Pagination controls
• sf-feedback is the area for showing Search Feedback

• These divs can be styled and be located as per your web design.

Initialize the search box by providing information about your Studio Application endpoints and keys as shown below:

Script for apps using Token Authentication (you will find definitions below the scripts):

<script>
      const studioConfig = {
        "connector": {
          "url": "https://XXXXX.searchstax.com/solr/ss-sample/emselect",
          "language": "fr",
          "authentication": "",
          "apikey": "9irZHJbDKzVGnjJjEGgzOVWLt8e2OAHv6krBuf5uvSY",
          "search_auth_type": "token",
          "select_auth_token": "cc8f8efead0ce681REDACTED",
          "suggester_auth_token": "cc8f8efead0ce681REDACTED",
          "session": session,
          "fields": {
            "title": "ds_title",
            "url": "site_url",
            "paths": "breakcrumbs",
            "ribbon": "category",
            "date": "ds_field_display_date",
            "thumbnail": "image_s"
          },
          fieldFormatters: {
            "ds_field_display_date": format_date
          }
 
          searchAdditionalArgs: "hl.fragsize=200",
          suggester: "https://XXXXX.searchstax.com/solr/ss-sample-suggester-3/emsuggest",
          relatedSearches: 'https://app.searchstax.com/api/v1/2/related-search/', searchAPIKey: '81c09977fedb7e89310c87df81d7bc787301155e'
          hideUniqueKey: true,
          autoCorrectSpellings: true
        },
        searchResults: '#searchResultsSection',
        searchInput: '#searchInput',
        searchResultSummarySection: '#searchResultSummarySection',
        facetSection: '#searchFacetSection',
        searchOptionsSection: '#searchOptionsSection',
        relatedSearchesSection: '#relatedSearchesSection',
        paginationSection: '#paginationSection',
    	customSearchTemplate: '#search-template',
    	customSearchFeedbackTemplate: '#searchFeedback-template',
    	customPagingTemplate: '#paging-template',
    	customSearchOptionSectionTemplate: '#searchOptionSection-template',
    	customNoResultTemplate: '#noresult-template',
    	customFacetTemplate: '#facet-template',
        relatedSearchesSection: '#relatedSearchesSection',
        hideBranding: false,
        display: 'multi',
        facet_pagination: 3,
        customResultTemplate: '#result-template',
        customRelatedSearchesTemplate: '#customRelatedSearches-template',
        externalSearchResults: '#external-search-result-container',
        customExternalPromotionsTemplate: '#external-search-result-template',
        suggestAfterMinChars: 2,
        showUnavailableFacets: false;
        orFacets: true,
        searchOnSuggestionChange: false,
      };
    </script>

Script for apps using Basic Authentication:

<script>
      const studioConfig = {
        "connector": {
          "url": "https://XXXXX.searchstax.com/solr/ss-sample/emselect",
          "language": "fr",
          "authentication": "YXBwNDMtYXBpOkNhbGl4IzIz",
          "apikey": "9irZHJbDKzVGnjJjEGgzOVWLt8e2OAHv6krBuf5uvSY",
          "session": session,
          "fields": {
            "title": "ds_title",
            "url": "site_url",
            "paths": "breakcrumbs",
            "ribbon": "category",
            "date": "ds_field_display_date",
            "thumbnail": "image_s"
          },
          fieldFormatters: {
            "ds_field_display_date": format_date
          }
 
          searchAdditionalArgs: "hl.fragsize=200",
          suggester: "https://XXXXX.searchstax.com/solr/ss-sample-suggester-3/emsuggest",
          relatedSearches: 'https://app.searchstax.com/api/v1/2/related-search/', searchAPIKey: '81c09977fedb7e89310c87df81d7bc787301155e'
          hideUniqueKey: false,
          autoCorrectSpellings: true
        },
        searchResults: '#searchResultsSection',
        searchInput: '#searchInput',
        searchResultSummarySection: '#searchResultSummarySection',
        facetSection: '#searchFacetSection',
        searchOptionsSection: '#searchOptionsSection',
        relatedSearchesSection: '#relatedSearchesSection',
        paginationSection: '#paginationSection',
    	customSearchTemplate: '#search-template',
    	customSearchFeedbackTemplate: '#searchFeedback-template',
    	customPagingTemplate: '#paging-template',
    	customSearchOptionSectionTemplate: '#searchOptionSection-template',
    	customNoResultTemplate: '#noresult-template',
    	customFacetTemplate: '#facet-template',
        relatedSearchesSection: '#relatedSearchesSection',
        hideBranding: false,
        display: 'multi',
        facet_pagination: 3,
        customResultTemplate: '#result-template',
        customRelatedSearchesTemplate: '#customRelatedSearches-template',
        externalSearchResults: '#external-search-result-container',
        customExternalPromotionsTemplate: '#external-search-result-template',
        suggestAfterMinChars: 2,
        showUnavailableFacets: false;
        orFacets: true,
        searchOnSuggestionChange: false,
      };
    </script>

• connector.url: required: This is the Search Engine URL for your Site Search Application
• connector.language: optional: This defines language of the app (default: ‘en’)
• connector.suggester: optional: This is the Auto-Suggest URL for your Site Search Application
• connector.relatedSearches: optional: This is the Related Searches API URL for your application
• connector.searchAPIKey: optional: This is the API key for searches for all app.searchstax.com requests, which currently includes related searches.
• connector.authentication: required for apps on Basic Auth: This is the Basic Authentication header for the Search Endpoint. You can construct this from the API username/password that was used when configuring the Site Search Application – https://www.blitter.se/utils/basic-authentication-header-generator/ . If your app is using Token Auth, leave this value empty – “”.
• connector.apiKey –  required: This is the Analytics tracking key that you can find in your Site Search Application settings – https://searchstudio.searchstax.com/#/apps-management
• connector.search_auth_type – required for apps on Token Auth: Set this value as “token”. This will instruct the accelerator that this is the method for authentication. If your app is using Basic Auth, you do not need to include this connector configuration.
• connector.select_auth_token – required for apps on Token Auth: This is the Token key that you can find in you can find in your Site Search App Settings. It is recommended to use the Read Only token here. If your app is using Basic Auth, you do not need to include this connector configuration.
• connector.suggester_auth_token – required for apps on Token Auth: This is the Token key that you can find in you can find in your Site Search App Settings. It is recommended to use the Read Only token here. If your app is using Basic Auth, you do not need to include this connector configuration.
• connector.session:  required: Unique session id that should be passed to track the user. 
• connector.fields:  required: Search UI App shows certain fields in a special way. These special fields are:
  • title :  required: This is shows as the header, on clicking which the “url” is openedurl:  required: Field containing the URL that will be tracked and opened when the title is clicked onpaths: optional: Field whose data will be shown in a special style under the title (blog / 6-reasons-for-searchstax-solr-as-a-service styling shown below)ribbon:  optional: Field whose data will be shown at the top of the tile as a ribbon. (Blog styling shown below)
  • date: optional: Field that contains the date. Only if this field is present, sorting options to show search results by Relevance or Most Recent will be shown.
  • thumbnail: optional: Field that contains the url of an image that should be shown in a special way as a thumbnail to the left of the search result item.

• connector.searchAdditionalArgs: optional:  can be used to add any additional parameters that you would like to add to the Solr select endpoint. Example: "hl.fragsize=200&hl.simple.pre=<font color='red'>&hl.simple.post=</font>". You can also set the relevance model for the page in this argument, Example: "model=ElevatedRelevanceModel"
• connector.hideUniqueKey: optional: can be used to hide the value of the Unique id/key (as defined in the schema) from the search results that are shown. Sometimes, the unique key is a url and you would like to display it, while sometimes it might be a UUID that you would not like to display.
• connector.autoCorrectSpellings: optional: can be used to automatically show results for spell-corrected queries when a misspelt input is searched.
• connector.defaultQuery: optional: can be used to provide the default query that the page should be loaded with. If you would like all results to be shown when your search page is first rendered, you can pass the defaultQuery as ‘*’
• fieldFormatters: optional: can be used to transform any field. For example, if your dataset contains the field as a long, or any other format, you can write a formatter to transform it into a readable date string. As shown in the example, for any of the fields, you can specify the formatter function that the module should call when showing the value of that particular field.
• display: optional:  lets you control how the search results will be shown. Available options are grid(default), list and multi (Shows toggle option between list and grid)
• hideBranding: optional: Setting this value to True hides SearchStax branding from the SearchBox
• facet_pagination: controls how many facets should be shown in the UI by default, after which “More” is shown to view more facets. More lets user view the next “facet_pagination” number of facet values, with the max limit of values that are controlled from Site Search’s facet Max Count configuration
• suggestAfterMinChars: controls the minimum number of characters that should be entered in the search box at which the Auto-Suggest module should trigger and start offering suggestions.
• showUnavailableFacets: If false (default), when the user selects a facet value, all incompatible values disappear from the screen. If true, the incompatible values remain visible but are grayed out.
• orFacets: If false (default), the AND operator will apply for facet values. If true, the OR operator will apply for facet values.  The true setting offers all facet values all the time, overriding the setting of showUnavailableFacets (above).
• searchOnSuggestionChange: if set to false, navigating through autosuggest items with keyboard keys will not trigger search

Settings for Sections showing various UI components:

• searchResults and customResultTemplate: The div for showing the search results and the id of the template html for that section. customNoResultTemplate is the template html for when search gives back no results.
• searchInput and customSearchTemplate: The div for showing the search input textbox and the id of the template html for that section.
• facetSection and customFacetTemplate: The div for showing the facets/filters and the id of the template html for that section.
• searchResultSummarySection and customSearchFeedbackTemplate: The div for showing the summary of search results (Like Showing 1-10 of 200 results for “Sitecore) and the id of the template html for that section
• searchOptionsSection and customSearchOptionSectionTemplate: The div for showing the search options for sorting and display styles and the id of the template html for that section
• paginationSection and customPaginationTemplate: The div for showing pagination and the div template html for that section
• relatedSearchesSection and customRelatedSearchesTemplate: The div and template html for showing the Related Searches
• externalSearchResults and customExternalPromotionsTemplate: The div and template html for showing External Promotions

The templates for each section can be used for customizing the HTML layout of that section. Modifying them will require some knowledge on how to write Vue templates. The variables available in the template are:

1. isGridLayout: Dynamic internal function that returns true if the layout is grid. You can use this to specify a different CSS for Grid Layout vs List Layout
2. ribbon: Data for the configured ribbon field as returned by the search
3. title: Data for the configured title field as returned by the search
4. url: Data for the configured url field as returned by the search
5. paths: Data for the configured paths field as returned by the search
6. thumbnail: Data for the configured thumbnail field as returned by the search
7. date: Data for the configured date field as returned by the search
8. snippet: Data for the configured snippet field as returned by the search
9. result: contains all unparsed result data for more complex implementations
10. promoted: Contains flag if the search result is promoted (true/false)

For the result to be clickable, a property @click="navigate($event, url)" should be placed on the tag.

Below are two example templates examples for the results section: Template 1: Show all configured fields.

<script type="text/x-template" id="result-template">
<div class="card-searchstudio-js-custom" :class="{ 'card-searchstudio-js-grid-layout': isGridLayout, 'has-thumbnail': thumbnail !== '', 'display-none': searchStore.studioConfig.customResultTemplate }">
    <div class="card-searchstudio-jsClass">
      <a class="stretched-link" :href="url" :autofocus="keyIndex === 0" @click="navigate($event, url)">
        <div class="card-searchstudio-js-body p-0">
          <span class="badge" :class="valueClass(ribbon)" v-if="ribbon" v-html="ribbon" />

          <h3 class="card-searchstudio-js-title" v-if="title">
            <span v-html="title" />
            {{ keyIndex }} KEY
          </h3>
          <span class="card-searchstudio-js-path" v-if="paths" v-html="paths" />
          <span class="star elevated" :class="valueClass(ribbon)" v-if="promoted">&nbsp;</span>
          <div class="thumbnail" v-if="thumbnail">
            <span>
              <img alt="" :src="thumbnail" />
            </span>
          </div>

          <div class="card-searchstudio-js-body p-0" v-if="snippet">
            <div v-if="snippet">
              <div class="card-searchstudio-js-text">
                <span v-html="snippet" />
              </div>
            </div>
          </div>
          <div class="card-searchstudio-js-body p-0" v-if="description">
            <div class="card-searchstudio-js-text">
              <span v-html="description" />
            </div>
          </div>
        </div>
      </a>
    </div>
  </div>
</script>

Template 2: Show standard fields, and have a way to loop through and show any extra fields returned by the search, which are present in the raw result variable:

<script type="text/x-template" id="result-template">
<div class="card-searchstudio-js-custom" :class="{ 'card-searchstudio-js-grid-layout': isGridLayout, 'has-thumbnail': thumbnail !== '', 'display-none': searchStore.studioConfig.customResultTemplate }">
    <div class="card-searchstudio-jsClass">
      <a class="stretched-link" :href="url" :autofocus="keyIndex === 0" @click="navigate($event, url)">
        <div class="card-searchstudio-js-body p-0">
          <span class="badge" :class="valueClass(ribbon)" v-if="ribbon" v-html="ribbon" />

          <h3 class="card-searchstudio-js-title" v-if="title">
            <span v-html="title" />
            {{ keyIndex }} KEY
          </h3>
          <span class="card-searchstudio-js-path" v-if="paths" v-html="paths" />
          <span class="star elevated" :class="valueClass(ribbon)" v-if="promoted">&nbsp;</span>
          <div class="thumbnail" v-if="thumbnail">
            <span>
              <img alt="" :src="thumbnail" />
            </span>
          </div>

          <div class="card-searchstudio-js-body p-0" v-if="snippet">
            <div v-if="snippet">
              <div class="card-searchstudio-js-text">
                <span v-html="snippet" />
              </div>
            </div>
          </div>
          <div class="card-searchstudio-js-body p-0" v-if="description">
            <div class="card-searchstudio-js-text">
              <span v-html="description" />
            </div>
          </div>
          <div class="card-searchstudio-js-body p-0" :key="propertyName" v-for="(value, propertyName) in searchResultKeysOrdered">
            <div v-if="!value.result_card || value.result_card === 'date'">
              <div class="card-searchstudio-js-text" :class="value.name">
                <span class="image" v-if="isImage(result[value.name])">
                  <img alt="" :src="result[value.name]" />
                </span>
                <span v-else-if="value.result_card === 'date'" v-html="date" />
                <span :class="valueClass(result[value.name])" v-html="extractedValue(value.name, result[value.name])" v-else />
              </div>
            </div>
          </div>
        </div>
      </a>
    </div>
  </div>
</script>

5. If using the Optional Search Feedback, initialize the plugin as shown below:

<script type="text/javascript">
     (function (w,d,s,o,f) {w['sf-widget']=o;w[o] = w[o] || function () {(w[o].q = w[o].q || []).push(arguments)};
     js = d.createElement(s);fjs = d.getElementsByTagName(s)[0];js.src = f;js.async = 1;fjs.parentNode.insertBefore(js, fjs);}
     (window, document, 'script', '_sf', 'https://static.searchstax.com/studio-js/v2/js/studio-feedback.js'));
 
     _sf("9irZHJbDKzVGnjJjEGgzOVWLt8e2OAHv6krBuf5uvSY");
   </script>

The parameter to _sf method is the Analytics API Key that is also used before as the connector.apiKey parameter.

Full Example:

The Hosted Search Experience is a search page built with the Search UI Kit using your Solr and Site Search settings. Simply view the page source for the most up-to-date example of Hosted Search Experience integration.

The post Overview appeared first on SearchStax Docs.

The SearchStax Site Search solution’s Search UI App features are compatible with the following list of web browsers.

Safari (recommended at least version 12)

• Mac (versions 10.13.6 or higher)
• iOS (versions 11 or higher)

Edge (recommended at least version 79)

• Mac (versions 10.12.6 or higher)
• Windows 10

Chrome (recommended at least version 60)

• Mac (versions 10.10.5 or higher)
• Windows (versions 7 or higher)
• iOS (versions 11 or higher)
• Android (versions 4.4 or higher)

Firefox (recommended at least version 55)

• Mac (versions 10.11.6 or higher)
• Windows (versions 7 or higher)
• Android (versions 4.4 or higher)

Opera (recommended at least version 47)

• Mac (versions 10.10.5 or higher)
• Windows (versions 7 or higher)

Samsung Internet

• Samsung devices running Android (versions 5 or higher)

The post Browser Compatibility appeared first on SearchStax Docs.

The SearchStax Site Search solution’s Search UI App can display External Promotions to your Search Application.

To enable External Promotions on your Accelerator follow the steps below.

1. Add the Container <div> in the HTML

Add the following container div under the result-container-wrapper in the HTML. Technically, it can be anywhere, but it’s recommended at the top of the search results.

2. Enable External Promotions in the studioConfig Object

Add the following fields in the studioConfig initializer object:

• externalSearchResults: ‘#external-search-result-container’,

• customExternalPromotionsTemplate: ‘#external-search-result-template’,

3. Add the External-search-result-template Script

<script type="text/x-template" id="external-search-result-template">
	<div class="external-searches-container">
	<div class="list-wrapper external-list-wrapper"
		:key="externalResult.url"
		v-for="externalResult in externalSearchResults">
	<div class="card-searchstudio-js-custom">
		<div class="card-searchstudio-jsClass">
		<div class="card-searchstudio-js-body p-0">
			<div class="card-searchstudio-js-title">
			<a :href="externalResult.url"
				@click.prevent="trackClick(externalResult, $event)"
				class="stretched-link">{{ externalResult.name }}</a>
			</div>
						<div class="icon-elevated" />
			<div class="card-searchstudio-js-body p-0">
			<div class="card-searchstudio-js-text content">
				<span class="SearchStax">{{ externalResult.description }} </span>
			</div>
			</div>
			<div class="card-searchstudio-js-body p-0">
			<div class="card-searchstudio-js-text content">
				<span class="SearchStax">{{ externalResult.url }}</span>
			</div>
			</div>
			<div class="card-searchstudio-js-body p-0" />
		</div>
		</div>
	</div>
	</div>
</div>
</script>

4. Make Styling Updates

You will need to add styling updates to .card-searchstudio-js-custom.

The post External Promotions appeared first on SearchStax Docs.

The SearchStax Site Search solution’s Search UI App provides a lightweight pure javascript widget to show a simple search icon and search box on your website. When the search is actually fired, the widget redirects to your actual search page.

This widget is not dependent on JQuery or Vue.

It shows up by default as the search icon shown below:

which when clicked shows the search bar, complete with search suggestions.

The search icon and the search bar can be reformatted easily using CSS.

To use this widget:

1. Include the following in the header:

<script src="https://static.searchstax.com/studio-js/v3/js/search-widget.min.js"></script>

2. Include the widget container in your website:

<div id="div-widget-id" class='studio-search-widget'></div>

3. Initialize the widget once the container is finished rendering

new SearchstudioWidget(
    'ZTBwNDA12345tYXBpOlN0YXgjMjM0',
    'https://ssXXXX.searchstax.com/solr/suggester-collection/emsuggest',
    'https://www.searchstax.com/search/',
    3,
    'searchStudioQuery',
    'div-widget-id',
    'en',
    'token'
)

• The parameters to the widget are:
  • authentication: This is the authentication header for the Auto Suggest Endpoint. If your app is using Token Authentication, you will be able to find your token in App Settings. If your app is using Basic Authentication, you can construct this from the API username/password that was used when configuring the Search App – https://www.blitter.se/utils/basic-authentication-header-generator/ . It is recommended to use Read Only.
  • auto suggest endpoint: This is the Auto-suggest endpoint of your search application, that you can get from the App Management page
  • search page link: This is the link to your search page. The widget will pass the search query to the search page so it can render the results and take you to that page 
  • number of characters: Auto-suggestions will display after this number of characters is typed. Please note that this is a static value that should be same or greater than what is configured within your Site Search application. This widget does not dynamically load any of the settings.
  • query: When the search page link is invoked, the widget will pass ?<SPECIFIED PARAMETER>=<QUERY> to the search page link
  • ID of the widget: The ID of the widget
  • language: Which language-specific experience to use as the auto-suggest source. If not specified, defaults to ‘en’.
  • authentication method – required for apps on Token Auth: Set this value as “token”. This will instruct the widget that this is the method for authentication. If your app is using Basic Auth, you do not need to include this connector configuration..

Modifying the Widget

The Lightweight Search Widget is supplied to you in a generic form. If you wish to modify it, there are three steps:

• Download https://static.searchstax.com/studio-js/v3/js/search-widget.min.js and modify it as you require.
• Place the modified .js file somewhere in your website environment. 
• Modify line 11 of the widget html file to point to your new .js file.

Full HTML Example

<!DOCTYPE html>
 
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Search Widget</title>
 
 
        <script src="https://static.searchstax.com/studio-js/v3/js/search-widget.min.js"></script> 
 
    <script type="text/javascript">
        function initiateSearchWidget(){
            //Call when document is loaded
            new SearchstudioWidget(
                'ZTBwNDA12345tYXBpOlN0YXgjMjM0',
                'https://ssXXXX.searchstax.com/solr/suggester-collection/emsuggest',
                'https://www.searchstax.com/search/',
                3,
                'q', 
                'div-widget-id',
                'en',
                'token'
            )
        }
    </script>
    <style>
        .left-margin{
            margin-left: 500px;
        }
        .flex{
            display: flex;
        }
        .text{
            padding: 10px;
 
        }
    </style>
    <style>
         .studio-search-widget {
            position: relative;
            width: 60px;
            text-align: center;
            border: 1px solid #ced4da;
            border-radius: 80px;
            padding: 10px 0;
        }

        .studio-search-widget .studio-widget-search-icon{
						position:relative;
						display:inline-block;
						background: #fff;
						border-radius: 30px;
						height: 8px;
						width: 8px;
						border: 2px solid #2e2e30;
						margin-left: -5px;
        }

        .studio-search-widget .studio-widget-search-icon:after {
						content: "";
						height: 2px;
						width: 8px;
						background: #2e2e30;
						position:absolute;
						top:9px;
						left:7px;
    				                -webkit-transform: rotate(45deg);
						-moz-transform: rotate(45deg);
						-ms-transform: rotate(45deg);
						-o-transform: rotate(45deg);
  			}

        .studio-search-widget .search-wrapper{
            visibility: hidden;
            position: absolute;
            right: -1px;
            top: -1px;
            width: 60px;
            text-align: center;
            border: 1px solid #ced4da;
            border-radius: 80px;
            padding: 10px 0;
            background-color: white;
            transition: visibility 0.2s, width 0.2s ease-in;
	    display: flex;
        }

	.studio-search-widget .search-wrapper .studio-widget-small-search-icon{
		position:relative;
		display:inline-block;
		background: #fff;
		border-radius: 30px;
		height: 6px;
		width: 6px;
		border: 2px solid #2e2e30;
		margin-left: 15px;
		margin-right: 5px;
		margin-top: 4px;
	}
	.studio-search-widget .search-wrapper .studio-widget-small-search-icon:after{
		content: "";
		height: 2px;
		width: 6px;
		background: #2e2e30;
		position:absolute;
		top:7px;
		left:5px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
	}

	.studio-search-widget .search-wrapper .studio-widget-search-input{
		padding-top: 4px;
	}

        .studio-search-widget.expanded .search-wrapper{
            visibility: visible;
            width: 600px;
        }


        .studio-search-widget .search-wrapper .studio-widget-autosuggest-results{
            position: absolute;
            width: calc(100%);
            top: 42px;
            box-shadow: 0 6px 15px 0 rgb(0 0 0 / 10%);
	    border-radius: 15px;
        }

        .studio-search-widget .search-wrapper .studio-widget-autosuggest-results .result-row{
            width: calc(100% - 60px);
            padding: 10px;
	    padding-left: 30px;
            text-align: left;
	    text-transform: capitalize;
        }

        .studio-search-widget .search-wrapper .studio-widget-autosuggest-results .result-row.searchstudio-active-row{
            /* background-color: white; */
	    color: #4bb5e2;
            cursor: pointer;
        }

        .studio-search-widget .search-wrapper input{
            width: calc(100% - 40px);
            border: none;
            height: 13px;
            box-shadow: none;
            outline: none;
            z-index: 4;
            /* padding: 0 20px; */
        }
    </style>
  </head>
<body onload="initiateSearchWidget()">
    <div class="left-margin">
        <div class="flex">
            <div class="text">&nbsp;</div>
            <div>
                <div id="div-widget-id" class='studio-search-widget'></div>
            </div>
            <div class="text">&nbsp;</div>
        </div>
    </div>
</body>
</html>

The post Search Widget appeared first on SearchStax Docs.

The SearchStax Site Search solution offers a special widget that you can optionally install on your application search page to encourage visitors to leave feedback about the search experience. It looks like this:

When a user fills out this form, the input is added to the App database for examination in the Site Search UI by the Business User. 

To include this widget in your search page, use the script on Site Search > App Settings > All APIs > Analytics.

The post Feedback Widget appeared first on SearchStax Docs.