この記事では、ニュース タイルとレビュー タイルの両方の実装について説明します。

タイルの埋め込み

上記のいずれかの製品プラン要素を有効化すると、プラットフォームのロケーションレベルで「ウェブサイト」というタブが表示されます。タイルはロケーションごとに個別に表示され、中小企業向けであるため、この新しいタブはロケーションレベルのみに表示されます。

新しいタブでは、ユーザーはレビュー タイルとレビュー タイルの両方のスニペットをコピーできます。

(注:ユーザーは、レビュー タイルの設定で独自のプライバシー ポリシー URL を追加する必要があります。

レビュータイル

• ファーストパーティのレビューは、他のチャネルからのレビューと同様に、受信トレイに表示されます。
• レビュー タイルには、Google、Facebook、ファースト パーティからのレビューのみが含まれます。

シングルページアプリケーション（SPA）にタイルを実装する

導入

サーバーサイドでレンダリングされるページではタイルはそのまま動作しますが、起動時に一度だけレンダリングされ、別のページをクリックしてもブラウザウィンドウが再レンダリングされないページ（シングルページアプリケーション）では、タイルを動作させるために手動で設定を行う必要があります。これは、React、Vue.js、Angularなどの一般的なフレームワークを使用しているウェブサイトでよく見られるケースです。

従うべき手順

ステップ1

初期のタイルのスクリプトを HTML に追加します。

ステップ2

SPA 内のコンポーネントにコンテナ div を追加します。

タイルは SPA では自動的には開始されません。これは、スクリプトが "<ub-widget-review>" 要素を見つけられないためです。これは、JavaScript の実行時にのみレンダリングされます。

ステップ3

HTML内のタイルでルートに行くときは、

タイルが表示され、正常に動作するはずです。

ステップ4

スパ内の別のルートに行く場合は、

ストアロケータコンポーネントのアンマウント時に、すべてのコンポーネントが正しくアンマウントされ、ユーザーがビューに戻った際に正常に再起動できるようになります。

例

これは、上記の手順で説明したロジックのほとんどを実行するこの tiles-componentを含む React 実装のリポジトリの例です。

APIでレビュータイルを実装する

ウィジェットがすでに存在するかどうかを確認します（スニペットは null 以外である必要があります）

得る https://uberall.com/api/locations/$locationId/widgets?v=20191203

ウィジェットを作成する（例：レビュータイプ）

POSThttps://uberall.com/api/locations/$locationId/widgets?v=20191203&type=レビュー

ウィジェット設定を更新する

パッチhttps://uberall.com/api/locations/$locationId/widgets?v=20191203{"widgets":[{"id": $ウィジェットID ,"type":"REVIEW","config":{"language":"en","privacyPolicyUrl":"","reviewDirectories":["GOOGLE","FACEBOOK","WEBSITE_WIDGETS"]}}]}

APIでニュースタイルを実装する

ウィジェットがすでに存在するかどうかを確認します（スニペットは null 以外である必要があります）

得る https://uberall.com/api/locations/$locationId/widgets?v=20191203

ウィジェットを作成

投稿https://uberall.com/api/locations/$locationId/widgets?v=20191203&type=SOCIALPOST

レビューウィジェットの実装例

会社	URL	スクリーンショット
クラッシュチャンピオンのシンディ	https://crashchampions.com/locations/crash-champions-chicago-heights
サウンドキストン	https://www.soundkistn.org/