Ein Discord Embed kann, was eine reine Textnachricht nicht kann: Es verwandelt Informationen in eine aufgeräumte Karte mit farbigem Seitenstreifen, Titel, Feldern, Thumbnail und Footer. Wenn dein Bot auf einen Befehl mit dieser schicken Karte statt mit rohem Text antwortet, finden alle auf dem Server die Nachricht sofort lesbarer und professioneller. In diesem Leitfaden bauen wir Schritt für Schritt die Verwendung von Farbe, Feldern und Thumbnail mit der Klasse EmbedBuilder aus discord.js v14 auf.
Was ist ein Embed und wann nutzt man es?
Ein Embed ist ein strukturierter Block, den Discord innerhalb einer Nachricht darstellt. Die Vorschaukarte, die automatisch erscheint, wenn du einen Link teilst, ist ebenfalls ein Embed; Bots bauen diese Karte einfach von Hand. Gute Einsatzorte für Embeds:
- Befehlsausgaben: Daten, die sich in Felder aufteilen, etwa ein Benutzerprofil, Serverstatistiken oder das Wetter.
- Logs und Benachrichtigungen: Farbe nutzen, um „Erfolg / Warnung / Fehler" zu kennzeichnen.
- Ankündigungen: auffällige Nachrichten mit Titel, Beschreibung und Bild.
Für einzeilige Antworten ist ein Embed überflüssig; reiner Text liest sich schneller. Greife zum Embed, wenn die Information wirklich von Struktur profitiert.
Dein erstes Embed mit EmbedBuilder
In discord.js v14 werden Embeds über EmbedBuilder mit verketteten Methoden aufgebaut. Ein einfaches Beispiel:
const { EmbedBuilder } = require('discord.js');
const embed = new EmbedBuilder()
.setColor(0x5865F2)
.setTitle('Server-Info')
.setDescription('Unten findest du eine Zusammenfassung des Servers.')
.setTimestamp();
await interaction.reply({ embeds: [embed] });
Beachte: Das Embed wird innerhalb des embeds-Arrays der Nachricht gesendet, nicht als roher String. Eine einzelne Nachricht kann bis zu 10 Embeds enthalten, aber meist genügt eines.
Farbe: drücke deine Marke mit einem Ton aus
Die Farbe ist der vertikale Balken am linken Rand des Embeds und legt den „Ton" der Nachricht auf einen Blick fest. setColor akzeptiert mehrere Formate:
const { Colors } = require('discord.js');
embed.setColor(0x57F287); // Hex-Zahl (grün)
embed.setColor('#ED4245'); // Hex-String (rot)
embed.setColor([88, 101, 242]); // RGB-Array (Discord-Blurple)
embed.setColor(Colors.Gold); // eingebaute Farbkonstante
embed.setColor('Random'); // jedes Mal eine zufällige Farbe
Eine praktische Konvention: Grün = Erfolg, Gelb = Warnung, Rot = Fehler, Marken-Blurple = neutrale Info. Deine Farben in einem einzigen Objekt zu sammeln sorgt für Konsistenz:
const COLORS = { success: 0x57F287, warn: 0xFEE75C, error: 0xED4245 };
embed.setColor(COLORS.success);
Felder: Daten in saubere Spalten aufteilen
Felder sind der mächtigste Teil eines Embeds: Jedes trägt einen name (Titel) und einen value (Wert). Setze inline: true und die Felder reihen sich nebeneinander; Discord zeigt höchstens drei Inline-Felder pro Zeile.
embed.addFields(
{ name: 'Mitglieder', value: '1.248', inline: true },
{ name: 'Kanäle', value: '37', inline: true },
{ name: 'Erstellt', value: '12. März 2021', inline: true },
{ name: 'Über', value: 'Der Hauptserver der Community.', inline: false },
);
Wenn du Dinge mit einer leeren Zelle ausrichten möchtest, nutze eine unsichtbare Überschrift:
embed.addFields({ name: '', value: '', inline: true });
Das Zeichen oben ist ein Leerzeichen mit Breite null; da Discord einen leeren name oder value ablehnt, ist dies der gängige Trick.
Thumbnail, Bild, Author und Footer
Die übrigen Teile runden das Embed ab. Das Thumbnail ist das kleine quadratische Bild oben rechts; das Image ist das große Bild unten. Der Author zeigt ganz oben einen kleinen Titel plus Icon, während der Footer ganz unten eine kleine Notiz bietet.
embed
.setAuthor({
name: 'Aslain Bot',
iconURL: 'https://example.com/bot.png',
url: 'https://aslain.dev',
})
.setThumbnail('https://example.com/avatar.png')
.setImage('https://example.com/banner.png')
.setFooter({ text: 'aslain.dev', iconURL: 'https://example.com/icon.png' });
Für Bilder kannst du eine externe URL verwenden oder eine mit dem Bot hochgeladene Datei über das Schema attachment:// referenzieren:
const { AttachmentBuilder } = require('discord.js');
const file = new AttachmentBuilder('./avatar.png', { name: 'avatar.png' });
embed.setThumbnail('attachment://avatar.png');
await interaction.reply({ embeds: [embed], files: [file] });
Achte auf die Limits
Discord erzwingt strenge Zeichenlimits für Embeds. Überschreitest du sie, lehnt die API die Nachricht ab und der Bot schlägt stillschweigend fehl. Die wichtigsten:
- title: 256 Zeichen
- description: 4096 Zeichen
- Anzahl der Felder: bis zu 25 (name 256, value 1024 Zeichen)
- footer.text: 2048, author.name: 256 Zeichen
- Gesamtsumme aller Texte in einem Embed: 6000 Zeichen
Wenn du Benutzereingaben in ein Embed einfügst, sichere die Werte ab, indem du sie mit etwa slice(0, 1024) kürzt; sonst kann eine einzige lange Nachricht die gesamte Antwort zerstören.
Häufige Fragen
Warum EmbedBuilder statt MessageEmbed?
In discord.js v13 hieß die Klasse MessageEmbed. v14 hat sie in EmbedBuilder umbenannt und addField (Singular) zugunsten von addFields (Plural) entfernt. Verwende in neuen Projekten immer die v14-Namen; ältere Beispiele wörtlich zu kopieren führt zu Fehlern.
Kann ich Nutzer die Embed-Farbe wählen lassen?
Ja. Füge deinem Slash-Befehl eine Option hinzu und gib den eingehenden Hex-Wert an setColor weiter. Validiere die Eingabe aber zuerst: Ein ungültiger Wert wirft einen Fehler, also füge eine Prüfung wie /^#?[0-9a-f]{6}$/i hinzu.
Sehen Embeds für alle gleich aus?
Die Struktur ist identisch, aber es gibt kleine visuelle Unterschiede zwischen hellem/dunklem Theme und Mobil/Desktop. Es lohnt sich, auf dem Handy zu testen, dass deine Thumbnail- und Bildgrößen nicht überlaufen.
Willst du, dass die Nachrichten deines Bots zu deiner Marke passen? Vom Embed-Design bis zur Befehlsarchitektur können wir deinen Discord-Bot gemeinsam bauen. Nimm Kontakt auf, um über dein Projekt zu sprechen.