Enter a search query for: Journal of Biophilic Design

Enter a search query and a booklet will be generated based on the articles within the configured sources

Please enter a query:

Searching...

Code snippet

The following code snippet will install a search box onto your website for the current configuration

    <form id="search-0e963da7-e9c9-4664-8fce-46e90f819ecc">
      <label for="query-0e963da7-e9c9-4664-8fce-46e90f819ecc">Please enter a query:</label><br>
      <input type="text" id="query-0e963da7-e9c9-4664-8fce-46e90f819ecc" placeholder="enter your query here">
      <input type="submit" value="Submit">
    </form>
    <h3 id="searching-0e963da7-e9c9-4664-8fce-46e90f819ecc">Searching...</h3>

    <link rel="stylesheet" href="https://app.kaimai.co.uk/public/search.css">
    <script 
      type="text/javascript" 
      src="https://app.kaimai.co.uk/public/scripts/search.js" 
      data-uuid="0e963da7-e9c9-4664-8fce-46e90f819ecc" 
      data-host="https://app.kaimai.co.uk"
      data-display=""> 
    </script>
  

So long as the search form has the id search-0e963da7-e9c9-4664-8fce-46e90f819ecc and the input within has the id query-0e963da7-e9c9-4664-8fce-46e90f819ecc the form can be formatted or displayed however you want.

The searching-0e963da7-e9c9-4664-8fce-46e90f819ecc element is optional. It will be automatically hidden on page load and shown when the form is submitted.

Display Modes

• "over" (default)

  This display mode ads an overlay to your website that fades your site and displays your booklet over it.

  This display mode is simple to implement and is the reccomended mode in most cases.

• "fido-tab"

  This display mode opens your generated booklet in a new tab hosted on FIDO.

  This setting is simple to implement but is only recomended for implementation or debugging as it generates the booklet in another tab.

• "inline" (Advanced)

  This display mode allows you to place an iframe anywhere in the page and the booklet will be placed within.

  This display mode is more complex than "fido-tab" or "over" and is only reccomended if you know how how to write raw HTML, CSS and Javascript snippets.

  To specify the iframe to use, you must add the additional attribute data-frame-selector and its value should be a jquery selector string that points to the frame.

  It is reccomended that you handle the lifecycle of the search frame on the page. To do this, you can listen to various events from the postMessage API that will be fired from the booklet iframe

  These events will always have the following attributes:

  • Event.origin: https://app.kaimai.co.uk
  • Event.data.src: 'fido'
  • Event.data.uuid: 0e963da7-e9c9-4664-8fce-46e90f819ecc This is useful to check against if you have multiple booklets (with a script scripts listening for each one) on the same page.

  The following events can be listened for

  • Event.data.event: show This means the booklet is ready to be shown and the iframe should be placed on the page
  • Event.data.event: hide This means the user has pressed the close button on the booklet

  Events will also be fired if the user presses the 'Share' or 'Create PDF' buttons or if they click on an article source link or advert however these events are handled by the search script but they might be useful to listen for if you want to track them.