# Sajari Website integration (HTML & JavaScript)

[Sajari Search](https://www.sajari.com) is a hosted search and recommendation service supporting instant search, various recommendations widgets and automatic content indexing.

[![Version][version-svg]][package-url] [![License][license-image]][license-url] [![Downloads][downloads-image]][downloads-url]

[license-image]: http://img.shields.io/badge/license-MIT-green.svg?style=flat-square
[license-url]: LICENSE.txt
[downloads-image]: https://img.shields.io/npm/dm/sajari-website.svg?style=flat-square
[downloads-url]: http://npm-stat.com/charts.html?package=sajari-website
[version-svg]: https://img.shields.io/npm/v/sajari-website.svg?style=flat-square
[package-url]: https://npmjs.org/package/sajari-website

This library is [UMD](https://github.com/umdjs/umd) compatible, you can use it with any module loader.

If you don't use a module loader, it will export an `SJ` method into the `window` object. This is the default install code shown in your Sajari control panel.

#### Install

To install:

##### NPM
```
npm install sajari-website --save
```

This module is designed for browser integration. It is a wrapper for the base [Sajari API module](https://www.npmjs.com/package/sajari) that automatically integrates several key functions:

### Automatic indexing

- Each page view pings back to Sajari to automatically index new & changed page data
- Feed recommendations widgets with popularity, recency data
- See more information on [Indexing options](https://www.sajari.com/site-crawling)

### Rendering HTML search widgets

- Simple HTML markup can be used to create powerful search or recommendation integrations
- Default CSS can be used or modified
- Rendering options can be controlled easily

Example:

Simple search integration using an overlay to display results:
```html
<input type="search" data-sj-search-query />
```

Example:

Search integration displaying 5 results within the page (note: results can be placed anywhere):
```html
<input type="search" data-sj-search-query data-sj-maxresults="5" />
<div data-sj-search-results ></div>
```

Advanced example:
Search integration favouring recent and local results, filtering to show only the "bike" category, 
displaying within the page (note: results can be placed anywhere):
```html
<input type="search" data-sj-search-query data-sj-search-recent data-sj-local data-sj-filter="category,bike" />
<div data-sj-search-results ></div>
```

### Rendering HTML recommendations widgets

Example:

Related (to current page) recommendations integration:
```html
<div data-sj-related></div>
```

Example:

Popular (site wide) recommendations integration:
```html
<div data-sj-popular></div>
```

Example:

Related recommendations integration with 3 results, limited to pages where the URL contains "comedy", favour local results (works if pages have a lat-lng):
```html
<div data-sj-related data-sj-local data-sj-maxresults="3" data-sj-filters="~url,comedy"></div>
```

### JavaScript API functionality

- JavaScript API functionality is wrapped to provide some additional functionality, such as adding in user profile and usage information to recommendation requests
- See more information on [JavaScript functionality](https://www.sajari.com/javascript-plugin)