เด้งรูปขึ้นจอ ไม่ว่าจะเป็นภาพของขวัญ/อีโมต ไฟล์ที่อัปโหลด หรือ URL ใดก็ได้ และหายไปเองหลังไม่กี่วินาที

// Show an image, then fade it out
TE.on('gift', function (ev) {
  var img = document.createElement('img');
  img.src = ev.gift.image;                 // ← any image URL works
  img.style.cssText = 'position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:60%';
  document.body.appendChild(img);
  setTimeout(function () { img.remove(); }, 4000);   // ← how long it stays
});

เล่นเสียงเมื่อเกิดอีเวนต์ เปิดการตั้งค่าเสียงไว้ให้สตรีมเมอร์เลือกไฟล์เองได้ โดยไม่ต้องแก้โค้ด

// Play a sound the streamer chose in settings
var s = TE.defineSettings([{ key: 'sfx', label: 'Alert sound', type: 'sound', default: '' }]);
TE.on('settings', function (ns) { s = ns; });
TE.on('gift', function (ev) {
  if (s.sfx) { var a = new Audio(s.sfx); a.volume = 0.8; a.play(); }
});

เขียนข้อความแบบไดนามิกและเล่นแอนิเมชัน CSS ซ้ำด้วยการสลับคลาส

// Announce the event with a CSS pop animation
var box = document.getElementById('box');   // your element in the HTML tab
TE.on('follow', function (ev) {
  box.textContent = ev.user.name + ' followed!';
  box.classList.remove('pop'); void box.offsetWidth; box.classList.add('pop');
});

ผูกตัวเลขบนจอกับค่าสด เช่น ผู้ชม ไลก์ เหรียญ ผู้ติดตาม อัปเดตอัตโนมัติ

// Keep a number in sync with the live stream
TE.on('metrics', function (m) {
  document.getElementById('count').textContent = m.viewers.toLocaleString();
});

อ่านอีเวนต์ออกเสียงด้วยระบบแปลงข้อความเป็นเสียงของเบราว์เซอร์ เหมาะสำหรับชาวต์เอาต์ของขวัญหรือผู้ติดตาม

// Text-to-speech shout-out
TE.on('gift', function (ev) {
  var u = new SpeechSynthesisUtterance(ev.user.name + ' sent ' + ev.gift.name);
  speechSynthesis.speak(u);
});

ทุกวิดเจ็ตโชว์ตัวเองในแกลเลอรีและตัวสร้าง: ตัวอย่างที่ดูเหมือนอีเวนต์จริง พร้อมภาพของขวัญ ชื่อ และรูปโปรไฟล์จริง ตอนไลฟ์ TE.demo เป็น false และจะแสดงเฉพาะอีเวนต์จริง

// Preview samples through the real code path. Never on a live overlay.
if (TE.demo) {
  var GIFTS = [
    { name: 'Rose', coins: 1, image: 'https://p16-webcast.tiktokcdn.com/img/maliva/webcast-va/eba3a9bb85c33e017f3648eaf88d7189~tplv-obj.png' },
    { name: 'Perfume', coins: 20, image: 'https://p16-webcast.tiktokcdn.com/img/maliva/webcast-va/20b8f61246c7b6032777bb81bf4ee055~tplv-obj.png' }
  ];
  var NAMES = ['lunaa', 'nightowl_gaming_official'], n = 0;
  function sample() {
    n++;
    onGift({ user: { name: NAMES[n % 2], avatar: window.__TE_AVATAR }, gift: GIFTS[n % 2] });
  }
  sample();
  setInterval(sample, 6000);
}

การเก็บข้อมูลแบบ synchronous อย่างง่ายสำหรับสถานะที่แสดงผล ใช้รันไทม์แบบธุรกรรมสำหรับผู้เข้าร่วม การซื้อ และคะแนนที่ใช้ร่วมกัน

// Persistent state: survives OBS reloads
var total = TE.store.get('total', 0);          // read (with default)
TE.on('gift', function (ev) {
  total += ev.gift.coins;
  TE.store.set('total', total);                 // write (auto-saved)
  render();
});

คำสั่งแชตแบบตรงทุกตัวอักษรร่วมกับคอลเลกชันแบบ atomic ทำให้การลงชื่อ โหวต และหมุนวงล้อปลอดภัย

// One server-authoritative entry per viewer.
// A function keyword reads s.command on every message, so the
// streamer can change the command in settings without a reload.
TE.onCommand(function () { return s.command || '!join'; }, function (c) {
  TE.collection.join('entrants', c.user.id, c.user).then(function (result) {
    if (result.joined) renderCount(result.count);
  });
});

ขอแจ้งเตือนโอเวอร์เลย์ เสียง TTS ตัวนับ เวลา Subathon หรือสลับฉาก OBS ได้โดยตรงจากวิดเจ็ต

// One call, one stream action
TE.act({ id: 'tts', message: 'New high score!' });
TE.act({ id: 'points', user: ev.user, amount: 50 });

ตรวจ ใช้ หรือให้แต้มสะสมแบบธุรกรรม และรับยอดคงเหลือที่ได้

// Only spin after the points were really debited
TE.onCommand(function () { return s.command || '!spin'; }, function (ev) {
  TE.points.trySpend(ev.user, 50, 'Wheel spin').then(function (result) {
    if (result.ok) spin();
    else showMissing(result.missing);
  });
});

สถานะแบบ atomic คอลเลกชัน การสุ่มที่ปลอดภัย cooldown และตัวจับเวลาที่คงอยู่ ปลอดภัยแม้มี browser source ซ้ำกัน

// Fair draw from a server-owned entrant collection
TE.random.draw('entrants', { count: 1 }).then(function (result) {
  if (result.ok) reveal(result.winners[0].value);
});

เปิดให้ปรับข้อความ สี ตัวเลข สวิตช์ สตรีมเมอร์ปรับได้สดในตัวแก้ไขโอเวอร์เลย์ ไม่ต้องใช้โค้ด

// No-code controls for whoever uses the widget
var s = TE.defineSettings([
  { key: 'title',  label: 'Title', type: 'text',  default: 'Goal' },
  { key: 'accent', label: 'Color', type: 'color', default: '#FF2E4D' },
]);
document.body.style.setProperty('--accent', s.accent);
TE.on('settings', function (ns) { s = ns; /* re-render with new values */ });