ウェブサイトに Housing Market ウィジェットを追加する方法
チュートリアル 152 / 181
このチュートリアルの動画は現在更新中です。下の手順の説明で同じ内容をご確認いただけます。 英語版を見る
ウィジェットのデザインが決まれば、ウェブサイトへの設置は短いコードを一度貼り付けるだけです。このチュートリアルでは、公開中のウィジェットの Publish（公開）タブを開いてコードをコピーし、Wix、Squarespace、Webflow、Shopify、WordPress、通常の HTML ページでの貼り付け場所を紹介したうえで、デモ用ウェブサイトの Properties（物件）ページに貼り付けます。ページにはすぐにご自身の物件が表示され、訪問者が使う絞り込み機能と物件ウィンドウもそのまま利用できます。
このチュートリアルで学べること
- ウィジェットのコードがある場所
- コードをコピーする方法と、主要なウェブサイト作成ツールでの貼り付け場所
- ウェブサイト作成ツールがスクリプトをブロックする場合の対処（iframe 用コード）
- コードをページに置いたあと、訪問者に表示される内容
手順を見ながら進める
- これが Housing Market CRM のダッシュボードです。
- 左メニューの Properties（物件）を開きます。
- Website widgets（ウェブサイトウィジェット）をクリックします。
- Homepage listings（ホームページ物件）を開きます。
- Publish（公開）タブを開きます。
- ウェブサイトに必要なのはこの短いコードだけです。script とウィジェットの表示場所の二行です。
- Copy code（コードをコピー）をクリックします。
- クリップボードにコピーされます。
- ウェブサイト作成ツールごとに、カスタムコード用の場所があります。
- Wix：Add Elements（要素を追加）→ Embed Code（コードを埋め込む）→ Embed HTML（HTML を埋め込む）。
- Squarespace：Code（コード）ブロックを追加します。
- Webflow：Embed（埋め込み）要素を追加します。
- 通常の HTML ページでは body の中に貼り付けます。
- スクリプトが削除されるツールでは、代わりに iframe 用コードを使います。同じウィジェットが表示されます。
- こちらはウェブサイトの Properties（物件）ページです。ウィジェットを置くページを開きます。
- ウィジェットを表示したい位置をページ内でクリックし…
- …コードを貼り付けます。
- ページを保存します。
- 写真と価格付きで、ご自身の物件がページに表示されます。
- 訪問者は売買・賃貸、価格、種別、寝室数、エリアで絞り込めます。
- 物件をクリックすると、サイトを離れずにウィンドウで詳細が開きます。
- 訪問者には写真、説明、問い合わせフォームが表示されます。
- CRM でデザインを変更すれば、このページにも反映されます。コードの貼り直しは不要です。