Search App Setup

After installing the search app our service will crawl the entered URL and allows you to consume our search endpoint or use our client. Below you can find the search app setup for the search client.

1. Setup

Put following HTML code where you want to insert the search form and replace YOUR_ID with your Searchblok Space ID.

<searchblok :settings="{tenant: 'YOUR_ID', highlight: 'em'}"></searchblok>
<script type="text/javascript" src="https://search.storyblok.com/v1/static/js/app.js"></script>
<!-- Optionally include the default CSS styles -->
<link href="https://search.storyblok.com/v1/static/css/app.css" rel="stylesheet" type="text/css">

2. Customizing (optionally)

Customize the template inserting following script tag below. If you want to customize the CSS you can just copy the content of https://search.storyblok.com/v1/static/css/app.css and include the CSS in your own file.

<script type="text/template" id="searchblok-app">
  <div class="searchblok">
    <input v-model="term" class="searchblok__input">
    <div class="searchblok__results">
      <div class="searchblok__loading" v-if="loading">Loading...</div>
      <div class="searchblok__result" v-for="entry in results">
        <a :href="entry.url" class="searchblok__result-title" v-html="entry.title"></a>
        <a :href="entry.url" class="searchblok__result-url" v-text="entry.url"></a>
        <div class="searchblok__result-excerpt" v-html="entry.excerpt"></div>
      </div>
    </div>
    <div class="searchblok__load-more" v-if="total > shownResults">
      <a href="#" v-on:click.prevent="nextPage">Load More</a>
    </div>
  </div>
</script>

Options

In the settings object of the “searchblok” element you can define following options: