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

注意: 颜色必须在 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 也不会泄漏到您的页面中。