Documentation

Complete guide to building landing pages with LanderCreate.

Getting Started

Opening the Builder

Click "Open Builder" from the landing page or navigate to /builder. The builder loads with the Prize Wheel template selected by default.

Interface Layout

The builder has 3 panels: Left Panel (templates, sections, triggers, URL params), Center (live mobile preview at 390px), and Right Panel (properties editor, export).

Selecting a Template

Click any template card in the left panel's "Templates" tab. The preview updates automatically with the selected game mechanic and default content.

Templates

Prize Wheel

An animated spinning wheel with 6 color segments. Users get 3 spins — the wheel is rigged to win on the 3rd spin. Full canvas-based animation with easing.

Lucky Roll

Two animated dice (blue and red) that roll with a rapid shuffle animation. Always lands on doubles to trigger the win state.

Diamond Match

A 3x2 card grid where users flip cards to find matching diamonds. The grid contains 3 diamonds and 3 other symbols — always results in a win.

Prize Grid

A 3x3 grid of hidden tiles. Users get 3 taps to reveal prizes. After 3 taps, the win state triggers regardless of what was revealed.

Golden Ticket

A scratch card with a gold gradient overlay. Users scratch (mouse drag or touch) to reveal the prize underneath. Triggers win at 40% scratch coverage.

Slot Machine

3-reel slot machine with rapid symbol animation. Always lands on triple 7s (jackpot). Red/dark luxury theme.

Treasure Chest

3 pirate-themed chests. User picks one — the chosen chest always contains the prize. Other chests show skulls.

Mystery Box

A purple box that takes 3 taps to unwrap through visual layers (box → gift → sparkle → prize). Builds suspense with each tap.

Survey

A direct survey template with no game mechanic. Shows a clean intro card with the prize, then goes straight into the 4-step survey, verification, and claim flow. Best for straightforward lead generation.

Customization

Content Editing

In the right panel's Properties tab, edit: Headline, Subheadline, CTA button text, Badge emoji, Prize name, and Prize image URL. All changes update the preview in real-time.

Hero Image Picker

Choose from 7 built-in product photos (AirPods Pro, PS5 Pro, Galaxy S26 Ultra, Apple Watch, Nintendo Switch, iPad Pro, iPhone 17 Pro) or enter any custom image URL. Selected images are served from Vercel's edge CDN for fast loading.

Image Sizing

Use the Image Size slider (60–400px) below the hero image picker to control how large the prize image appears on the lander. The size is applied to the exported HTML.

Theme & Colors

Set the Primary Color (buttons, accents, wheel), Text Color (headline and body text), and Background Color. Use color pickers or enter hex values directly.

Text Styling

In the Theme section, customize Headline Style (size 14–42px, bold, italic) and Subheadline Style (size 10–24px, bold, italic). All text styles are applied to the exported HTML output.

Light/Dark Mode

Toggle between light and dark themes using the sun/moon switch in the top header bar. Dark mode changes the lander's background, text colors, and card styles. The same toggle is also available in the Theme section.

Background Images

Choose from 22 preset backgrounds (gradients, dark, nature, tech, abstract) or click "Upload Image" to use your own. Supports PNG, JPG, GIF, WebP (max 5MB). Images are stored on Vercel Blob storage.

Survey Questions

Edit the 4 survey questions in the Properties panel. Each question has a text field and 4 answer options. Questions appear in a step-by-step flow after the game.

Verification Steps

Customize the 3 verification loading messages shown after the survey. Use {brand}, {model}, {city}, {carrier}, {isp}, {os}, {browser} placeholders for URL parameter personalization.

Redirect & Tracking

Set the Offer Redirect URL (where the claim button goes) and Tracking Script URL. Every exported page also includes /master.js and the track578 amps.js script.

Psychology Triggers

Countdown Timer

Adds a ticking countdown (default 4:59) on the claim section. Creates urgency. Configure minutes and seconds in the Properties panel.

Scarcity Badge

Shows "Only X remaining for {city}" with a red warning style. Set the prize count and customize the message text. Uses geo-targeting placeholder.

Social Proof Feed

Enables "Sarah just claimed!" style popup notifications. Toggle on/off in the Triggers tab.

Geo Targeting

Injects city, carrier, and device info from URL parameters into copy. Enables {city}, {carrier}, {brand}, {model} placeholders throughout the page.

Trust Badges

Adds a green "VERIFIED" badge on the claim section. Builds trust and legitimacy.

Progress Lock

Step-locked commitment flow — users must complete each step before proceeding. Survey → Verification → Claim.

URL Parameters

How Parameters Work

Add ?brand=Apple&model=iPhone&city=Dallas to the landing page URL. These values automatically replace {brand}, {model}, {city} placeholders in headlines, verification steps, and scarcity text.

Available Parameters

brand, model, os, browser, carrier, isp, city, region, country, connection_type, sub1, sub2. Toggle each on/off in the Params tab.

Using in Copy

Wrap parameter names in curly braces: "Congratulations {city} resident! Your {brand} {model} qualifies." The getURLParameter() function extracts values from the query string at runtime.

Exporting

How to Export

Click "Export HTML" in the top bar or the Export tab in the right panel. A modal shows the generated HTML with Copy and Download buttons.

What You Get

A single, self-contained HTML file with all CSS and JS inline. Zero external dependencies (except Google Fonts). Mobile-first, sub-1s load time.

Included Scripts

Every export includes /master.js and https://track578.com/amps.js at the bottom of the page, just before </body>.

Hosting

Upload the HTML file to any static host — Vercel, Netlify, Cloudflare Pages, S3, or even a basic web server. It's a single file with no build step.

Adding Custom Templates

How to Add

Click "+ Add New Template" at the bottom of the Templates tab. Fill in the name, icon, description, colors, and paste your game HTML and JavaScript.

Template Placeholders

Use these placeholders in your HTML/JS: {{CTA}} (button text), {{PRIZE}} (prize name), {{PRIZE_IMG}} (prize image tag), {{SURVEY_COUNT}} (number of survey questions), {{PC}} (primary color hex), {{CORE_JS}} (survey/verify/claim logic).

Game Type ID

Must be unique, lowercase, with hyphens only (e.g. my-custom-game). This is used internally to identify the template.

Required Structure

Your game HTML must include a <div id="win-sec" class="wcard hidden"> section with a <button id="startBtn" class="survbtn"> that triggers the survey flow. Use {{CORE_JS}} in your game JS to include the survey/verify/claim logic.