Az iLost egy widget vagy iFrame integrálását ajánlja, amely lehetővé teszi az ügyfelek számára, hogy közvetlenül a szervezet weboldaláról keressenek elveszett és talált tárgyakat.
Számos widget lehetőség áll rendelkezésre: Keresés, Keresés Widget és Keresés iFrame. Ezek az opciók könnyen integrálhatók a mellékelt HTML-kód segítségével. Ezek a beállítások az iLost-fiókjában az üzleti beállítások között érhetők el.
Példa gomb:
Példa keresési widget:
Példa Keresés iFrame:
Lehetséges az iLost widget magasságának megváltoztatása?
A 'Keresés iframe' widget esetében lehetőség van a magasság megváltoztatására, így több találat lesz látható. Állítsa be a következő adatattribútumot az "ilost-widget" elemen, az egység pixelben van megadva:
<div class="ilost-widget" data-type="searchframe" data-height=500>...
Az alapértelmezett érték 400 (400px).
Az alábbiakban egy példát mutatunk be:
<html> <head> <title>A weboldal címe</title> </head> <body> <!-- A widget kódja -->
<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="Talált tárgyak az IKEA-nál az iLost-on" target="_blank">
<img src="https://ilost.co/static/widget/ilost-button-new.png" alt="Talált tárgyak az IKEA-nál az iLost-on">
</a>
<input name="q" placeholder="Mit vesztett el?" 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>
Lehetséges az iLost widget stílusának megváltoztatása?
Lehetőség van az iLost widget alapértelmezett stílusának kikapcsolására a 'nostyling=true' extra lekérdezési paraméter megadásával. Ez csak a vendég weboldalon bejuttatott html-t érinti, és nem a bejuttatott iframe-en belüli belső html-t (ahol a talált elem eredményei kiíródnak).
A nemzetközi biztonsági protokollok miatt lehetetlen hozzáférni az injektált iframe-hez. A talált elemek listájának stílusa ezért nem változtatható, és csak egy stílusban áll rendelkezésre.
Példakód:
<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>