読む時間

0

読む時間

0

インサイト

2025/10/23

FramerサイトにTrustpilotウィジェットを埋め込む

FramerでTrustpilotウィジェットをサイトに挿入する方法をステップごとに説明します。Trustpilotスクリプトを追加し、ウィジェットコードを修正した後、Embedコンポーネントに挿入して簡単に顧客レビューを表示できます。

FramerでTrustpilotウィジェットをサイトに埋め込む方法を案内するブログのサムネイル。Trustpilotのロゴを踏襲し、そのサイトで提供されているウィジェットコードをスクリプトに挿入するプロセスを説明します。
FramerでTrustpilotウィジェットをサイトに埋め込む方法を案内するブログのサムネイル。Trustpilotのロゴを踏襲し、そのサイトで提供されているウィジェットコードをスクリプトに挿入するプロセスを説明します。
FramerでTrustpilotウィジェットをサイトに埋め込む方法を案内するブログのサムネイル。Trustpilotのロゴを踏襲し、そのサイトで提供されているウィジェットコードをスクリプトに挿入するプロセスを説明します。

目次

目次

このドキュメントは、Framerを学ぶ日本のユーザーが日本語資料の不足によって直面する困難を解決するため、公式ブログの内容を翻訳し実務に役立つ情報を追加しました。Framerを使用する皆さんの助けになれば幸いです。

Trustpilotウィジェットを挿入する

Framerには基本的にTrustpilotコンポーネントが含まれています。しかし、直接Trustpilotのウィジェットをサイトに埋め込むこともできます。以下のステップを追って進めてください。

1. サイト設定にTrustpilotスクリプトを追加する

まず、Trustpilotから提供される最初のスクリプトをサイト設定のCustom Codeセクション、<head>タグの開始部分に追加してください。

<!-- TrustBox script -->
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
<!-- End TrustBox script -->

2. Trustpilotウィジェットのコードを検索および編集する

Trustpilotアカウントで二つ目のスクリプトをコピーして、TextEdit(Mac)またはNotepad(Windows)のようなテキストエディタに貼り付けてください。

次に、以下の三つの要素を確認し抽出します。

  • data-template-id(例: 5407e68dz0d06a09e041d5km)

  • data-businessunit-id(例: 5c09c4742068df0001rrfd35)

  • レビューページURL(例: https://www.trustpilot.com/review/yourdomain)

以下のコードのプレースホルダー(your-data-template-idyour-business-unit-idyour-URL)を上記でコピーしたユーザーデータに置き換えてください。

<!-- TrustBox widget - Horizontal -->
<div id="trustbox" class="trustpilot-widget" data-locale="en-US" data-template-id="your-data-template-id" data-businessunit-id="your-business-unit-id" data-style-height="28px" data-style-width="100%" data-theme="light">
  <a href="your-URL" target="_blank" rel="noopener">Trustpilot</a>
</div>
<script>var trustbox = document.getElementById('trustbox');
 window.Trustpilot.loadFromElement(trustbox);</script>
<!-- End TrustBox widget -->

3. キャンバスにEmbedコンポーネントを追加する

次に、Framerエディタの左側にあるInsertメニューを開いてください。検索ボックスに「embed」と入力し、Embedコンポーネントをキャンバスにドラッグして追加します。

4. Embedコンポーネントにコードを挿入する

右側のプロパティパネルのHTMLタブを選択し、前回完成させたすべてのTrustpilotコードをそのタブに貼り付けてください。

Trustpilotウィジェットのプレビューを確認する

Framerはブラウザ上でのみ<head><body>に挿入されたスクリプトを実行し、エディタ内では実行しません。したがって、挿入されたコンポーネントが正しく動作するか確認するには、サイトを公開(Publish)し、ブラウザで直接サイトを確認する必要があります。

もし上記のステップをすべて完了してもウィジェットが表示されない場合は、Trustpilotスクリプトが正しく接続されているかもう一度確認してください。問題が続く場合は、FramerのContactページを通じてサポートを受けることもできます。

この記事はFramer公式ブログの‘Embedding a Trustpilot widget in your site’を翻訳・改編したコンテンツです。

ブログを共有する

ブログを共有する

Framerの
エキスパートになろう

Framerの依頼を受けられるプロなら誰でも応募できます。
仲介手数料はなく、プロとクライアントを直接つなぎます。

Framerの
エキスパートになろう

Framerの依頼を受けられるプロなら誰でも応募できます。
仲介手数料はなく、プロとクライアントを直接つなぎます。

Framerの
エキスパートになろう

フレーマーの受託が可能な専門家なら
誰でも応募可能です。
仲介手数料なしで、専門家とクライアントを
直接つなぎます。