iLost recommande d'intégrer un widget ou un iFrame, ce qui permet à vos clients de rechercher des objets perdus et trouvés directement depuis le site Web de votre organisation.
Plusieurs options de widget sont disponibles : Bouton, Widget de recherche et iFrame de recherche. Ces options peuvent être facilement intégrées à l'aide du code HTML fourni. Ces options sont disponibles dans votre compte iLost, sous les paramètres de l'entreprise.
Exemple de bouton :
Exemple de widget de recherche :
Exemple de iFrame de recherche :
Est-il possible de modifier la hauteur du widget iLost ?
Pour le widget 'Search iframe', il est possible de changer la hauteur afin que plus de résultats soient visible. Définissez l'attribut de données suivant sur l'élément "ilost-widget", l'unité est en pixels:
<div class="ilost-widget" data-type="searchframe" data-height=500>...
La valeur par défaut est de 400 (400px).
Un exemple est donné ci-dessous :
<html> <head> <title>Votre titre de site Web</title> </head> <body> <!-- Le code du 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="Objets trouvés chez IKEA sur iLost" target="_blank">
<img src="https://ilost.co/static/widget/ilost-button-new.png" alt="Objets trouvés chez IKEA sur iLost">
</a>
<input name="q" placeholder="Qu'avez-vous perdu ?" type="text">
<button class="ilost-widget__search_button" type="submit" value="recherche"></button>
</form>
</div>
<!-- Charger le SDK iLost pour 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>
Est-il possible de modifier le style du widget iLost ?
Il est possible de désactiver le style par défaut du widget iLost en fournissant un paramètre de requête supplémentaire 'nostyling=true'. Cela n'affecte que le code html injecté sur la page web invitée, et non le code html interne de l'iframe injecté (où les résultats des éléments trouvés sont imprimés).
En raison des protocoles de sécurité internationaux, il est impossible d'accéder à l'iframe injecté. Le style de la liste des éléments trouvés n'est donc pas modifiable et n'est disponible que dans un seul style.
Exemple de 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=fr&nostyling=true','ilostsdk') ;
ilostsdk('organisation', 'ilost') ;</script>