iLost raadt aan om een widget of iFrame te integreren, waarmee je verliezers direct vanaf de website van je organisatie kunnen zoeken naar gevonden voorwerpen.
Er zijn verschillende widgetopties beschikbaar: Zoek knop, Zoek widget en Zoek iFrame. Deze opties kunnen eenvoudig worden geïntegreerd met behulp van de meegeleverde HTML-code. Deze opties zijn beschikbaar in je iLost account onder de bedrijsinstellingen.
Voorbeeldknop:
Voorbeeld zoek widget:
Voorbeeld Zoek iFrame:
Is het mogelijk om de hoogte van de iLost-widget te wijzigen?
Voor de 'Search iframe' widget is het mogelijk om de hoogte aan te passen zodat er meer resultaten zichtbaar zijn. Stel het volgende data attribuut in op het "ilost-widget" element, de eenheid is in pixels:
<div class="ilost-widget" data-type="searchframe" data-height=500>...
De standaardwaarde is 400 (400px).
Hieronder staat een voorbeeld:
<html head> <> <title>Uw website titel</title> </head> <body> <!-- De 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/nl/org/ikea?country=es" title="Gevonden artikelen bij IKEA op iLost" target="_blank">
<img src="https://ilost.co/static/widget/ilost-button-new.png" alt="Gevonden artikelen bij IKEA op iLost">
</a>
<input name="q" placeholder="Wat ben je kwijt?" type="text">
<button class="ilost-widget__search_button" type="submit" value="search"></button>
</form>
</div>
<!-- Laad iLost SDK voor 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 het mogelijk om de styling van de iLost-widget te wijzigen?
Het is mogelijk om de standaardstyling van de iLost widget uit te schakelen door een extra query parameter 'nostyling=true' op te geven. Dit heeft alleen invloed op de html die wordt geïnjecteerd op de gast webpagina, en niet op de html binnen het geïnjecteerde iframe (waar de gevonden voorwerp resultaten worden afgedrukt).
Door internationale beveiligingsprotocollen is het onmogelijk om toegang te krijgen tot het geïnjecteerde iframe. De vormgeving van de lijst met gevonden voorwerpen kan dus niet worden gewijzigd en is slechts in één stijl beschikbaar.
Voorbeeld 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>(functie(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=nl&nostyling=true','ilostsdk');
ilostsdk('organisatie', 'ilost');</script>