メインコンテンツにスキップ

4. iLostウィジェット/iFameの設定

6か月以上前に更新


iLostは、お客様がお客様の組織のウェブサイトから直接失ったアイテムと発見したアイテムを検索できるようにするために、ウィジェットまたはiFrameを統合することを推奨します。

使用可能なウィジェットオプションはいくつかあります：ボタン、検索ウィジェット、検索iFrame。 これらのオプションは、提供されたHTMLコードを使用して簡単に統合できます。 これらのオプションは、ビジネス設定の下のiLostアカウントで利用できます。

ボタンの例：

検索ウィジェットの例：

検索iFrameの例：

iLostウィジェットの高さを変更することは可能ですか？

'検索iframe'ウィジェットでは、高さを変更してより多くの結果が表示されるようにすることが可能です。 次のデータ属性を“ilost-widget”要素に設定します。単位はピクセルです：

<div class="ilost-widget" data-type="searchframe" data-height=500>...

デフォルト値は400 (400px)です。

以下に例を示します：

<html>  <head>    <title>あなたのウェブサイトのタイトル</title>  </head>  <body>    <!-- ウィジェットのコード -->
    <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="iLostのIKEAで見つかったアイテム" target="_blank">
          <img src="https://ilost.co/static/widget/ilost-button-new.png" alt="iLostのIKEAで見つかったアイテム">
        </a>
        <input name="q" placeholder="何を失くしましたか？" type="text">
        <button class="ilost-widget__search_button" type="submit" value="search"></button>
      </form>
    </div>
    
    <!-- JavaScriptのiLost SDKをロードする -->
    <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>

iLostウィジェットのデザインを変更することは可能ですか？

追加のクエリ・パラメータ「nostyling=true」を指定することで、iLostウィジェットのデフォルトデザインを無効にすることができます。 この変更はゲストページに記入されたhtmlのみに影響し、iframeが入れられた内部html（検索結果が表示されるところ）には影響しません。

国際セキュリティ・プロトコルのため、挿入されたiframeにアクセスすることは不可能です。 そのため、検索項目のリストのデザインは変更できず、1つのデザインでしか利用できません。

コードの例：

<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>
こちらの回答で解決しましたか？