iLost recommends integrating a widget or iFrame, which allows your customers to search for lost and found items directly from your organization's website.
There are several widget options available: Button, Search Widget and Search iFrame. These options can be easily integrated using the provided HTML code. These options are available in your iLost account under the business settings.
Example Button:
Example Search Widget:
Example Search iFrame:
Is it possible to change the height of the iLost widget?
For the 'Search iframe' widget it is possible to change the height so more results will be visible. Set the following data attribute on the “ilost-widget” element, the unit is in pixels:
<div class="ilost-widget" data-type="searchframe" data-height=500>...
The default value is 400 (400px).
An example is given below:
<html> <head> <title>Your Website Title</title> </head> <body> <!-- The widget code -->
<div class="ilost-widget" data-type="searchframe" data-height=500>
<form accept-charset="utf-8" action="https://ilost.co/en/org/ilost?country=nl">
<a href="https://ilost.co/en/org/ikea?country=es" title="Found items at IKEA on iLost" target="_blank">
<img src="https://ilost.co/static/widget/ilost-button-new.png" alt="Found items at IKEA on iLost">
</a>
<input name="q" placeholder="What have you lost?" type="text">
<button class="ilost-widget__search_button" type="submit" value="search"></button>
</form>
</div>
<!-- Load iLost SDK for JavaScript -->
<script>(function(i,s,o,g,r,a,m){i['iLostObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments);},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m);})(window,document,'script','https://ilost.co/widget/sdk.js?version=v3.3&locale=en','ilostsdk');
ilostsdk('organization', 'ilost');</script>
</body></html>
Is it possible to change the styling of the iLost widget?
It is possible to disable the default styling of the iLost widget by providing an extra query parameter ‘nostyling=true’. This affects only the html that is injected on the guest webpage, and not the inner html within the injected iframe (where the found item results are printed).
Due to international security protocols it’s impossible to get access to the injected iframe. The styling of the list of found items is therefore not changeable and only available in one style.
Example code:
<div class="ilost-widget" data-type="searchframe">
<form accept-charset="utf-8" action="https://demo.ilost.co/en/org/ilost?country=nl">
<a href="https://demo.ilost.co/en/org/ilost?country=nl" title="Found items at IKEA on iLost" target="_blank"><img src="https://demo.ilost.co/static/widget/ilost-button-new.png" alt="Found items at IKEA on iLost"></a>
<input name="q" placeholder="What have you lost?" type="text"><button class="ilost-widget__search_button" type="submit" value="search"></button></form></div>
<script>(function(i,s,o,g,r,a,m){i['iLostObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments);},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m);})(window,document,'script','https://demo.ilost.co/widget/sdk.js?version=v3.4&locale=en&nostyling=true','ilostsdk');
ilostsdk('organization', 'ilost');</script>