You need to link your Twitch account to publish widgets.
Note: The widget is isolated in a secure sandbox.
Loading your projects...
Widgets are rendered inside a sandbox. The standard size is approximately 400x400 pixels.
All uploads are analyzed by an AI and reviewed by human moderators. Do NOT include:
<script src="...">). All logic must be included in the raw upload.The Starchat Bridge allows your widget to securely communicate with the desktop app. Receive live events and make HTTP requests safely.
The API is automatically injected into your widget. It is not available in the Web Preview.
var api = window.starchatWidgetApi;
if (!api) return; // Runs outside Starchatapi.subscribe(['USER_INFO', 'CURRENT_CHANNEL', 'NEW_MESSAGES']);
api.on('NEW_MESSAGES', function(data) {
data.messages.forEach(msg => console.log(msg.user + ':', msg.message));
});| Topic | Description | Payload |
|---|---|---|
USER_INFO | Logged-in user | { username, userId, profileImage... } |
CURRENT_CHANNEL | Active channel | { channel: string } |
CHATTERLIST | Active viewers | { viewers: [...] } |
NEW_MESSAGES | Live chat feed | { messages: [{ user, message, color }] } |
Bypass CSP/CORS blocks by letting the Starchat app execute your requests.
api.fetch('https://api.example.com/data')
.then(res => console.log(JSON.parse(res)))
.catch(err => console.error(err.message));Die Starchat Bridge ermöglicht es deinem Widget, sicher mit der Desktop-App zu kommunizieren. Empfange Live-Events und mache sichere HTTP-Anfragen.
Die API wird von der App injiziert. Im Web-Preview ist sie nicht verfügbar.
var api = window.starchatWidgetApi;
if (!api) return; // Läuft außerhalb von Starchatapi.subscribe(['USER_INFO', 'CURRENT_CHANNEL', 'NEW_MESSAGES']);
api.on('NEW_MESSAGES', function(data) {
data.messages.forEach(msg => console.log(msg.user + ':', msg.message));
});| Topic | Beschreibung | Payload |
|---|---|---|
USER_INFO | Eingeloggter User | { username, userId, profileImage... } |
CURRENT_CHANNEL | Aktiver Channel | { channel: string } |
CHATTERLIST | Aktive Viewer | { viewers: [...] } |
NEW_MESSAGES | Live Chat-Feed | { messages: [{ user, message, color }] } |
Umgehe CSP/CORS-Blockaden, indem du die Starchat-App deine Anfragen ausführen lässt.
api.fetch('https://api.example.com/data')
.then(res => console.log(JSON.parse(res)))
.catch(err => console.error(err.message));Die Starchat Bridge ermöglicht es deinem Widget, sicher mit der Desktop-App zu kommunizieren. Du kannst Live-Events aus dem Twitch-Chat empfangen und sichere HTTP-Anfragen durchführen.
Die API wird von der Starchat-App automatisch in dein Widget injiziert. Du greifst über das window-Objekt darauf zu. Im Web-Preview ist die API nicht verfügbar.
var api = window.starchatWidgetApi;
if (!api) {
console.log("Widget runs outside of Starchat.");
}Um Echtzeit-Daten zu empfangen, musst du die gewünschten Topics abonnieren und einen Event-Listener registrieren.
// 1. Subscribe to topics
api.subscribe(['USER_INFO', 'CURRENT_CHANNEL', 'NEW_MESSAGES']);
// 2. Listen for incoming data
api.on('NEW_MESSAGES', function(data) {
data.messages.forEach(msg => {
console.log(`${msg.user} says: ${msg.message}`);
});
});| Event Topic | Description | Payload Structure |
|---|---|---|
USER_INFO |
Daten des eingeloggten App-Users | { username, userId, profileImage, sevenTvId } |
CURRENT_CHANNEL |
Der Channel, der gerade geschaut wird | { channel: string } |
CHATTERLIST |
Liste aller aktiven Viewer | { viewers: [{ username, roles }] } |
NEW_MESSAGES |
Live-Feed der neuen Chat-Nachrichten | { messages: [{ user, message, color }] } |
Aufgrund strenger Content Security Policies (CSP) können Widgets keine direkten fetch() Anfragen an fremde Domains stellen. Nutze stattdessen api.fetch(). Die Starchat-App führt die Anfrage für dich aus und umgeht CORS-Probleme.
api.fetch('https://api.example.com/data', {
method: 'GET',
headers: { 'Accept': 'application/json' }
})
.then(responseText => {
const data = JSON.parse(responseText);
console.log(data);
})
.catch(error => {
console.error("Fetch failed:", error.message);
});