Show recommendations on a search result page

Recommendations from rek.ai can be shown on a search result page by using the gettermfromqueryparameter parameter to get the search term from the URL.

This helps to take advantage of rek.ai recommendations together with the built-in search.

Many times a "normal" search result results in zero or irrelevant results. By adding recommendations from rek.ai based on the search term, users can be guided to relevant pages even when the search itself fails.

Example of showing recommendations on a search result page

In Sitevision

All you have to do is to add the data-gettermfromqueryparameter="query" in the [Advanvced settings] (https://docs.rek.ai/integration-modules/sitevision/sitevision-manual#advanced-settings (opens in a new tab))

Parameters

`data-gettermfromqueryparameter`

Reads the search term from a URL query parameter (e.g. ?query=shoes) and uses it to fetch recommendations. See the code example below.

`data-initializeurlchangepredictionrefresh`

Enables automatic detection of URL changes and re-fetches recommendations whenever the URL updates. This is primarily intended for JavaScript-based search pages (single-page applications) where navigating or filtering updates the URL without a full page reload.

When set to "true", rek.ai will monitor the browser's URL and — as soon as the query parameter changes — automatically update the search tips widget with fresh recommendations matching the new search term. No manual re-initialization is needed.

Usage:

<div class="rek-prediction"
    data-gettermfromqueryparameter="query"
    data-initializeurlchangepredictionrefresh="true"
    ...>
</div>

This is especially useful when:

The search field filters results via JavaScript without reloading the page
URL parameters are updated by a framework (React, Vue, Angular, etc.) using the History API
You want the recommendation widget to stay in sync with the active search term at all times

Code example

<style>
    .search-tips h2 {
        font-size: 20px;
        margin: 0.5em 0;
    }
 
    .rekai-news-header-wrapper {
        margin: 0.5em 0;
    }
 
    .search-tips h2::before {
        content: "";
        display: inline-block;
        width: 17px;
        height: 19px;
        vertical-align: middle;
        margin-right: 0.4em;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23006b4e"><path fill-rule="evenodd" d="M9 4.5a.75.75 0 01.721.544l.813 2.846a3.75 3.75 0 002.576 2.576l2.846.813a.75.75 0 010 1.442l-2.846.813a3.75 3.75 0 00-2.576 2.576l-.813 2.846a.75.75 0 01-1.442 0l-.813-2.846a3.75 3.75 0 00-2.576-2.576l-2.846-.813a.75.75 0 010-1.442l2.846-.813A3.75 3.75 0 007.466 7.89l.813-2.846A.75.75 0 019 4.5zM18 1.5a.75.75 0 01.728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 010 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 01-1.456 0l-.258-1.036a2.625 2.625 0 00-1.91-1.91l-1.036-.258a.75.75 0 010-1.456l1.036-.258a2.625 2.625 0 001.91-1.91l.258-1.036A.75.75 0 0118 1.5zM16.5 15a.75.75 0 01.712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 010 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 01-1.422 0l-.395-1.183a1.5 1.5 0 00-.948-.948l-1.183-.395a.75.75 0 010-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0116.5 15z" clip-rule="evenodd"/></svg>');
        background-size: contain;
        background-repeat: no-repeat;
    }
 
    .search-tips .rek-prediction {
        border: 1px solid #333;
        border-radius: 15px;
        padding: 5px 10px 10px 10px;
        margin-bottom: 1em;
    }
 
    .search-tips ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
 
    .search-tips li {
        list-style: none; /* remove default bullet */
        padding-left: 1.5em; /* space for icon */
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23006b4e" viewBox="0 0 24 24"><path d="M8 5l8 7-8 7z"/></svg>') no-repeat left center;
        background-size: 1em;
        background-position-y: 6px;
    }
 
    .search-tips a {
        margin-left: 11px;
    }
</style>
 
<div class="search-tips">
    <div class="rek-prediction"
    id="searchtips"
    data-selector="#searchtips"
    data-gettermfromqueryparameter="query"
    data-headertext="Sökte du efter:"
    data-headerheadinglevel="2"
    data-renderstyle="list"
    data-listcols="2"
    data-addstripes="true"
    data-nrofhits="6"
    data-stripecolor="#f6f5f4"
    data-titlemaxlength="40"
    >
    </div>
</div>

Style recommendations Sitevision specific