개발자 도구
eSIM 요금제 찾기 도구
맞춤 옵션으로 웹사이트에서 eSIM 요금제를 표시할 수 있는 임베드 위젯입니다.
빠른 시작
위젯을 표시할 위치에 다음 한 줄 코드를 추가하세요:
기본 설치
이 코드를 HTML에 복사해 붙여넣으세요
<script
async
src="https://esimcardlist.com/external/widget.js?locale=en"
></script>매개변수
URL 매개변수로 위젯 동작을 맞춤 설정하세요:
locale
위젯 언어를 설정합니다
기본값: en
en · 영어de · 독일어es · 스페인어fr · 프랑스어it · 이탈리아어ja · 일본어pt · 포르투갈어ru · 러시아어tr · 터키어
country
ISO 코드로 국가를 미리 선택합니다
기본값: 없음
US · 미국AE · 아랍에미리트DE · 독일JP · 일본
color
버튼 색상을 맞춤 설정 (hex, URL 인코딩)
기본값: #2563eb
라이브 데모
다양한 구성으로 위젯 동작을 확인해 보세요:
기본 위젯 (영어)기본 영어 위젯
커스텀 색상 위젯녹색 버튼 색상 (#059669)
국가 사전 선택 위젯독일 (DE) 사전 선택
예시
자주 쓰이는 사용 패턴입니다:
기본 사용
기본 설정의 간단한 영어 위젯
<script
async
src="https://esimcardlist.com/external/widget.js?locale=en"
></script>독일어 + 커스텀 색상
독일어와 녹색 버튼
<script
async
src="https://esimcardlist.com/external/widget.js?locale=de&color=%23059669"
></script>사전 선택 국가 (일본)
일본이 사전 선택된 영어 위젯
<script
async
src="https://esimcardlist.com/external/widget.js?locale=en&country=JP"
></script>모든 옵션 조합
프랑스어, 프랑스 사전 선택, 빨간 버튼
<script
async
src="https://esimcardlist.com/external/widget.js?locale=fr&country=FR&color=%23dc2626"
></script>기능
비동기 로딩
페이지를 차단하지 않아 로딩 속도를 늦추지 않습니다
Shadow DOM 격리
위젯 스타일이 사이트 CSS와 충돌하지 않습니다
9개 언어
영어, 독일어, 스페인어, 프랑스어, 이탈리아어, 일본어, 포르투갈어, 러시아어, 터키어
키보드 접근성
완전한 키보드 탐색 지원 (화살표 키, Enter, Escape)
반응형
모바일과 데스크톱에서 모두 작동
맞춤 설정 가능
브랜드에 맞게 버튼 색상을 조정할 수 있습니다
경량
페이지 로드 시간에 영향이 없습니다
안전한 실패 처리
오류 발생 시 위젯이 표시되지 않을 뿐입니다
브라우저 지원
Chrome81+
Firefox86+
Safari14.1+
Edge81+참고 이 위젯은 완전한 스타일 격리를 위해 Shadow DOM을 사용합니다. 웹사이트의 CSS는 위젯에 영향을 주지 않으며, 위젯의 CSS도 페이지로 새어나가지 않습니다.