Elysia Tools

Browse tools, examples, visual explainers, and topic guides from one clear workspace.

Top Categories

Hubs

Language
ZHESPTRUFRDEEN

Elysia Tools

Navigation

Design

Store promotion giveaway widget generator

· Last updated：2026-11-05

Design, preview and export a self-hosted wheel, scratch card or mystery box. Local demos or merchant API results; no hosted prize service.

Details

What this tool helps you do

Campaign studio

Design, preview and export a self-hosted wheel, scratch card or mystery box. Local demos or merchant API results; no hosted prize service.

  • Component: Lucky wheel / Scratch card / Mystery boxes
  • Theme: Coastal minimal / Candy pop / Retro arcade / Midnight gold / Festival paper / Garden sketch

Result source

Local draws are editable demonstrations, not secure prize allocation. Public offers in exported code are visible to visitors. No stock, identity or repeat-entry protection is provided.

Your server owns authentication, odds, inventory, eligibility and idempotency. Never put secret keys in this editor. Preview never calls your endpoint.

Merchant API integration guide

This is an interface contract, not an Elysia draw service. Implement POST /api/draw on your server, set the same campaign ID and prize IDs there, then enter that endpoint here. Download and host the files on HTTPS to test real draws; the editor only simulates them.

Request · POST application/json

The widget sends only version, campaignId and a random 32-character hexadecimal requestId. It sends no customer ID, probabilities or API key. The server must identify the participant independently; requestId is not a login credential.

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

Success · 200 application/json

Echo requestId exactly. prizeId must match a configured prize, including a no-prize entry. Optional: receiptId (≤200 characters), claim.code (≤300), claim.url (HTTPS, ≤2048). Omit unused fields instead of sending null. The response has no data/result wrapper and must be ≤16 KiB. A failed draw is not a no-prize result.

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

Configured prize IDs:

  • p1: 10% off
  • p2: Free shipping
  • p3: Mystery gift
  • p4: Maybe next time

Prefer hosting the widget and /api/draw on the same origin (scheme + host + port), using a server-side reverse proxy if needed. Relative paths resolve against the widget page, not the parent shop page. fetch uses credentials: same-origin; only same-origin cookies are sent. No Authorization header or custom headers are configurable. Cross-origin endpoints need CORS for the widget origin and OPTIONS for POST + Content-Type; cross-origin cookies are not sent. A static HTML file alone cannot implement authenticated draws. Third-party iframe cookie restrictions can still affect sessions.

The backend must authenticate participants, validate Origin/CSRF and campaign eligibility, enforce entry limits and rate limits, choose prizes using server-owned odds, and reserve stock and save the outcome in one transaction. Persist idempotency by participant + campaignId + requestId, returning the same outcome on retries. Enforce redemption and expiry server-side. Never trust browser odds, IDs or claim codes as proof of entitlement; never put secrets in this editor or exports.

Reject requests with an appropriate non-2xx status (for example 401/403/409/429/503). The widget shows a generic unconfirmed-result message, not the server error text. It times out after 15 seconds and rejects redirects, invalid JSON, mismatched requestId, unknown prizes and unsafe claim URLs. Manual retry reuses the pending ID only on this page; reloading creates a new ID, so entry limits must be persistent. There is no automatic retry or local-prize fallback.

Offline appearance preview stays live while API or hosting fields are incomplete. Complete the highlighted fields to export; invalid prize or style fields keep the last valid preview.

Export and embed

HTML / CSS / JavaScript / JSON. Host the exported files on your HTTPS site, then paste that page URL here. This tool does not publish or host campaigns.

Optional images load from their HTTPS hosts in visitors’ browsers. No images or API keys are stored by this editor.

Equal-size sectors are visual only; listed probabilities determine local demo results. In API mode, the server decides.

Execution

Run this tool

Fill in the form, run the tool, and review the result in one place.

Samples

Examples that match this tool

Related

Continue with connected tools and hubs

Written by the Elysia Tools team

Tool usage guide

Learn when to use this tool, what it supports, and how real users apply it.

Key facts

Category
Design
Input types
textarea
Output type
json
Sample coverage
4
API ready
Yes

Overview

The Store Promotion Giveaway Widget Generator helps e-commerce teams design, customize, and export self-hosted promotional widgets—including lucky wheels, scratch cards, and mystery boxes—using local demo outcomes or a secure merchant API.

When to use

  • You want to launch an interactive giveaway on your storefront without relying on third-party hosted prize services.
  • You need to test campaign visual themes, prize distributions, and wheel animations locally before going live.
  • Your backend engineers require a lightweight, embeddable frontend widget that connects directly to a custom POST /api/draw endpoint.

How it works

  1. 1Define your campaign identity, theme colors, widget type (wheel, scratch card, or mystery boxes), and configured prize lists in the JSON editor.
  2. 2Choose between local evaluation for rapid testing or API mode to delegate prize allocation, authentication, and inventory validation to your own server.
  3. 3Preview the interactive component live within the browser while visual and layout properties update instantly.
  4. 4Export the structured JSON configuration alongside HTML, CSS, and JavaScript files to host directly on your HTTPS storefront origin.

Use cases

  • Creating an on-site seasonal spin-the-wheel giveaway to boost visitor engagement and offer discount coupon codes.
  • Integrating a gamified mystery box reveal on an e-commerce checkout success page backed by internal order rewards logic.
  • Mocking and previewing interactive scratch card UI themes before integrating real reward redemption endpoints.

Compare alternatives

  • Generate cURL and common language code snippets from a request URL, method, headers, query parameters, and body

  • Turn an OpenAPI 3.x or Swagger 2.0 spec (JSON/YAML) into an importable Postman Collection v2.1.0 with folders, variables, auth and example responses.

  • Generate a complete GitHub profile README — banner, stats tiles, contribution heatmap, 3D contribution skyline and project cards — baked once into static, th…

Who it's for

Best for

  • Generate content in the browser.
  • The “Lucky wheel” workflow, done in one pass.
  • Repeatable jobs with content and the same settings every time.

Not ideal for

  • Fully automated batch jobs — this page is built for interactive use; use the API endpoint for scripts.
  • Content in other formats — this tool expects content.

Edge cases & common failures

  • Very large files

    Large files take longer and can hit browser memory limits — try a smaller sample first.

  • Skipping the output check

    Compare the first rows or pages of the output with the input before using it in production.

  • Files from unusual exporters

    Some files use format variants that do not convert cleanly — if the output looks wrong, re-save the file from the app that created it and try again.

Examples

1. Summer Boutique Lucky Wheel Local Demo

Storefront Merchandiser

Background

An apparel brand wants to evaluate an interactive lucky wheel campaign locally before developer integration.

Problem

Stakeholders need to preview styling, button copy, and prize sector distributions without setting up a backend server.

How to use

Select the wheel component, minimal theme, and set mode to local with configured prize probabilities in the configuration JSON.

{
  "version": 1,
  "campaignId": "summer-boutique",
  "language": "en",
  "title": "A little surprise, just for you",
  "description": "COASTAL STUDIO · A summer treat",
  "buttonText": "Try your luck",
  "rules": "Demo only; no real prizes.",
  "component": "wheel",
  "theme": "minimal",
  "mode": "local",
  "endpoint": "",
  "accent": "#214f74",
  "background": "#eff6fc",
  "ink": "#16334d",
  "radius": 24,
  "font": "system",
  "motion": "standard",
  "confetti": true,
  "embedUrl": "",
  "prizes": [
    {"id": "p1", "label": "10% off", "probability": 40, "message": "HELLO10", "kind": "prize", "imageUrl": "", "url": ""},
    {"id": "p2", "label": "Free shipping", "probability": 25, "message": "On us", "kind": "prize", "imageUrl": "", "url": ""},
    {"id": "p3", "label": "Mystery gift", "probability": 5, "message": "Demo win", "kind": "prize", "imageUrl": "", "url": ""},
    {"id": "p4", "label": "Maybe next time", "probability": 30, "message": "Thanks for visiting", "kind": "none", "imageUrl": "", "url": ""}
  ]
}

Outcome

Generates a fully functional browser-based wheel demo with 4 prize options totaling 100% distribution probability.

2. Authenticated Scratch Card with Merchant API

FAQ

Does this tool host or manage promotional prize inventory?

No. The generator exports self-hosted frontend code; all prize allocation, inventory deduction, and entitlement checks remain entirely on your backend server.

What is the difference between local mode and API mode?

Local mode picks prizes inside the browser using configured probability values for testing, whereas API mode calls your POST /api/draw endpoint for server-authoritative outcomes.

What data does the widget transmit to the backend endpoint?

In API mode, it sends a POST request containing only the version integer, campaignId string, and a random 32-character hexadecimal requestId.

Can I configure custom HTTP authorization headers for the API request?

No. The widget uses same-origin fetch credentials, meaning authorization should rely on same-origin session cookies handled via a reverse proxy.

What format must the backend draw response follow?

Your endpoint must return HTTP 200 with an unnested JSON body echoing the exact requestId and matching a configured prizeId, with optional receiptId and claim fields.

Hub

Self-Hosted Giveaway Widget Review and Embed Handoff

Review giveaway configuration, merchant response samples, contrast and responsive layouts, then hand off identified widget files with browser acceptance evidence.

Home
Tools3201
Samples593
Visualizations465
Viewers103
Hubs233
Tags333
Images, Audio & Video657

Image, audio, and video processing, conversion, and optimization tools

Math, Date & Finance644

Calculators, numerics, date logic, statistics, and finance tools

Design & Color297

Color, layout, graphics, visual styling, and design helper tools

Text & Writing209

Writing, cleanup, formatting, extraction, and text analysis tools

Developer & Web193

Developer utilities, networking, web debugging, and automation helpers

Conversion & Encoding175

Format, file, archive, unit, and encoding conversion tools

FLAC/WAV Source Screening and Evidence Handoff
Self-Hosted Giveaway Widget Review and Embed Handoff
Stripe Promo Code Batch Review and Import Preflight
Batch Photo Culling Review and Editing Shortlist Handoff
UI Screenshot Structure Review and Development Handoff

© 2026 Elysia Tools. All rights reserved.

DocsPricingAboutTerms of ServicePrivacy PolicyCookiesContact
Observability

Distributed Tracing Samples

Comprehensive distributed tracing examples using Jaeger, OpenTelemetry, and other modern observability tools for microservices architecture

Cloud Services

AWS EventBridge Samples

AWS EventBridge examples including event buses, rules, targets, schema registry, custom events, and cross-account event routing for serverless event-driven architecture

Security

JWT Samples

Comprehensive JWT examples from basic token structure to advanced security implementations

Document

PDF Samples

Generated PDF samples from tools dated 2026-02-01 to 2026-02-10

Design

Color Token Cascade Generator

Turn one primary hex color into a full design-token cascade with primary, accent, neutral, semantic tokens, CSS variables, and Style Dictionary JSON

Design

Image Palette to Design Tokens

Extract a dominant color palette from an image (k-means clustering), then export it as CSS variables, SCSS variables, a Tailwind config, or JSON design tokens — with named colors and an auto-generated shade scale for each

Development

API Request Code Snippet Generator

Generate cURL and common language code snippets from a request URL, method, headers, query parameters, and body

Data Processing

CSV to Database Migration Planner

Infer a relational schema from CSV data and generate create-table plus ALTER migration plans for PostgreSQL, MySQL, SQLite, or SQL Server

Full-Stack Web Developer

Background

A retailer requires a secure promotional scratch card widget integrated with an existing server-side reward engine.

Problem

Client-side odds must not be accessible to browser tampering, and prize allocation must be recorded securely in the database.

How to use

Set component to scratch, mode to api, specify the relative endpoint /api/draw, and provide matching prize IDs.

{
  "version": 1,
  "campaignId": "summer-boutique",
  "language": "en",
  "title": "A little surprise, just for you",
  "description": "COASTAL STUDIO · A summer treat",
  "buttonText": "Scratch now",
  "rules": "Terms apply. One entry per authenticated user.",
  "component": "scratch",
  "theme": "luxe",
  "mode": "api",
  "endpoint": "/api/draw",
  "accent": "#d4ad61",
  "background": "#202631",
  "ink": "#f8e8c7",
  "radius": 24,
  "font": "system",
  "motion": "standard",
  "confetti": true,
  "embedUrl": "",
  "prizes": [
    {"id": "p1", "label": "10% off", "probability": 40, "message": "Demo offer", "kind": "prize", "imageUrl": "", "url": ""},
    {"id": "p2", "label": "Free shipping", "probability": 25, "message": "A little something", "kind": "prize", "imageUrl": "", "url": ""},
    {"id": "p3", "label": "Mystery gift", "probability": 5, "message": "Stock reserved", "kind": "prize", "imageUrl": "", "url": ""},
    {"id": "p4", "label": "Maybe next time", "probability": 30, "message": "Thanks for stopping by", "kind": "none", "imageUrl": "", "url": ""}
  ]
}

Outcome

Produces an embeddable scratch card widget that sends POST draw requests to /api/draw and securely relies on server validation.

API Request Code Snippet Generator
OpenAPI to Postman Collection
GitHub Profile README Studio