# 店铺营销抽奖组件生成器

设计、预览并导出自托管转盘、刮刮卡或盲盒。支持本地演示与商家 API 结果，不托管发奖服务。

> 标准页面: https://elysiatools.com/zh/tools/store-promotion-giveaway-widget-generator

- **分类:** Design

- **关键词:** 店铺营销抽奖组件生成器, 幸运转盘, 刮刮卡, 惊喜盲盒

## 概述

## 活动设计台

设计、预览并导出自托管转盘、刮刮卡或盲盒。支持本地演示与商家 API 结果，不托管发奖服务。

- 组件: 幸运转盘 / 刮刮卡 / 惊喜盲盒
- 主题: 海岸极简 / 糖果活力 / 复古街机 / 暗金精品 / 节日庆典 / 柔和手绘

### 结果来源

本地抽奖只是可修改的展示，不是可信发奖。导出代码内的公开优惠可被访客查看；不提供库存、身份或重复领取保护。

鉴权、概率、库存、资格与幂等由商家后端负责。不要填入任何密钥。预览绝不调用该接口。

### 商家 API 接入说明

这里填写的是你自己实现的接口，不是 Elysia 提供的抽奖服务。先在商家后端实现 POST /api/draw，设置与页面一致的活动 ID 和奖项 ID，再填入接口地址。下载并部署到 HTTPS 后才能联调真实抽奖；编辑器内始终只做模拟。

#### 请求 · POST application/json

组件只发送 version、campaignId 和随机生成的 32 位十六进制 requestId，不发送客户 ID、概率或 API 密钥。后端必须独立识别参与者；requestId 不是登录凭证。

```json
{
  "version": 1,
  "campaignId": "summer-boutique",
  "requestId": "0123456789abcdef0123456789abcdef"
}
```

#### 成功响应 · 200 application/json

原样回传 requestId；prizeId 必须匹配奖品池中的 ID，未中奖也返回“谢谢参与”项的 ID。可选字段：receiptId（≤200 字符）、claim.code（≤300）、claim.url（HTTPS，≤2048）。不用的字段直接省略，不要传 null。不加 data/result 外层，整个响应不超过 16 KiB。接口失败不等于未中奖。

```json
{
  "requestId": "0123456789abcdef0123456789abcdef",
  "prizeId": "p1",
  "receiptId": "draw_2026_001",
  "claim": {
    "code": "SAMPLE-ONLY",
    "url": "https://shop.example/redeem"
  }
}
```

当前奖项 ID:

- `p1`: 九折礼遇
- `p2`: 免运费
- `p3`: 神秘礼物
- `p4`: 谢谢参与

推荐将组件页面和 /api/draw 部署在同源（协议、域名、端口一致），必要时用服务端反向代理。相对地址以组件页面为基准，不是外层店铺页面。fetch 使用 credentials: same-origin，仅发送同源 Cookie；当前不支持配置 Authorization 或自定义请求头。跨源接口需允许组件页面的 Origin，并处理 POST + Content-Type 的 OPTIONS 预检；不会携带跨源 Cookie。只有静态 HTML 无法实现需登录的抽奖，嵌入时还需注意第三方 Cookie 限制。

后端必须鉴权、校验 Origin/CSRF 与活动资格、限制参与次数和请求频率，按服务端概率抽奖，并在同一事务中扣库存与保存结果。按参与者 + campaignId + requestId 持久化幂等记录，重试返回同一结果；兑换、防重复领取、有效期也由服务端控制。不能把浏览器里的概率、ID 或优惠码当作获奖凭证，不要在编辑器或导出代码里放密钥。

拒绝请求时返回相应非 2xx 状态（如 401/403/409/429/503）。组件显示统一的“尚无确认结果”，不会展示服务端错误文本。15 秒超时，拒绝重定向、坏 JSON、不匹配的 requestId、未知奖项和危险兑换链接。手动重试只在当前页面复用未决 ID；刷新会产生新 ID，因此参与限次必须持久化。不会自动重试，也不会用本地奖品兜底。

接口或托管地址未填完时，外观仍可离线预览；补齐标记字段才能导出。奖品或样式配置错误时保留上次有效预览。

### 导出与嵌入

HTML / CSS / JavaScript / JSON. 请先将导出文件放到自己的 HTTPS 网站，再填入页面地址。本工具不发布或托管活动。

可选图片由访客浏览器从对应 HTTPS 站点加载。编辑器不保存图片或 API 密钥。

扇区等大仅为视觉设计；本地模式按标示概率抽取，API 模式由后端决定。

## 输入项

- **配置 JSON** (textarea)

## 适用场景

- 需要在独立站或品牌电商店铺中快速上线幸运转盘、刮刮卡或盲盒互动营销活动时。
- 商家已有后端发奖、库存与风控逻辑，需要现成且可自托管的前端抽奖视觉组件时。
- 仅需在活动页面进行静态折扣展示或轻量演示，无需接入复杂后端数据库的发券场景。

## 工作原理

- 在编辑器中选择组件交互形态（转盘、刮刮卡或惊喜盲盒），并配置配色主题、文案描述与奖项池列表。
- 指定结果来源模式：选择本地随机模拟并设定展示概率，或选择 API 模式并填入商家自建的抽奖服务端点。
- 在编辑器内实时预览交互动画与视觉样式，验证配置无误后导出自托管代码包并部署至 HTTPS 站点使用。

## 使用案例

- 节日大促期间在品牌独立站落地页嵌入自托管幸运转盘，向进店访客发放满减券与免邮福利。
- 结合电商会员成长体系，接入商家后端抽奖 API 实现积分兑换刮刮卡，由后端事务保证库存与防重复领取。
- 线下快闪活动或展会现场搭建自托管盲盒抽奖大屏，为现场顾客提供流畅的趣味互动体验。

## 常见问题

### 本地模式与商家 API 模式有何本质区别？

本地模式由浏览器按设定概率随机演示结果，无安全防刷与库存保护；API 模式则由商家后端 POST 接口严格控制发奖资格、概率与真实库存。

### 可以在组件配置中填入 API 密钥或敏感凭据吗？

绝对不要填入密钥。导出的前端代码是公开可见的，API 请求仅通过同源 Cookie 等方式进行身份识别，预览工具也不会保存任何凭证。

### 商家后端抽奖接口需要满足怎样的交互规范？

需实现 POST application/json 接口，接收 version、campaignId 和 requestId，并原样回传 requestId 与匹配的奖项 prizeId。

### 组件支持哪些视觉样式与主题定制？

提供幸运转盘、刮刮卡与盲盒三种组件，并预设海岸极简、糖果活力、复古街机、暗金精品、节日庆典和柔和手绘等多样化主题。

### 导出的组件如何嵌入到电商网站中？

将导出的 HTML、CSS、JS 及 JSON 文件上传至自有的 HTTPS 服务器，通过 iframe 引用或直接将页面片段集成到网店中。

## 相关工具

- [颜色 Token 级联生成器](https://elysiatools.com/zh/tools/color-token-cascade-generator): 输入一个主色 Hex，自动生成主色、辅助色、中性色和语义化设计 token，并输出 CSS 变量与 Style Dictionary JSON
- [图片调色板转设计令牌](https://elysiatools.com/zh/tools/image-to-design-tokens): 从图片中用 k-means 聚类提取主色，导出为 CSS 变量 / SCSS 变量 / Tailwind 配置 / JSON 设计令牌，并自动为每个颜色生成命名色阶
- [API 请求代码片段生成器](https://elysiatools.com/zh/tools/api-request-code-snippet-generator): 根据请求链接、方法、请求头、Query 参数和请求体生成 cURL 及常见开发语言的代码片段
- [CSV 转数据库迁移规划器](https://elysiatools.com/zh/tools/csv-to-database-migration-planner): 根据 CSV 数据推断关系型 schema，并为 PostgreSQL、MySQL、SQLite 或 SQL Server 生成建表和 ALTER 迁移计划
- [健身训练 PDF 生成器](https://elysiatools.com/zh/tools/fitness-workout-pdf-generator): 从 JSON 或 CSV 训练计划数据生成可打印 PDF，包含动作表格、进度格子和可选的视频二维码
- [GitHub 主页美化生成器](https://elysiatools.com/zh/tools/github-profile-readme-studio): 一键生成完整 GitHub 个人主页 README——横幅、统计磁贴、贡献热力图、3D 贡献天际线、项目卡片——一次性烘焙为静态、可换主题的 SVG 资产。不依赖任何会挂掉的徽章服务;把 SVG 提交到仓库,主页永不破图。
- [OpenAPI 转 Postman Collection](https://elysiatools.com/zh/tools/openapi-to-postman-collection): 把 OpenAPI 3.x 或 Swagger 2.0 规范（JSON/YAML）转成可直接导入的 Postman Collection v2.1.0，含文件夹、变量、认证与示例响应。
- [OpenAPI 转 TypeScript 类型生成器](https://elysiatools.com/zh/tools/openapi-to-typescript-generator): 将 OpenAPI 或 Swagger 的 JSON/YAML 规范转换为 TypeScript 接口类型、请求参数类型和响应类型，并支持输出格式与命名风格配置

## 示例

- [分布式追踪示例](https://elysiatools.com/zh/samples/distributed-tracing-samples): 使用 Jaeger、OpenTelemetry 和其他现代可观测性工具的综合分布式追踪示例，适用于微服务架构
- [AWS EventBridge 示例](https://elysiatools.com/zh/samples/eventbridge-samples): AWS EventBridge 示例，包括事件总线、规则、目标、模式注册表、自定义事件和跨账户事件路由，适用于无服务器事件驱动架构
- [JWT 示例](https://elysiatools.com/zh/samples/jwt-samples): 从基础令牌结构到高级安全实现的全面JWT示例
- [PDF示例](https://elysiatools.com/zh/samples/pdf-samples): 2026-02-01 到 2026-02-10 工具生成的PDF示例

## 相关内容

- [自托管抽奖组件配置复核、嵌入测试与上线交付](https://elysiatools.com/zh/hubs/self-hosted-giveaway-widget-review-and-embed-handoff): 复核转盘、刮刮卡或盲盒的配置与商家接口样例，检查可读性和移动端布局，交付版本明确的组件文件及真实浏览器验收记录。