Site search plugins

If you've been looking to get site search and/or recommendations up and running on your web site, this is THE fastest way. Below is the documentation on our JavaScript based plugins for your web site.


Installing site search

If you haven't signed up with Sajari yet, you can sign up here. Once you've created a "collection", there are two installation steps.

  1. Indexing - synchronises your website pages into your collection
  2. Interface - add a search interface into your website

Below assumes you have added the indexing code on your site. If you have not yet added the code, please see our standard install instuctions or instructions for google tag manager specifically here.

You can also customise this further, see here for details on adding custom fields, etc.


Basic integration

The simplest search integration is via the copy and paste install search interface from the console. This will generate a basic interface, which you can cut and paste directly into your website. The sample has two separate components that can be placed anywhere in the body of your website.

Note: this install is a wrapper around our ReactJS library, which is even more customisable.

Render the search input:

<div id="search-box"></div>

Render the results:

<div id="search-response"></div>


Configuring the basic example

Looking at the code there are 4 major things to be configured:

  1. Which div to trigger the searching
  2. Which div to render the results
  3. CSS to control the look and feel
  4. JavaScript to make everything work
Of these components, the CSS is just a starting point, it's very simple to customise to your brand. Below shows an example JavaScript configuration code:

Multiple applications can happily coexist within a single page. The JavaScript below assigns the sample app to sjUI, but this can be any variable. Once created, this variable lets you communicate with the app to configure, monitor events, trigger searches, overlays, etc.

// Assign the application to a variable
var sjUI = (function(w,d,x,a,e,s,c,r){s = [];var b=function(){s.push(arguments);},q="ui";b.arr=s;w[a]=w[a]||[];w[a][q]=w[a][q]||[];w[a][q].push(b);c=d.createElement(x);c.async=1;c.src=e;r=d.getElementsByTagName(x)[0];r.parentNode.insertBefore(c,r);return b;})(window, document, "script", "sajari", "//cdn.sajari.net/js/integrations/website-search-1.2.0.js");

// Initialise the application by passing it a "config" object
sjUI("config", {
    project: "sajariptyltd",                                          // Set this to your project.
    collection: "sajari-com",                                         // Set this to your collection.
    pipeline: "website",                                              // Run the website pipeline.
    attachSearchBox: document.getElementById("search-box"),           // DOM element to render search box.
    attachSearchResponse: document.getElementById("search-response"), // DOM element to render search results.
    overlay: false,                                                   // Whether to render an overlay or in-page
    searchBoxPlaceHolder: "",                                         // Placeholder text for the search box.
    results: {"showImages": false},                                   // Configure the results
    values: {"q": getUrlParam("q"),"resultsPerPage": "10"},           // Set default values
    tabFilters: {                                                     // Make user selectable filters
        defaultTab:"All",
        tabs: [
            {title:"All",filter:""},
            {title:"Blog",filter:"dir1='blog'"},
            {title:"FAQ",filter:"dir1='faq'"}
        ]
    }
});

Defining the collection to search

project and collection define the project and collection the search interface will query.


Changing the algorithm

pipeline is the recipe used for the search requests. Pipelines can do many things, you can think of them as a pre-built configuration to run when making a request. Pipelines not only impact the way the query is run, but also how autocomplete is trained, self-learning works and much more. The "website" pipeline runs a known algorithm that works well with website data.


Changing the pipeline inputs

values defines the inputs of the pipeline. In the above example, this is obtaining the "q" parameter from the URL string, which will run the query immediately if it was passed in the URL string, e.g. example.com?q=something. Pipelines look for values as their input, in this case the "q" parameter.


Defining where to render

attachSearchBox and attachSearchResponse represent the divs to bind to respectively. In this case we've used JavaScript to locate the divs, but this is not essential.


Setting up facets (filter tabs)

tabFilters define simple facet based filters that allow users to filter the search results for a particular subset.

The example sets three tabs (incidentally those used on this site): "All" (no filter), "Blog" (filter to results in the directory "blog") and "FAQ" (filter to the directory called "faq"). For the case of the two filtered tabs, the filter is in the form <field><operator><value>. The "field" can be anything in the collection schema.

Operators supported: =, >, <, <=, >=, ^, $, != operators. The ~ is a "contains" filter, the ^ character is a "starts with" filter and the $ is an "ends with" filter.

Much more advanced facets and aggregations can be configured using our ReactJS library.


Rendering in an overlay

overlay is a boolean to determine whether to launch the results in an overlay. This is useful if there is nowhere in the page to render the results as the overlay can utilise the full screen with minimal design considerations.

Search Box

Search Box

The search box is an embeddable input form that shows suggestions as you type. You can put it in your website header or navigation to allow users to search and be taken to the search results page.

Like the website search integration, you can easily customise the search box with CSS to fit your look and feel.

To get the search box on your site, generate your own integration from the console. For technical details see the documentation


Dynamic Content

Dynamic content allows you to show up to date and relevant pages from your site in a variety of formats.

Choose which content to show based on pre-built pipelines or work with us to design your own custom pipeline.

  1. Similarity based
  2. Popularity based
  3. Age/Recency based
  4. Custom pipeline

Great examples of where you can use dynamic content:

  1. Empowering landing pages with always fresh content
  2. Trending/Hot content
  3. Category pages
  4. Help pages showing similar issues
  5. Recommendations

To get dynamic content on your site, generate your own integration from the console. For technical details see the documentation


Events

Each application has it's own pub-sub style event system. The config command above actually uses this event system. The app publishes events which can be used to control external UI elements, trigger analytics, debug and much more. The format to interact is as follows:

sjUI("<pub/sub>", "<event>", function() {});

For example you may wish to do something when a search occurred. You could do the following:

sjUI("sub", "search-sent", function(eventName, values) {
  console.log("Search sent with ", values);
});


Events to subscribe to include:

  • Search input keypresses, requests initiated
  • Query responses, clicks on results
  • See when overlays are opened/closed


Events to publish to include:

  • Set the search pipeline values
  • Initiate a search
  • Open or close a search overlay

See the full list of available events.

Analytics

If Google Analytics is installed on the page then the search interface automatically report searches as virtual page views. You can also enable site search in Google Analytics which will recognise these pageviews as searches.

You can disable this integration by setting "disableGA": true in the config dictionary.

If you'd like to integrate another analytics provider you can subscribe to events from the search interface and trigger the analytics yourself, see custom analytics.



Get started now

Start your 14-day free trial!

Start 14-Day Free Trial →

No credit card required

Some other happy companies using Sajari Website Search
lockheed martin customer logo foxtel customer logo canva customer logo unity customer logo australian institute of family studies customer logo