iLost zaleca zintegrowanie widżetu lub ramki iFrame, która umożliwia klientom wyszukiwanie zagubionych i znalezionych przedmiotów bezpośrednio ze strony internetowej organizacji.
Dostępnych jest kilka opcji widżetów: Button, Search Widget i Search iFrame. Opcje te można łatwo zintegrować za pomocą dostarczonego kodu HTML. Opcje te są dostępne na koncie iLost w ustawieniach biznesowych.
Przykładowy przycisk:
Przykładowy widget wyszukiwania:
Przykład Search iFrame:
Czy można zmienić wysokość widżetu iLost?
W przypadku widżetu "Search iframe" można zmienić wysokość, aby więcej wyników było widocznych. Ustaw następujący atrybut danych na elemencie "ilost-widget", jednostka jest w pikselach:
<div class="ilost-widget" data-type="searchframe" data-height=500>...
Domyślną wartością jest 400 (400px).
Przykład podano poniżej:
<html> <head> <title>Your Website Title</title> </head> <body> <!-- Kod widgetu -->
<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="Znalezione przedmioty w IKEA na iLost" target="_blank">
<img src="https://ilost.co/static/widget/ilost-button-new.png" alt="Znalezione przedmioty w IKEA na iLost">
</a>
<input name="q" placeholder="Co zgubiłeś?" type="text">
<button class="ilost-widget__search_button" type="submit" value="search"></button>
</form>
</div>
<!-- Załaduj iLost SDK dla 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>
Czy jest możliwość zmiany stylizacji widgetu iLost?
Możliwe jest wyłączenie domyślnej stylizacji widgetu iLost poprzez podanie dodatkowego parametru zapytania 'nostyling=true'. Wpływa to tylko na html, który jest wstrzykiwany na stronie gościa, a nie na wewnętrzny html wewnątrz wstrzykniętej ramki iframe (gdzie drukowane są wyniki znalezionych elementów).
Ze względu na międzynarodowe protokoły bezpieczeństwa nie jest możliwe uzyskanie dostępu do wstrzykniętego iframe. Stylizacja listy znalezionych elementów jest więc niezmienna i dostępna tylko w jednym stylu.
Przykładowy kod:
<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('organizacja', 'ilost');</script>