iLost recomienda integrar un widget o iFrame que permita a sus clientes buscar objetos perdidos directamente desde el sitio web de su organización.
Hay varias opciones de widgets disponibles: Botón, Widget de búsqueda y iFrame de búsqueda. Estas opciones pueden integrarse fácilmente utilizando el código HTML proporcionado. Estas opciones están disponibles en su cuenta iLost en la configuración de empresa.
Botón de ejemplo:
Ejemplo de widget de búsqueda:
Ejemplo de iFrame de búsqueda:
¿Es posible cambiar la altura del widget iLost?
Para el widget 'Search iframe' es posible cambiar la altura para que sean visibles más resultados. Establezca el siguiente atributo de datos en el elemento "ilost-widget", la unidad está en píxeles:
<div class="ilost-widget" data-type="searchframe" data-height=500>...
El valor por defecto es 400 (400px).
A continuación se ofrece un ejemplo:
<html> <head> <title>Título de su sitio web</title> </head> <body> <!-- El código del widget -->
<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="Artículos encontrados en IKEA en iLost" target="_blank">
<img src="https://ilost.co/static/widget/ilost-button-new.png" alt="Artículos encontrados en IKEA en iLost">
</a>
<input name="q" placeholder="¿Qué has perdido?¡"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>
¿Es posible cambiar el estilo del widget iLost?
Es posible desactivar el estilo por defecto del widget iLost proporcionando un parámetro de consulta extra 'nostyling=true'. Esto afecta sólo al html que se inyecta en la página web del invitado, y no al html interior dentro del iframe inyectado (donde se imprimen los resultados del elemento encontrado).
Debido a los protocolos de seguridad internacionales es imposible acceder al iframe inyectado. Por lo tanto, el estilo de la lista de elementos encontrados no es modificable y sólo está disponible en un estilo.
Ejemplo de código:
<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>