EyeSpy360 API & SDK

EyeSpy360™ バーチャル ツアーとは?

プロパティ、ボート、ホテルなどの完全に没入型の 360 度ウォークスルー。ユーザーは、すばやく簡単な EyeSpy360 ™バーチャル ツアー エディターを使用して自分で作成および公開できます。 https://www.eyespy360.comのデモ ビデオをご覧ください。それは本当にとても簡単です。

EyeSpy360™ HTML ウィジェットとは?

EyeSpy360 ™ Widget は、バーチャル ツアーの作成と公開を独自の物件リスト エディターに追加できる API / SDK です。 1 行のコードを追加するのと同じくらい簡単です。

 <script src="https://e3.eyespy360.com/widget/virtual-tours.1.0.2.js?key=1234&secret=ABCDEF&externalTourID=myPropertyID&target=virtualTourURL"></script> 

これは誰のためですか？

あなたはすでに、ユーザーが物件リストを作成、編集、公開する物件リスト管理システムを運用しています。これらのリストには説明と画像が含まれており、ユーザーが 360 バーチャル ツアーを作成できるようにしたいと考えています。

それはどのように機能しますか？

おそらく、物件リスト データ レコードと編集フォーム用のバーチャル ツアー URL フォーム フィールドがすでにあるはずです。そうでない場合は、最初に作成します。 EyeSpy360 ™ Widget の 1 行の埋め込みコードを追加し、ターゲットパラメーターをバーチャル ツアー URL の HTML 入力フィールドの ID に設定します (例: <input id="virtualTourURL" )。ウィジェットは、入力フィールドの後に Virtual Tour Editor ボタンを自動的に配置します。

ユーザーがツアー エディター ボタンをクリックすると、EyeSpy360 ™ツアー エディターが同じ Web ページ内に 95% x 95% のポップアップとして表示されます。ユーザーは 360 度画像をアップロードし、入口と出口を介してそれらをリンクし、バーチャル ツアーをプレビューして [公開] をクリックします。公開された URL は、ターゲット ウィジェット パラメータで指定されたバーチャル ツアー URL フォーム フィールドに自動的に入力されます。ツアー エディターは、ユーザーが右上の [閉じる] ボタンをクリックするか、5% のポップアップ マージンにメインの Web サイトがまだ表示されているツアー エディターの外側をクリックすると閉じます。

次に、ユーザーが変更を保存するときに、ユーザーが変更したその他のフィールドと共にバーチャル ツアー URL の値をデータベースに保存します。

ウィジェット パラメータ

キー、シークレット- 必須。キーとシークレットのフィールドは、 https://e3.eyespy360.comの「設定 -> API 資格情報」セクションの下に表示されます。 EyeSpy360 ™アカウントを持っていませんか?無料で入手

externalTourID - 必須。お客様が提供する一意の識別子。最大長 36 文字。プロパティは、一意の識別子でデータ ストアに既に格納されています。ここでそれを使用します。

ターゲット- 必須。 EyeSpy360 ™バーチャル ツアー エディターがツアー URL を配置する HTML 入力フィールドの ID。

エージェント- オプション。プロパティ管理システムがマルチユーザーまたは複数の会社である場合は、このフィールドをユーザーまたは会社名に設定してください。これは、EyeSpy360 ™バックエンドでどのツアーがどのエージェントに属しているかを追跡するのに役立ちます。例: Jon Doe、Jane Doe、Doe Estates

ツアー- オプション。バーチャル ツアーの名前。ユーザーがツアー エディターで再度入力する必要がないように、これをプロパティ リストのタイトルに設定します。例: キャベンディッシュ ハウス

hl - オプション。インターフェイス言語。サポートされている値は、ar、bg、de、en、es、fr、nl、pt、ru、th、zh です。デフォルトは「en」

ウィジェットボタンのカスタマイズ

自分の Web サイトのルック アンド フィールに合わせて [ツアー エディター] ボタンの外観を変更したいと思うことはほぼ間違いありません。好きな CSS を eyespy360_btn 要素に適用することで、これを行うことができます。例：

 #eyespy360_btn {
  赤色;
  フォントの太さ: 太字;
  左マージン: 10px;
}

Android バーチャル ツアー SDK

EyeSpy360 ™ Tour Editor を Android アプリケーションに直接埋め込むこともできます。 https://github.com/eyespy360/Virtual-Tour-Android-SDKで SDK をご覧ください。

iOS バーチャル ツアー SDK

EyeSpy360 ™ツアー エディターを iOS アプリケーションに直接埋め込むこともできます。 SDK をご覧ください: https://github.com/eyespy360/Virtual-Tour-iOS-SDK

テスト内容

パノラマ画像とフロアプラン:

https://www.eyespy360.com/downloads/EyeSpy360_Test_Images.zip

公開した物件リストにツアーを埋め込むにはどうすればよいですか?

iframe への埋め込み:

 <iframe width="640" height="390" src="virtualTourURL" allowfullscreen></iframe>

VirtualTourURL は、データ ストアからの値です。幅と高さをデザインに合わせて調整します。