Articles on: Overlay
This article is also available in:

How to Create Custom Overlay

Do you want your stream to look even better with custom overlays? Custom overlays are like a blank canvas for you to get creative with HTML. You can create special messages, fun animations, or branding that makes people immediately remember you!

What are the types of customizable overlays?


  1. Alert (Does not include media such as Voice Note or GIF)
  2. Media Share (Only message part, media/video part and progress bar cannot be customized)
  3. Leaderboard
  4. Timer (Will be re-rendered every time the time changes)
  5. Soundboard
  6. Milestone
  7. Polling
  8. Running Text

HTML Code Writing Tips


  1. Use standard HTML structure: Always start with <html>, <head>, and <body>.
  2. Don't use position: absolute in CSS Body: Make sure the body has a definite height because the Tako overlay system will detect the body size, if the body size cannot be detected, the overlay will not display because the Tako overlay system considers the body height to be 0px if the body uses absolute position.
  3. Use flexible size: Use px, rem, or em for fonts or elements. Don't Use vh or vw.
  4. Get used to using the size rem because it is easy to scale through the font size settings in the overlay settings dashboard.
  5. Always test on the dashboard to make it look as expected.



Variables for Each Overlay

Each overlay has variables that you can use to make it look dynamic without manual editing. Here's a complete list, including supported overlays and usage examples:


Make sure there are no spaces between the curly braces and the variable name!


1. Alert & Mediashare

Variable Name

Example Output

Description

{{amount}}

15000

Donation amount (raw number).

{{formattedAmount}}

Rp15,000

Formatted donation amount (based on currency).

{{message}}

Keep rocking the stream!

Donor’s message.

{{gifterName}}

BudiGaming

Donor’s name.

{{gifterPicture}}

https://example.com/profile.jpg

URL to donor’s profile picture.

{{gifterBadges}}

VIP,TopDonator

Donor’s badges, comma-separated.

{{isGifterVerified}}

true or false

Donor’s verification status (true if verified).


Example Code:

<html>
<head>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      color: white;
      background: none;
    }
    .box {
      padding: 16px;
      background: #333;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    h2 {
      margin: 0;
      color: #FFDD00;
    }
    p {
      margin: 5px 0;
    }
    .message {
      font-style: italic;
      color: #BBBBBB;
    }
    img {
      width: 50px;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="{{gifterPicture}}" alt="Profile">
    <h2>🎉 Thanks, {{gifterName}}!</h2>
    <p>Donation: {{formattedAmount}}</p>
    <p class="message">"{{message}}"</p>
  </div>
</body>
</html>



2. Leaderboard

Variable Name

Example Output

Description

{{title}}

Top Donors This Month

Leaderboard title set in settings.

{{rankings}}

[{"name":"BudiGaming","picture":"https://example.com/profile.jpg","badges":"VIP,TopDonator","amount":15000,"formattedAmount":"Rp15,000"}, ...]

JSON list of rankings with name, picture, badges, donation amount, and formatted amount.


Example Code:

<html>
<head>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      color: white;
      background: none;
    }
    .box {
      padding: 16px;
      background: #333;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    h2 {
      margin: 0;
      color: #FFDD00;
    }
    p {
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <div class="box">
    <h2>{{title}}</h2>
    <div id="ranking-list"></div>
    <script>
      const rankings = JSON.parse('{{rankings}}');
      const list = rankings.map(r => `<p>${r.name}: ${r.formattedAmount}</p>`).join('');
      document.getElementById('ranking-list').innerHTML = list;
    </script>
  </div>
</body>
</html>



3. Milestone

Variable Name

Example Output

Description

{{title}}

100K Donation Goal

Milestone title from settings.

{{currentAmount}}

75000

Current donation amount (raw number).

{{formattedCurrentAmount}}

Rp75,000

Current donation amount, formatted.

{{targetAmount}}

100000

Target donation amount (raw number).

{{formattedTargetAmount}}

Rp100,000

Target donation amount, formatted.

{{startAt}}

2025-07-08

Milestone start date.

{{startTime}}

09:30

Milestone start time.


Example Code:

<html>
<head>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      color: white;
      background: none;
    }
    .box {
      padding: 16px;
      background: #333;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    h2 {
      margin: 0;
      color: #FFDD00;
    }
    p {
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <div class="box">
    <h2>{{title}}</h2>
    <p>Progress: {{formattedCurrentAmount}} / {{formattedTargetAmount}}</p>
    <p>Started: {{startAt}} {{startTime}}</p>
  </div>
</body>
</html>



4. Polling

Variable Name

Example Output

Description

{{title}}

Pick the Next Game!

Poll title from settings.

{{pollingOptions}}

[{"id":1,"name":"Game A","totalAmount":5000,"formattedTotalAmount":"Rp5,000"}, ...]

JSON list of poll options with ID, name, donation amount, and formatted amount.

{{startAt}}

2025-07-08

Poll start date.

{{startTime}}

09:30

Poll start time.

{{endAt}}

2025-07-08

Poll end date.

{{endTime}}

12:30

Poll end time.


Example Code:

<html>
<head>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      color: white;
      background: none;
    }
    .box {
      padding: 16px;
      background: #333;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    h2 {
      margin: 0;
      color: #FFDD00;
    }
    p {
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <div class="box">
    <h2>{{title}}</h2>
    <div id="poll-options"></div>
    <p>Start: {{startAt}} {{startTime}} | End: {{endAt}} {{endTime}}</p>
    <script>
      const options = JSON.parse('{{pollingOptions}}');
      const list = options.map(o => `<p>${o.name}: ${o.formattedTotalAmount}</p>`).join('');
      document.getElementById('poll-options').innerHTML = list;
    </script>
  </div>
</body>
</html>



5. Running Text

Variable Name

Example Output

Description

{{texts}}

[{"title":"Welcome!","backgroundColor":"#333","textColor":"#FFF"}, ...]

JSON list of additional texts with title, background color, and text color.

{{gifts}}

[{"gifterName":"BudiGaming","amount":15000,"formattedAmount":"Rp15,000"}, ...]

JSON list of donations with donor name, amount, and formatted amount.


Example Code:

<html>
<head>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      color: white;
      background: none;
    }
    .box {
      padding: 16px;
      background: #333;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    #running-text span {
      margin-right: 20px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div id="running-text"></div>
    <script>
      const texts = JSON.parse('{{texts}}');
      const gifts = JSON.parse('{{gifts}}');
      const content = [
        ...texts.map(t => `<span style="background:${t.backgroundColor};color:${t.textColor}">${t.title}</span>`),
        ...gifts.map(g => `<span>${g.gifterName}: ${g.formattedAmount}</span>`)
      ].join(' | ');
      document.getElementById('running-text').innerHTML = content;
    </script>
  </div>
</body>
</html>



6. Soundboard

Variable Name

Example Output

Description

{{amount}}

15000

Donation amount (raw number).

{{formattedAmount}}

Rp15,000

Formatted donation amount.

{{soundName}}

Explosion

Name of the triggered sound effect.

{{gifterName}}

BudiGaming

Donor’s name.

{{gifterPicture}}

https://example.com/profile.jpg

URL to donor’s profile picture.

{{gifterBadges}}

VIP,TopDonator

Donor’s badges, comma-separated.

{{isGifterVerified}}

true or false

Donor’s verification status (true if verified).


Example Code:

<html>
<head>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      color: white;
      background: none;
    }
    .box {
      padding: 16px;
      background: #333;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    h2 {
      margin: 0;
      color: #FFDD00;
    }
    p {
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <div class="box">
    <h2>{{gifterName}} played {{soundName}}!</h2>
    <p>Donation: {{formattedAmount}}</p>
  </div>
</body>
</html>



7. Timer

Variable Name

Example Output

Description

{{title}}

Event Starts!

Timer title from settings.

{{timeLeft}}

05:30

Remaining time in MM:SS format (or 00:00 if done).

{{isEnabled}}

true or false

Timer status (true if active).

{{options}}

[{"durationAdded":300000,"minimumGiftAmount":10000}, ...]

JSON list of timer options with added duration (in milliseconds) and minimum donation amount.


Example Code:

<html>
<head>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      color: white;
      background: none;
    }
    .box {
      padding: 16px;
      background: #333;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    h2 {
      margin: 0;
      color: #FFDD00;
    }
    p {
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <div class="box">
    <h2>{{title}}</h2>
    <p>Time Left: {{timeLeft}}</p>
    <p>Status: {{isEnabled}}</p>
  </div>
</body>
</html>



Additional Information that May Appear


  • “⚠ This is a test message ”: Appears when the overlay is in test or preview.
  • “⛔ Sent by Admin ”: Appears when the reward is sent by Tako team/admin.


How to Implement/Create Custom Overlays


  1. Log in Creator Dashboard
  2. Find the “Overlays” menu on the left side
  3. Select Overlay (example: Alert)
  4. In the “Theme” section, change it to “Custom HTML ”.
  5. Copy-paste the code you have created into the column/textarea that appears.
  6. Check Preview at the top.

Updated on: 29/07/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!