H5-Promotion
🥈SilverH5-Promotion enables marketers to create interactive HTML5 content like shake-to-win, lucky draws, and digital red envelopes. It benefits marketing teams looking to engage users with gamified experiences. The skill connects to web-based marketing campaigns and can be integrated into promotional websites or mobile web apps.
111660Updated 1mo ago
Intermediate30min to implementmarketing
Saves ~5 min per use
Quick InstallView Source
git clone https://github.com/forrest-lee/H5-Promotion.gitWorks with:
Claude
Overview
About This Skill
H5-Promotion enables marketers to create interactive HTML5 content like shake-to-win, lucky draws, and digital red envelopes. It benefits marketing teams looking to engage users with gamified experiences. The skill connects to web-based marketing campaigns and can be integrated into promotional websites or mobile web apps.
How to Use
[{"step":"Define your campaign goals and audience","action":"Fill in the [PRODUCT/SERVICE], [TARGET_AUDIENCE], [NUMBER] of prizes, and [TOTAL_VALUE] in the prompt template. Specify the required action to unlock the red envelope (e.g., newsletter signup, social media follow).","tip":"Use tools like Google Analytics or your CRM to segment your audience and tailor the prizes to their preferences (e.g., discounts for first-time buyers, premium products for loyal customers)."},{"step":"Generate the HTML5 code","action":"Paste the prompt into your AI tool (e.g., ChatGPT, Claude) and run it. Review the generated code for accuracy, ensuring the prize values, dates, and actions match your campaign requirements.","tip":"Test the shake-to-win functionality in a browser before deployment. Use Chrome’s DevTools to simulate device shaking if testing on desktop."},{"step":"Customize the design and branding","action":"Replace placeholder images (e.g., [PRODUCT_IMAGE_URL]) with your assets. Adjust colors, fonts, and layouts to align with your brand guidelines. Add your logo and campaign hashtag.","tip":"Use tools like Canva or Figma to create visual mockups of the interactive elements before coding. Ensure the design is mobile-responsive."},{"step":"Integrate and deploy","action":"Embed the HTML5 code into your promotional website or mobile web app. For email campaigns, use tools like Mailchimp or HubSpot to insert the code as a dynamic content block. Set up tracking (e.g., Google Analytics, Facebook Pixel) to monitor engagement.","tip":"For advanced users, integrate the campaign with your backend to automatically update prize inventories or send discount codes via email after red envelope redemption."},{"step":"Promote and monitor","action":"Launch the campaign and promote it via your marketing channels (social media, paid ads, email newsletters). Monitor real-time analytics to track shakes, red envelope opens, and conversions. Adjust prizes or messaging if engagement is low.","tip":"Schedule follow-up emails for users who didn’t win to encourage participation in future campaigns. Use A/B testing to compare different prize structures or call-to-action buttons."}]
Setup & Installation
Quick Install
No install command available. Check the GitHub repository for manual installation instructions.
Alternative Install (Git Clone)
git clone https://github.com/forrest-lee/H5-PromotionRequirements
- Claude Code or compatible AI agent
- Works with: Claude
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Create an interactive HTML5 promotional campaign for [PRODUCT/SERVICE] targeting [TARGET_AUDIENCE]. Include a shake-to-win game with [NUMBER] prizes worth [TOTAL_VALUE]. Add a countdown timer for the campaign ending on [DATE]. Design a digital red envelope feature that unlocks after [ACTION_REQUIRED]. Provide the HTML5 code and a brief explanation of how to integrate it into a website. Include social sharing buttons for participants to share their results.
Example Output
Here’s a ready-to-deploy HTML5 promotional campaign for **‘Summer Glow Skincare’**, targeting **millennials aged 25-35** interested in beauty and self-care. The campaign features a **shake-to-win game** with **5 prizes** worth a total of **$500**, including a luxury skincare set ($200), a year’s supply of sunscreen ($150), and three $50 gift cards. The campaign runs from **June 1 to June 30, 2024**, with a countdown timer prominently displayed. Users must **sign up for the newsletter** to unlock a digital red envelope containing a **10% discount code** (valid for 48 hours). The HTML5 code includes responsive design for mobile and desktop, and social sharing buttons encourage participants to post their winnings on Instagram or Twitter with a branded hashtag (#SummerGlowWin).
**Key Features:**
- **Shake-to-Win Game:** Users physically shake their device (or click a virtual button) to reveal a random prize. The odds are set to **1 in 10** for the grand prize, with smaller prizes more frequent to maintain engagement.
- **Digital Red Envelope:** After signing up, users receive a virtual red envelope that "unfolds" to reveal their discount. The envelope can be shared via WhatsApp or email for additional entries.
- **Social Sharing:** A modal pops up after winning, prompting users to share their prize on social media for a **bonus entry** into the next draw.
- **Analytics Integration:** The code includes Google Analytics events to track shakes, red envelope opens, and conversions.
**Integration Instructions:**
1. Copy the provided HTML5 code into the `<body>` of your promotional landing page.
2. Replace `[PRODUCT_IMAGE_URL]` and `[BRAND_LOGO]` placeholders with your assets.
3. Update the prize values and campaign dates in the JavaScript configuration.
4. Test the shake-to-win functionality on both mobile and desktop devices.
5. Deploy the campaign via your web hosting service or embed it in your email marketing tool (e.g., Mailchimp) as a dynamic content block.
**Example Output (Simplified Code Snippet):**
```html
<div id="promo-container">
<h1>Shake to Win!</h1>
<p>Win prizes worth up to $500!</p>
<button id="shake-button">SHAKE MY DEVICE</button>
<div id="prize-display"></div>
<div id="red-envelope" style="display:none;">
<p>You unlocked a 10% discount!</p>
<button onclick="shareDiscount()">Share & Get Bonus Entry</button>
</div>
</div>
<script>
// Prize configuration
const prizes = [
{ name: "Luxury Skincare Set", value: 200, odds: 1 },
{ name: "Year’s Supply of Sunscreen", value: 150, odds: 2 },
{ name: "$50 Gift Card", value: 50, odds: 3 }
];
// Shake detection and prize logic here...
</script>
```Apply to these tools
Browse all toolsCompatible MCP servers
Browse all MCP servers
Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan