A iLost recomenda a integração de um widget ou iFrame, que permite aos seus clientes procurar itens perdidos e achados diretamente no site da sua organização.
Existem várias opções de widgets disponíveis: Botão, Widget de pesquisa e iFrame de pesquisa. Estas opções podem ser facilmente integradas utilizando o código HTML fornecido. Estas opções estão disponíveis na sua conta iLost nas definições da empresa.
Exemplo de botão:
Exemplo de widget de pesquisa:
Exemplo de iFrame de pesquisa:
É possível alterar a altura do widget iLost?
Para o widget "Search iframe", é possível alterar a altura para que sejam visíveis mais resultados. Definir o seguinte atributo de dados no elemento "ilost-widget", a unidade é em pixéis:
<div class="ilost-widget" data-type="searchframe" data-height=500>...
O valor predefinido é 400 (400px).
Segue-se um exemplo:
<html> <head> <title>Título do seu sítio Web</title> </head> <body> <!-- O código do 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="Itens encontrados na IKEA em iLost" target="_blank">
<img src="https://ilost.co/static/widget/ilost-button-new.png" alt="Itens encontrados na IKEA em iLost">
</a>
<input name="q" placeholder="O que perdeu?" type="text">
<button class="ilost-widget__search_button" type="submit" value="search"></button>
</form>
</div>
<!-- Carregar iLost SDK para 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>
É possível mudar o estilo do widget iLost?
É possível desativar o estilo padrão do widget iLost fornecendo um parâmetro de consulta (query parameter) extra 'nostyling=true'. Isto afeta apenas o html que é injetado na página do convidado, e não o html interno no qual o iframe foi injetado (onde os resultados do item encontrado são exibidos).
Devido aos protocolos internacionais de segurança é impossível ter acesso ao iframe injectado. Portanto, o estilo da lista de itens encontrados não é modificável e só está disponível em um estilo.
Exemplo do 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>