Enter a search query and a booklet will be generated based on the articles within the configured sources
The following code snippet will install a search box onto your website for the current configuration
<label for="query-157cb582-55aa-4219-bcb8-e43d1e1ac7e7">Please enter a query:</label><br>
<input type="text" id="query-157cb582-55aa-4219-bcb8-e43d1e1ac7e7" placeholder="enter your query here">
<input type="submit" value="Submit">
<link rel="stylesheet" href="https://app.kaimai.co.uk/public/search.css">
So long as the search form has the id
search-157cb582-55aa-4219-bcb8-e43d1e1ac7e7 and the input within has the id
query-157cb582-55aa-4219-bcb8-e43d1e1ac7e7 the form can be formatted or displayed however you want.
searching-157cb582-55aa-4219-bcb8-e43d1e1ac7e7 element is optional. It will be automatically hidden on page load and shown when the form is submitted.
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.
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.
This display mode allows you to place an iframe anywhere in the page and the booklet will be placed within.
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:
157cb582-55aa-4219-bcb8-e43d1e1ac7e7 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
show This means the booklet is ready to be shown and the iframe should be placed on the page
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.