Framer 사이트에 Trustpilot 위젯 삽입하기

Framer에서 Trustpilot 위젯을 사이트에 삽입하는 방법을 단계별로 안내합니다. Trustpilot 스크립트를 추가하고, 위젯 코드를 수정한 후, Embed 컴포넌트에 삽입하여 손쉽게 고객 리뷰를 표시할 수 있습니다.

Posted by

Framer

Translated by

김예정

프레이머(Framer)에서 Trustpilot 위젯을 사이트에 임베드하는 방법을 안내하는 블로그 썸네일, Trustpilot의 로고를 따랐으며 해당 사이트에서 제공하는 위젯 코드를 스크립트에 삽입하는 과정을 설명합니다.

Table of Contents

본 문서는 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-id, your-business-unit-id, your-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)의 무한 스크롤이 SEO에 미치는 영향을 다룬 블로그 썸네일, SEO 최적화를 위한 CLS와 크롤링 문제 해결 방법을 설명하는 내용을 포함하고 있습니다.

인사이트

2025. 10. 24.

Framer의 무한 스크롤이 SEO에 미치는 영향

인사이트

2025. 10. 24.

Framer의 무한 스크롤이 SEO에 미치는 영향

프레이머(Framer)의 페이지별 최적화 업데이트를 다루는 블로그 썸네일, 효율적인 SEO 및 웹 접근성을 위한 최적화 과정을 설명합니다.

인사이트

2025. 10. 23.

Framer의 페이지별 최적화 업데이트

인사이트

2025. 10. 23.

Framer 사이트에 Trustpilot 위젯 삽입하기