This article is also available in:

How to Create Custom Overlay

✨ Make Your Overlay Look Special, Come On!

Custom Overlay is a feature that allows you to display your own HTML into an overlay view. It’s perfect for personalized messages, animation effects, or branding elements tailored to your style!

But before we begin, here are a few things to know to make your overlay not just cool—but smooth!

💡 Types of Common Overlays

In addition to custom overlays, there are several standard overlay types you might want to customize too:

Donation Notification (Alert): A pop-up that shows when someone donates, typically includes a thank-you note, donor name, and donation amount.
MediaShare: Lets viewers share images or videos to the streamer’s screen.
Leaderboard: Shows top donors or subscribers within a specific timeframe.
QR Code: Displays a scannable code (e.g., for donation).
Timer: Countdown or count-up timer, great for events or session durations.
Soundboard: Clickable buttons that play sound effects.
Milestone: Displays goals (e.g., donation).
Polls: Interactive on-screen polls for viewer participation.
Running Text: Scrolling text to highlight important messages.
Gacha: Used for giveaways or random surprises when supporters contribute.

✍️ HTML Writing Tips for Neat Results

To make sure your custom overlay looks perfect:

✅ Use standard HTML structure: Always begin with <html>, <head>, and <body>.
❌ Avoid using position: absolute: It causes layout issues and prevents auto-resizing.
✅ Use flexible size units: Use px, rem, or em. Avoid vh or vw to ensure compatibility across screens.
✅ Focus on visual design: JavaScript is limited, so focus on visuals and simplicity.

📦 What Information Can You Display?

You can display both static content (like text or images) and dynamic variables provided by the system:

Variable	Description
`{{amount}}`	Donation amount (numeric)
`{{formattedAmount}}`	Formatted donation amount (e.g., Rp15,000)
`{{message}}`	Message from the supporter
`{{gifterName}}`	Supporter’s name
`{{gifterPicture}}`	Link to the supporter’s profile picture
`{{gifterBadges}}`	Comma-separated list of badges
`{{isGifterVerified}}`	Verification status (`true` or `false`)

Example Usage in HTML:

<p>Thank you very much, {{gifterName}}! 🎉</p>
<p>You just gave {{formatedamount}}</p>
<p>"{{message}}"</p>

🌟 Extra Design Tips to Make Your Overlay Cooler

🎨 Use contrasting background colors: Ensure readability while staying stylish.
🧼 Add padding: padding: 16px; gives breathing room inside the overlay.
🖼️ Show profile pictures: Adds personal touch and warmth.
✨ Use emojis: Makes your overlay more expressive and lively.

📝 Simple & Ready-to-Use HTML Example

<html>
<head>
  <style>
    body {
      margin: 0;
      font-family: sans-serif;
      color: white;
      background: none; /* Keep transparent */
    }
    .container {
      padding: 16px;
      background: #222;
      border-radius: 8px;
      text-align: center;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    h2 {
      margin-top: 0;
      color: #FFD700;
    }
    p {
      margin-bottom: 5px;
    }
    .message-text {
      font-style: italic;
      color: #CCCCCC;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>🎉 Thank you very much, {{gifterName}}!</h2>
    <p>You just gave {{formatedamount}}</p>
    <p class="message-text">"{{message}}"</p>
  </div>
</body>
</html>

This example creates a centered box with a dark theme, soft edges, and formatted text.

🚫 Things to Avoid

❌ Avoid vh, vw, and position: absolute — They break responsive layout.
❌ No complex JavaScript — Stick to HTML and CSS for compatibility.
❌ Avoid heavy graphics or bloated code — Keep it fast and lightweight.
❌ Do not include forms or buttons — Overlays are for display only.

ℹ️ Info: Labels You Might See

Some overlays will include automatic system labels. Don’t worry—they’re normal:

⚠️ "This is a test message": When previewing/testing your overlay.
ℹ️ "Replay reward": When replaying support messages.
⛔ "Sent by Admin": When the message comes from the platform’s admin.

These labels are not part of your custom code and cannot be removed.

✅ Ready To Try? Follow These Steps!

Login to Your Creator Dashboard
Go to the "Overlays" Menu
Choose the Type of Overlay You Want to Customize
Change the Theme to "Custom HTML"
Paste Your HTML Code
Preview the Results

🎉 A simple, personal touch often leaves the deepest impression. Good luck and have fun creating your overlay!

Updated on: 02/07/2025

Was this article helpful?

Thank you!