A 3D showroom for dishes or products that you can drop onto any website. Customers drag, tap and browse, and every dish ends at an order button. One script tag, one block of JSON, no developer needed.
Sample menu and prices for demo only. Press Order to see the click event the widget sends.
A spinning 3D plate beats a flat photo grid. People play with it, and play becomes time on page.
Each item links to your ordering, booking or DM link. Send it through Dub to track every tap.
Shopify, Wix, WordPress, Squarespace, Carrd. It's a standard web component with its styles sealed in, so nothing clashes.
<!-- 1. Load the widget once --> <script type="module" src="https://widgets.redstar.ca/redstar-showcase.js"></script> <!-- 2. Drop it where you want it --> <redstar-showcase accent="#e11d2e" currency="CAD" cta-url="https://dub.sh/your-order-link"> <script type="application/json"> { "brand": "Your Business", "items": [ { "name": "Jerk Chicken Plate", "style": "jerk-chicken", "price": 18.99, "category": "Mains", "description": "…", "tags": ["Spicy"], "url": "https://…" } ] } </script> </redstar-showcase>
| Setting | What it does |
|---|---|
accent | Brand colour for the glow, rim lights, buttons and plate trim. |
currency / locale | Price formatting, e.g. CAD + en-CA. |
cta-label / cta-url | Default button text and link. Each item can override them with ctaLabel and url. |
src | Load items from a hosted JSON file, so menu updates happen without touching the site. |
autoplay="false" | Turns off the idle auto-rotate. It's already off for visitors who choose reduced motion. |
--rs-height, --rs-radius | CSS variables for size and corner shape. |
style (per item) | 3D dish model: jerk-chicken, oxtail, curry-goat, ackee-saltfish, patty, sorrel, or any other value for a generic plate. |
| Events | redstar:select fires when a dish comes to the front and redstar:cta fires on button press. Hook them into analytics or a Telegram alert. |
Most service websites hide the price behind "call for a quote", and visitors leave. This widget shows a live estimate while visitors watch a 3D truck fill up, then trades the exact quote for a name and phone number. The lead goes straight to your phone, inbox or CRM.
Sample pricing for demo only. Submitting the form here doesn't send anything; it shows the lead data your business would receive.
Visitors who see a number stay longer. A price range sets expectations before the call, so the call is short.
The estimate is free, but the exact quote takes a name plus a phone or email. Every serious visitor becomes a lead.
Point it at Telegram, email, Google Sheets or your CRM. Each lead arrives with load size, extras, estimate, timing and notes.
<!-- 1. Load the widget once --> <script type="module" src="https://widgets.redstar.ca/redstar-quote.js"></script> <!-- 2. Drop it in. endpoint = where leads get sent --> <redstar-quote accent="#e11d2e" currency="CAD" endpoint="https://your-lead-webhook"> <script type="application/json"> { "brand": "Your Business", "sizes": [ { "label": "1/4", "fill": 0.25, "price": [219, 269], "note": "…" } ], "extras": [ { "id": "stairs", "label": "Stairs", "price": 40 }, { "id": "mattress", "label": "Mattress", "type": "qty", "price": 30 }, { "id": "rush", "label": "Same-day", "pct": 0.15 } ] } </script> </redstar-quote>
| Setting | What it does |
|---|---|
sizes | The load or job sizes. fill (0 to 1) sets how full the 3D truck gets, price is the low–high range, and note explains the size in plain words. |
extras | Add-ons. A plain price gives an on/off switch, type: "qty" gives a +/− counter, and pct adds a percentage, e.g. a rush fee. |
endpoint | The URL each lead is POSTed to as JSON. Formspree, Make, Zapier, a Supabase function or your Telegram bot relay all work. |
bookingUrl | Optional. Shows a "Pick a pickup time" button after submit, which can point to Cal.com. |
responseTime, phone | Used in the thank-you message and as the fallback if sending fails. |
| Text | title, ctaLabel, disclaimer, timing, doneMessage and more let you rewrite every word for any trade. |
| Events | redstar:quote-open fires when someone presses the CTA, so you can track funnel drop-off. redstar:lead fires on submit with the full lead. |
| Built in | A hidden spam trap, phone and email checks, keyboard support, and reduced motion for visitors who choose it. |
A glossy 3D mystery cube that every visitor wants to spin. Every spin wins a deal, and claiming it takes a phone number or email. You set the prizes and the odds. Each visitor gets one spin, and their browser remembers it.
Sample prizes and codes for demo only. Use "Reset demo" in the top-right corner of the widget to spin again.
A cube that begs to be spun gets far more engagement than a "join our newsletter" box. Curiosity does the selling.
Set a weight for each prize. Make the cheap prize common and the big one rare, so your margins stay safe.
The code only unlocks with a phone or email. The lead arrives with the prize attached, ready for your SMS or email follow-up.
<script type="module" src="https://widgets.redstar.ca/redstar-promo.js"></script> <redstar-promo accent="#e11d2e" endpoint="https://your-lead-webhook"> <script type="application/json"> { "brand": "Your Business", "campaign": "spring-sale", "validHours": 48, "orderUrl": "https://your-order-link", "prizes": [ { "title": "10% off", "big": "10%", "small": "OFF YOUR ORDER", "code": "SAVE10", "weight": 5 }, { "title": "Free side", "big": "FREE", "small": "SIDE WITH ANY MEAL", "code": "FREESIDE", "weight": 2 } ] } </script> </redstar-promo>
| Setting | What it does |
|---|---|
prizes | Up to 6. big and small are the text on the cube face, code is revealed after claiming, and weight sets the odds. |
campaign | Name each promotion. A new campaign name gives everyone a fresh spin. |
validHours, orderUrl, terms | The expiry shown with the code, a "Use it now" button link, and the fine print. |
endpoint | Where claimed deals are POSTed: contact, prize and code. |
allow-repeat | Turns off the one-spin-per-visitor limit, e.g. for an in-store tablet. |
| Events | redstar:spin fires when a prize is revealed and redstar:lead fires when it's claimed, so you can measure spin-to-claim rate. |
Customers build a custom pendant in 3D: shape, metal, size, engraving and birthstone, with a live price estimate. When they're done, the jeweler gets the full spec plus a picture of the exact design. No more back-and-forth DMs to work out what someone wants.
Sample prices for demo only. A jeweler sets their own metals, sizes, prices and fonts in the config.
Once someone sees their own name in gold, they're emotionally invested. A design they built themselves is much easier to close than a catalogue photo.
Every request arrives with shape, metal, size, engraving, font, stone, chain, the estimate and a picture of the design.
The live estimate filters out tire-kickers. People who send a design already know roughly what it costs.
<script type="module" src="https://widgets.redstar.ca/redstar-pendant.js"></script> <redstar-pendant accent="#b8860b" currency="CAD" endpoint="https://your-lead-webhook"> <script type="application/json"> { "brand": "Your Jewelry Studio", "metals": [ { "label": "14K yellow gold", "color": "#e6bf72", "price": 649 } ], "shapes": ["circle", "heart", "tag", "bar"], "engravingPrice": 35, "stonePrice": 65 } </script> </redstar-pendant>
| Setting | What it does |
|---|---|
metals | Each metal's label, colour and base price. Defaults: sterling silver, plus 14K yellow, white and rose gold. |
sizes | The label, a note like "22 mm", the 3D scale, and a price multiplier mult. |
shapes | Any of circle, heart, tag and bar. |
fonts, maxChars, engravingPrice | Engraving options. Defaults are Script, Serif and Block, with 14 characters max. |
stones, stonePrice, chains | The birthstone list with colours, the stone price, and chain lengths with any add-on cost. |
| Lead | redstar:lead carries the full design spec, the contact details and preview, a JPEG of the design. |
Customers pick a service, a day and an open time slot in three taps. A 3D appointment card flips to confirm what they chose. You get the booking request with their contact details, and they get a Google Calendar link plus an optional deposit button.
Demo shop, prices and availability. Grey slots are shown as already taken.
The moment someone sees your work is the moment to book them. Three taps beats "DM to book" every time.
Set your hours, slot length and closed days. Connect a busy-times feed and taken slots grey out automatically.
Add a Stripe or Square payment link and customers can pay a deposit right after booking. Calendar links help them remember.
<script type="module" src="https://widgets.redstar.ca/redstar-booking.js"></script> <redstar-booking accent="#e11d2e" currency="CAD" endpoint="https://your-lead-webhook"> <script type="application/json"> { "brand": "Your Shop", "interval": 30, "daysAhead": 14, "hours": { "tue": ["10:00","19:00"], "sat": ["09:00","17:00"], "sun": null }, "services": [ { "name": "Classic cut", "minutes": 30, "price": 35 } ], "depositUrl": "https://buy.stripe.com/your-link", "address": "123 King St, Oshawa" } </script> </redstar-booking>
| Setting | What it does |
|---|---|
services | Each service's name, length in minutes, price and an optional note. |
hours, interval, daysAhead | Opening hours per weekday (null means closed), the slot spacing, and how far ahead people can book. |
closedDates, leadMinutes | Holidays, like "2026-12-25", and the minimum notice before a slot can be booked. |
busyUrl | A JSON feed of taken times ([{start, end}]), e.g. from Google Calendar via Make or a Supabase function. Those slots grey out. |
depositUrl, address | A Stripe or Square payment link shown after booking, and the location added to the calendar invite. |
| Events | redstar:slot-select fires when someone picks a time, and redstar:lead fires with the full booking and contact details. |
Every item a customer adds drops onto a 3D plate. A reward bar pushes them toward free delivery and a free patty, and the receipt prints the full total with tax as they go. After payment, a gift box opens with a referral reward and a one-tap add-on. That's the second sale, captured right after the first.
Sample menu and prices. The demo uses a clearly labelled test checkout, so no card is ever entered or charged.
The reward bar does the upselling. "$6 more for free delivery" adds a side, a drink or a patty without anyone pushing.
Tax, delivery and discounts print on the receipt as customers go, so the total never jumps at the end. Canada's Competition Act now bans hidden extra fees.
The box opens right after payment, when the customer is happiest: a referral code to share plus a one-tap add-on before the kitchen starts.
<script type="module" src="https://widgets.redstar.ca/redstar-plate.js"></script> <!-- checkout-endpoint = Redstar payment service that opens Stripe Checkout --> <redstar-plate accent="#e11d2e" currency="CAD" checkout-endpoint="https://pay.redstar.ca/checkout"> <script type="application/json"> { "brand": "Your Restaurant", "taxRate": 0.13, "taxLabel": "HST", "deliveryFee": 4.99, "menu": [ { "id": "jerk", "cat": "Mains", "kind": "main", "model": "jerk", "name": "Jerk chicken", "price": 14.99 } ], "deals": [ { "label": "Meal deal", "needs": { "main": 1, "side": 1, "drink": 1 }, "amount": 3 } ], "rewards": [ { "at": 30, "label": "free delivery", "type": "freeDelivery" } ] } </script> </redstar-plate>
| Setting | What it does |
|---|---|
menu | Each item has a cat (menu tab), a kind (main, side, drink, extra or dessert, which sets where it lands in 3D), a 3D model, and its price and description. |
deals | Bundle discounts that apply automatically, e.g. main + side + drink = $3 off. Two full sets get the discount twice. |
rewards | Spend thresholds shown on the reward bar: freeDelivery or freeItem (the free item drops onto the plate too). |
taxRate, deliveryFee, serviceFee | Everything goes into the live receipt, so the total shown is the total paid. |
upsells, referral | The one-tap add-ons and the reward code revealed in the box after payment. |
checkout-endpoint | Sends the cart to your payment service, which returns a Stripe Checkout link. Coming back with ?redstar_paid=ID plays the unbox. Without it, the demo test checkout runs. |
| Events | redstar:cart-change, redstar:checkout, redstar:paid and redstar:upsell, for analytics and kitchen alerts. |
A gallery of real transformations that customers drag to compare. Each job shows the service, the time it took and the price range, with a "Get a quote like this" button right next to the proof. Built for cleaners, detailers, landscapers, painters and reno crews.
Demo images are generated illustrations. Real clients upload their own before and after photos.
A before/after does more selling than any paragraph. Customers convince themselves while they drag.
Every job has a "Get a quote like this" button. Pair it with Instant Quote and the lead arrives already warm.
No 3D engine needed: just photos, a slider and a subtle tilt. It loads quickly even on old phones.
<script type="module" src="https://widgets.redstar.ca/redstar-ba.js"></script> <redstar-ba accent="#e11d2e" cta-url="https://your-quote-page"> <script type="application/json"> { "brand": "Your Business", "jobs": [ { "title": "Kitchen floor deep clean", "before": "/img/floor-before.jpg", "after": "/img/floor-after.jpg", "service": "Deep clean", "time": "3 hrs", "price": "$180–$240", "location": "Whitby", "review": "Real customer quote (with permission)", "reviewer": "First name, city" } ] } </script> </redstar-ba>
| Setting | What it does |
|---|---|
jobs | Each job has before and after photos plus a title, service, time, price, location and description. |
review, reviewer | An optional quote from the actual customer of that job. Only use real reviews, with permission. |
cta-url, url | Where "Get a quote like this" goes: a site-wide default, or a different link per job. |
| Events | redstar:compare fires when someone drags the slider and redstar:cta fires when they press the quote button, so you can see which jobs sell. |
Visitors type their postal code and a pin drops onto a 3D zone map with an instant answer: yes or not yet, plus the travel fee and how soon you can get there. Anyone outside your area joins a waitlist, so even a "no" becomes a lead for when you expand.
Try L1H (Oshawa), L1S (Ajax), L1C (Bowmanville) or M5V (Toronto, not served). The zone map is a stylized picture, not a street map.
Visitors who aren't in your area find out in two seconds instead of in a phone call.
Zone fees are shown before anyone books, so far-away jobs stay worth the drive and nobody feels surprised.
The waitlist shows you where demand is. Expand where the sign-ups are, then text them all on day one.
<script type="module" src="https://widgets.redstar.ca/redstar-area.js"></script> <redstar-area accent="#e11d2e" currency="CAD" cta-url="https://your-booking-page" endpoint="https://your-lead-webhook"> <script type="application/json"> { "brand": "Your Business", "zones": [ { "name": "Core", "codes": ["L1G","L1H"], "fee": 0, "eta": "Next day" }, { "name": "Outer", "codes": ["L1B"], "fee": 25, "eta": "Within 3 days" } ], "areaNames": { "L1H": "Oshawa" } } </script> </redstar-area>
| Setting | What it does |
|---|---|
zones | Up to 3, listed inner to outer: name, matching codes, travel fee, eta, and an optional per-zone booking url. |
codes | Matched by prefix. Canadian FSAs ("L1H") and US ZIPs ("10001") both work. |
areaNames | Friendly names shown in the answer, e.g. "Yes, we come to Oshawa." |
endpoint | Where waitlist sign-ups are POSTed: code plus phone or email. |
| Events | redstar:area-check fires on every lookup, which gives you a free demand map. redstar:lead fires on waitlist sign-ups. |
Customers build their own maintenance plan: how often, how big, which tier, and monthly or yearly billing. The price updates live on 3D podiums, along with how much they save compared with booking one-off. For the business, every sign-up is income it can count on every month.
Sample prices. Every number is set in the config.
10 customers on a $270/mo plan is $2,700 a month you can count on. That changes how a small business hires and grows.
"Save $650 a year compared with one-off bookings" is a better pitch than any discount code.
Frequency, size and tier are all up to the customer. It feels fair, and nobody needs a sales call to sign up.
<script type="module" src="https://widgets.redstar.ca/redstar-plans.js"></script> <redstar-plans accent="#e11d2e" currency="CAD" endpoint="https://your-lead-webhook"> <script type="application/json"> { "brand": "Your Business", "annualDiscount": 0.08, "frequencies": [ { "label": "Every 2 wks", "perMonth": 2.17, "mult": 0.9 } ], "sizes": [ { "label": "1–2 bed", "mult": 1 } ], "plans": [ { "name": "Plus", "perVisit": 139, "popular": true, "features": ["…"], "url": "https://buy.stripe.com/your-subscription-link" } ] } </script> </redstar-plans>
| Setting | What it does |
|---|---|
plans | Up to 3 tiers: name, perVisit base price, tagline, features, popular badge, and an optional Stripe subscription url. |
frequencies | Visits per month (perMonth) and a per-visit discount (mult), e.g. weekly at 0.85. |
sizes | Home or yard size multipliers. sizeLabel renames the heading, e.g. "Lawn size" or "Vehicle". |
annualDiscount, oneTimeMult | Yearly billing discount, and how much more one-off bookings cost, which drives the savings line. |
| Events | redstar:plan-change fires as people compare options and redstar:lead fires on sign-up with the full plan. |
A premium showroom for anyone selling products: sneakers, clothing, jewelry, candles, books. It has a spotlight hero, colourways, sizes with sold-out states, honest sale pricing, real launch countdowns and a Buy button for each colourway. The owner updates everything from a Google Sheet. Changing a price, photo or payment link updates the site, no developer needed.
Demo brand and illustrated shoes. Real stores use their own product photos. Trail Pro shows the drop countdown and notify-me signup.
One row per colourway. Change a price, swap a photo or paste a new payment link, and the site picks it up on the next visit.
Stripe, Square, Shopify checkout or PayPal links all work. With Stripe, the chosen size goes along with the order.
Launch countdowns use a real date, sale prices show the real original price, and sold-out sizes are greyed out. No fake urgency.
<script type="module" src="https://widgets.redstar.ca/redstar-collection.js"></script> <!-- Google Sheets: File → Share → Publish to web → choose the sheet → CSV → copy the link --> <redstar-collection accent="#e11d2e" currency="CAD" sheet="https://docs.google.com/spreadsheets/d/e/YOUR-SHEET-ID/pub?output=csv"> <script type="application/json">{ "brand": "Your Store", "collection": "New Arrivals" }</script> </redstar-collection>
| Column | What goes in it |
|---|---|
product, variant | Rows with the same product name are grouped. Each row is one colourway or option. |
color, image | Swatch colour (hex) and a photo link. Transparent PNGs look best on the dark theme. Add theme="light" for photos with white backgrounds. |
price, compare_at | Selling price, plus the real original price to show a sale. |
sizes | Comma list. Add an x for sold out, e.g. 7,8,9,10x,11. |
pay_link | Stripe, Square, Shopify or PayPal payment link for that colourway. Leave it empty to show "Reserve" instead, which sends you a request. |
badge, description, category, drop_at | Badge (New, Limited…), description, filter tab, and the launch date for the countdown, e.g. 2026-12-01T19:00:00-05:00. |
Customers colour every part of the shoe, pick a material, add heel text and watch the price update. Then they send the design as a custom order request, with a deposit link to start production. Designing is fun, so people stay, and a design they made is one they want to own. Works for custom sneakers, jerseys, jackets and anything else made to order.
Demo studio. Try "Surprise me", then Flip to see the other side.
Designing a pair takes minutes, not seconds, and that time on the page is attention a normal product page never gets.
Custom work gets priced properly. The request arrives with the full spec and a picture, and the deposit link locks in serious buyers.
Every design is a picture. Repost customer designs and run "design of the week" contests.
<script type="module" src="https://widgets.redstar.ca/redstar-sneaker.js"></script> <redstar-sneaker accent="#e11d2e" currency="CAD" endpoint="https://your-lead-webhook"> <script type="application/json"> { "brand": "Your Studio", "basePrice": 189, "textPrice": 20, "materials": [ { "id": "leather", "label": "Leather", "add": 0 }, { "id": "suede", "label": "Suede", "add": 25 } ], "depositUrl": "https://buy.stripe.com/your-deposit-link" } </script> </redstar-sneaker>
| Setting | What it does |
|---|---|
basePrice, materials, textPrice | Pricing: a base price, plus or minus per material, plus a charge for custom heel text. |
palette, parts, start | The colours on offer, which parts customers can recolour, and the starting colourway. |
sizes, sizeLabel | The size list on the order form. |
depositUrl | A fixed-amount payment link, e.g. a $50 deposit, shown after the request is sent. The final balance is invoiced once the price is confirmed. |
| Lead | redstar:lead carries the colourway name, every part's colour, material, heel text, size, contact details and a picture of the design. |
Swap products, photos, prices and payment links, and watch the showroom update live. When it looks right, copy the rows into the store's Google Sheet, or copy a ready-made embed code.
Customers choose a design, an amount and a message, and watch the card flip to show their note. They can schedule it to arrive on the day. A spend-more bonus ("buy $100, get a $15 card for you") lifts the order size. The business gets paid now, and most cards bring the recipient in, and they usually spend more than the card.
Test checkout. No card is charged. The business receives the order and issues the card through Square Gift Cards or a similar service.
Gift cards are paid up front, at the time of year small businesses need cash most.
"Buy $100, get $15 for you" is a self-gift that pushes buyers up an amount tier.
Every card brings in someone new, sent by a friend. That's the best kind of referral.
<script type="module" src="https://widgets.redstar.ca/redstar-giftcard.js"></script> <redstar-giftcard accent="#e11d2e" currency="CAD" endpoint="https://your-order-webhook"> <script type="application/json"> { "brand": "Your Business", "amounts": [25, 50, 100], "payLinks": { "25": "https://buy.stripe.com/…", "50": "https://buy.stripe.com/…", "100": "https://buy.stripe.com/…" }, "customLink": "https://buy.stripe.com/… (customer chooses price)", "bonuses": [ { "min": 100, "bonus": 15 } ] } </script> </redstar-giftcard>
| Setting | What it does |
|---|---|
amounts, allowCustom, min/max | Preset amounts, plus an optional custom amount within limits. |
payLinks, customLink | A payment link per amount, and a "customer chooses price" link for custom amounts. The order details go to your endpoint before checkout opens. |
bonuses | Spend-more rewards: when min is reached, the buyer gets a bonus card worth bonus. |
designs | Any of noir, gold, holiday, candy and forest. All of them use the brand's accent colour. |
| Fine print | Defaults to "Never expires", because in Ontario, gift cards can't legally expire. |
People don't fall for one product, they fall for how it all looks together. Customers tap the dots in a real styled photo to see each piece, keep the ones they love, and the total updates live, with a discount for taking the full look. On Shopify stores, every piece lands in one cart in a single click.
Illustrated demo room and sample prices. Stores use their own styled photos and place the dots wherever their products are.
A sofa buyer leaves with a lamp, a rug and a print. The look does the upselling.
Shopify stores get a single cart with every piece and the bundle discount code applied.
Furniture, outfits, salon shelves, kitchen setups, gift tables. If it's photographed together, it sells together.
<script type="module" src="https://widgets.redstar.ca/redstar-look.js"></script> <redstar-look accent="#e11d2e" currency="CAD"> <script type="application/json"> { "brand": "Your Store", "bundleMin": 3, "bundleDiscount": 0.10, "shopifyDomain": "yourstore.myshopify.com", "discountCode": "FULLLOOK10", "looks": [ { "name": "Living room", "image": "https://…/styled-room.jpg", "items": [ { "name": "Cloud Sofa", "price": 1899, "x": 58, "y": 70, "variantId": "44123456789", "link": "https://…" } ] } ] } </script> </redstar-look>
| Setting | What it does |
|---|---|
looks | One or more styled photos. Each item has a name, price, x/y position (% of the photo), and an optional tag, description and zoom for its thumbnail. |
shopifyDomain, variantId, discountCode | Shopify one-click: every selected piece goes into one cart, with the discount code applied to full looks. |
bundleLink, per-item link | For other platforms: one payment link for the full look, or a link per piece. |
bundleMin, bundleDiscount | For example, 3+ pieces gets 10% off, shown live as "Add 1 more piece to save 10%". |
| Events | redstar:hotspot shows which products people tap most, and redstar:buy/redstar:lead fire on purchase or request. |
A 24-hour clock shows today's deal windows. Deals unlock only during the business's quiet times, like 2–5pm Tuesday to Thursday, with a live countdown. Outside those times, visitors can set a reminder or add the next deal to their calendar. Coupons usually give away margin during rush hour; this only discounts the hours that were going to be empty anyway.
Sample deals. Use the preview buttons to see both states, or switch to real Toronto time.
Deals only exist when tables or chairs would be empty, so margin is protected.
"Live now, ends in 1h 40m" is real, honest urgency, with no fake timers.
Visitors who arrive outside the deal times leave a phone or email to get reminded, and you keep those contacts.
<script type="module" src="https://widgets.redstar.ca/redstar-dealclock.js"></script> <redstar-dealclock accent="#e11d2e" endpoint="https://your-lead-webhook"> <script type="application/json"> { "brand": "Your Business", "timezone": "America/Toronto", "orderUrl": "https://your-order-link", "deals": [ { "days": ["tue","wed","thu"], "start": "14:00", "end": "17:00", "title": "15% off every plate", "short": "15% off", "code": "QUIET15" } ] } </script> </redstar-dealclock>
| Setting | What it does |
|---|---|
deals | Each has days, start/end (24h), a title, a short label for the clock face, and a code revealed when claimed. |
timezone | The business's time zone, so every visitor sees the same windows. |
orderUrl, per-deal link | An "Order now" button shown with the claimed code. |
| Events | redstar:claim fires on every claim and redstar:lead fires on reminder sign-ups. |
Glass, liquid, light and motion, packaged as drop-in parts. Use them inside any Redstar widget, or on their own on any website. They all slow down or switch off for visitors who choose reduced motion.
Hover the shoe: it bursts into thousands of glowing particles, then reforms when you move away. The text loops. Works with any product photo or logo. Use it for product reveals, "new drop" headers and loading moments.
Live lightning around any button or card, either all the time or only on hover. For launch CTAs, limited drops and gaming or energy brands.
A cold-press bottle that fills from a pouring stream, with pulp, a sloshing surface and a custom label. Perfect for juice bars, smoothie shops and drink brands: a "build your juice" order flow, loyalty progress, or a hero section.
Rainbow foil that shifts as you tilt. Gift cards, loyalty and VIP passes look valuable, so people keep them.
Headlines and prices scramble, then lock in. Plays when scrolled into view and again on hover.
A meter that fills and sloshes when the value changes: loyalty progress, fundraising goals, "orders until reward".
Flowing liquid with bubbles. It glows when full. Already used for Build-a-Plate's reward bar.
The check draws, a ring pulses and confetti bursts. Used on "Order confirmed" in Build-a-Plate.
Animated connectors and a pulsing current step. Customers always know how close they are.
Numbers count up when they come into view, and pulse dots show real status. Only real data: no fake "12 people viewing".
With a highlight that follows your cursor.
Shimmer, ripple on tap, and a magnetic pull on hover. The glass panel blurs whatever sits behind it.
<script type="module" src="https://widgets.redstar.ca/redstar-fx.js"></script> <rs-orb value="0.7" accent="#e11d2e">7 of 10 visits</rs-orb> <rs-liquid value="0.4"></rs-liquid> <rs-steps steps="Cart,Details,Pay" current="1"></rs-steps> <rs-button href="https://…">Order now</rs-button> <rs-dissolve src="/logo.png" trigger="hover"></rs-dissolve> <rs-electric><rs-button>Shop the drop</rs-button></rs-electric> <rs-bottle value="0.85" color="#f28c1b" label="Sunrise"></rs-bottle>
The admin side for every widget and FX piece. The dashboard shows every display for a client and whether it's live. Every display in the library also has an "⚙ Adjust" button that opens it here. Pick a client and a widget, change anything in the form (prices, items, colours, times, links) and watch the preview update. Press Publish and the client's live site updates. The embed code goes in once and never needs editing again.
One-time setup: create a Supabase project and run supabase-setup.sql in its SQL editor. Then paste the project URL and the anon public key here. Publishing works from the live site (Cloudflare), not inside this preview.
Menu and product showroom with a tap-to-order button.
A live estimate, a 3D load visualizer, and a lead sent straight to you.
A spin-to-win deal that turns visitors into a contact list.
A 3D custom jewelry designer that sends the full spec and a picture.
Service, day and time slot picking, with calendar links and an optional deposit.
A 3D order builder with a reward bar, a live receipt and a reward after payment.
Drag-to-compare job proof with a quote button.
A postal code check on a 3D zone map, with zone fees and a waitlist.
Recurring service plans that turn one-time jobs into monthly income.
A product showroom the owner runs from a Google Sheet.
A design-your-pair game that ends in a custom order request and a deposit.
Design, amount, message and scheduled delivery, with a spend-more bonus.
Tap to buy pieces from a styled photo, with a full-look discount.
Quiet-hour deals with a live countdown and reminders.
Fill a 3D gift box and unlock bundle pricing.
A digital stamp card: scan at the counter, and every 10th visit is free.
A 4-question quiz that picks the right size or product.