Tutorials
Recommendations on a search result page

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

Search result example

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 recommendationsSitevision specific