SeedProd ドキュメント

SeedProd のドキュメント、リファレンスマテリアル、チュートリアル

ビジネスレビューブロック

ビジネスレビューブロックを使用すると、GoogleとYelpのレビューをSeedProdページに直接表示できます。このブロックは、カスタマイズ可能なレイアウト、フィルター、スタイリングオプションを使用して、本物の顧客からのフィードバックを提示し、潜在顧客との信頼と信用を築くのに役立ちます。

実際の顧客レビューを表示することは、ソーシャルプルーフを構築し、購入の意思決定に影響を与える最も効果的な方法の1つです。このブロックを使用すると、評価でレビューをフィルタリングしたり、星評価を表示したり、写真付きのレビュアーの詳細を表示したり、訪問者をGoogleまたはYelpの完全なレビュープロファイルにリダイレクトするリンクを含めることさえできます。

要件: ビジネスレビューブロックは、すべてのライセンスプランで利用可能です。

カルーセルレイアウトで顧客レビューを表示するビジネスレビューブロック

ページにビジネスレビューブロックを追加する

SeedProdページにビジネスレビューブロックを追加するには、次の手順に従ってください。

ステップ1:APIキーを追加する

ビジネスレビューブロックを追加する前に、SeedProdの設定でGoogleおよび/またはYelpのAPI認証情報を構成する必要があります。SeedProd > 設定に移動し、APIキーを追加してください。

  • GoogleのPlace IDを見つけるにはここをクリックしてください
  • Yelpレビューを表示する場合は、YelpのビジネスIDも必要になります
SeedProd設定でのGoogleおよびYelp APIキーの追加

ビジネスレビューブロックを使用する前に、SeedProdの設定にGoogle Places APIキーとYelp API認証情報を追加してください。

ステップ2:ブロックを追加する

デザイン > ブロックの下で、ビジネスレビューブロックをページの目的のセクションにドラッグアンドドロップします。

Business Reviewsブロックをページにドラッグ

ビジネスレビューブロックは、デザイン > 詳細設定の下にあり、ページの任意のセクションにドラッグできます。

ステップ3:コンテンツ設定を構成する

追加したら、ビジネスレビューブロックをクリックして設定を開きます。コンテンツタブで、レビューソースと表示オプションを構成できます。

一般:

  • レビューソース:表示するレビューを選択します – Google Places、Yelp、またはGoogleとYelpの組み合わせ
  • Google Places APIキー:Google Places APIキーを入力します(まだSeedProdの設定に追加されていない場合)
  • Google Place ID:Googleビジネスプロフィールからレビューを取得するために、一意のGoogle Place IDを入力します。提供されたリンクをクリックしてIDを見つけてください
  • 言語コード:レビューを表示する言語を指定します(例:「en」は英語、「es」はスペイン語)
Business Reviews一般設定

レビューソースを選択し、Google Place IDと言語の好みを入力します。

設定:

  • レイアウトの選択:グリッド(行と列で表示されるレビュー)またはカルーセル(スライドするカルーセルで表示されるレビュー)から選択します
  • レビュー数:表示するレビューの総数を設定します。Googleは最大5件のレビューを許可し、GoogleとYelpの合計は8件を超えることはできません。
  • 列:レビューを表示する列数を選択します(1〜5列)。列が多いほど、1行あたりのレビュー数は増えますが、各レビューのスペースは少なくなります
Business Reviewsレイアウト設定

レイアウトスタイル、表示するレビュー数、列構成を選択します。

フィルター:

  • フィルター条件: 表示されるレビューをどのようにフィルターするかを選択します。オプションには、フィルターなし(すべて表示)、評価(星評価でフィルター)、またはレビュー日(最新のレビューを表示)があります。
  • 最小評価: 表示されるレビューが持つべき最低評価を設定します。オプションには、2つ星、3つ星、4つ星、5つ星、または最小評価なしがあります。これにより、最高のレビューのみを表示できます。
Business Reviewsフィルター設定

評価または日でレビューをフィルターし、最小評価要件を設定します。

レビュアー情報:

  • レビュアー画像: レビュアーのプロフィール写真を非表示にするか表示するかを切り替えます。
  • 画像サイズ: レビュアーのプロフィール画像のサイズを調整します。
  • レビュアー名: レビューを残した人の名前を表示するか非表示にするかを切り替えます。
  • リンク名: レビュアーの名前をクリック可能にし、GoogleまたはYelpプロフィールにリンクするかどうかを切り替えます。
  • レビュアー名の色: レビュアー名の色を設定します。
Business Reviewsレビュアー情報設定

レビュアーのプロフィール画像、名前、リンクオプションを設定します。

レビュー日:

  • レビュー日: 各レビューが投稿された日時を表示するか非表示にするかを切り替えます。
  • タイプを選択: 数値(「2024年1月15日」のような特定の日付として表示)または相対(「2週間前」のような経過時間として表示)のいずれかを選択します。
  • レビュー日の色: レビュー日のテキストの色を設定します。
Business Reviews日付設定

レビュー日の表示形式とスタイルを制御します。

評価:

  • 星評価: 各レビューの星評価アイコンを表示するか非表示にするかを切り替えます。
  • アイコンサイズ: 星評価アイコンのサイズを調整します。
  • アイコンの色: 塗りつぶされた(評価された)星の色を設定します。
  • マスクされていないアイコンの色: 空の(評価されていない)星の色を設定します。
Business Reviewsレーティング設定

星評価の表示、サイズ、色をカスタマイズします。

レビュー本文:

  • レビュー本文: 顧客が書いた実際のレビューの内容を表示するか非表示にするかを切り替えます。
  • テキストの色: レビューテキストの内容の色を設定します。
  • テキストの長さ: 各レビューから表示する最大文字数を設定します。長いレビューは切り捨てられます。
  • 続きを読むテキスト: 切り捨てられたレビューに表示される「続きを読む」リンクのカスタムテキストを入力します(例:「全文を読む」、「もっと表示」)。
  • 続きを読むの色: 「続きを読む」リンクの色を設定します。
Business Reviewsテキスト設定

レビューテキストの表示、長さの制限、「続きを読む」機能を設定します。

ステップ4:デザインのカスタマイズ

詳細設定タブでは、ビジネスレビューブロックの視覚的な外観をカスタマイズできます。

スタイル:

  • レビュアー名タイポグラフィ:フォントファミリー、サイズ、太さ、スタイルを含む、レビュアー名のフォントプロパティを制御します。
  • レビュアー名の色:レビュアー名の色を設定します(コンテンツタブでも利用可能)。
  • レビュー日時タイポグラフィ:レビュー日時のフォントプロパティをカスタマイズします。
  • 日付の色:レビュー日時テキストの色を設定します。
  • コンテンツタイポグラフィ:レビューテキストコンテンツのフォントプロパティを制御します。
  • コンテンツの色:レビューテキストの色を設定します。

間隔:

  • マージン:ビジネスレビューブロックの外側の余白(上、右、下、左)を制御します。これにより、レビューと周囲の要素との間にどれだけのスペースが表示されるかが決まります。
  • パディング:ビジネスレビューブロックの内側の余白(上、右、下、左)を調整します。これにより、レビューとブロックの端の間に適切なスペースが生まれます。

属性:

  • CSS ID:ビジネスレビューブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングまたはJavaScriptのターゲット設定のためにSeedProdによって自動的に作成されます。
  • カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するために、カスタムCSSクラスを追加します。
  • カスタム属性:ブロックのラッパー要素に任意のHTML属性を追加します。各属性を次の形式で新しい行に入力します:属性名|値(例:data-reviews|business)。

デバイス表示:

  • デスクトップで非表示:デスクトップ画面でビジネスレビューブロックを非表示にします。
  • タブレットで非表示:タブレットデバイスでビジネスレビューブロックを非表示にします。
  • モバイルで非表示:モバイルデバイスでビジネスレビューブロックを非表示にします。

アニメーション効果:

  • 表示アニメーション:レビューが表示領域に入ったときに再生されるさまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、ローテートインなどがあります。これにより、ソーシャルプルーフに注目が集まります。
Business Reviews高度な設定

詳細設定タブでは、レビュー表示のためのタイポグラフィコントロール、スペーシングオプション、アニメーション効果を提供します。

ステップ5:変更を保存

ビジネスレビューブロックの設定と外観のカスタマイズが完了したら、必ず作業を保存してください。


これで、ページにビジネスレビューブロックを正常に追加しました!この強力なソーシャルプルーフツールは、GoogleやYelpからの実際の顧客フィードバックを表示することで、信頼と信憑性を構築するのに役立ちます。さまざまなレイアウト、フィルター、スタイリングオプションを試して、最高の顧客体験を強調し、潜在顧客があなたのビジネスを選ぶことを奨励するレビュー表示を作成してください。

関連記事