eSIMプラン検索ツール

カスタマイズ可能な設定で、WebサイトにeSIMプランを表示できる埋め込みウィジェットです。

クイックスタート

ウィジェットを表示したい場所に、次の1行コードを追加してください：

基本インストール
このコードを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
ボタン色をカスタマイズ（16進数、URLエンコード）

デフォルト: #2563eb

注意: 色はURL内でエンコードする必要があります。例えば、 #2563eb は %232563ebになります。

ライブデモ

さまざまな設定でウィジェットの動作を確認できます：

基本ウィジェット（英語）
デフォルトの英語ウィジェット
カスタムカラーのウィジェット
緑色のボタン（#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）
  • レスポンシブ - モバイルとデスクトップの両方で動作
  • カスタマイズ可能 - ボタン色をブランドカラーに合わせられます
  • 軽量 - ページ読み込み時間に影響しません
  • フェイルセーフ - エラー時はウィジェットが表示されないだけです

対応ブラウザ

  • Chrome 81+
  • Firefox 86+
  • Safari 14.1+
  • Edge 81+

注意

このウィジェットは完全なスタイル分離のためにShadow DOMを使用しています。サイトのCSSはウィジェットに影響せず、ウィジェットのCSSもページ側に漏れません。

ホームに戻る国を見る