Discord embed-ontwerp: strakke berichten met EmbedBuilder

Een Discord embed doet wat een gewoon tekstbericht niet kan: het verandert informatie in een nette kaart met een gekleurde zijbalk, een titel, velden, een thumbnail en een footer. Wanneer je bot op een commando reageert met deze strakke kaart in plaats van met ruwe tekst, vindt iedereen op de server het bericht meteen leesbaarder en professioneler. In deze gids bouwen we stap voor stap het gebruik van kleur, velden en thumbnail op met de EmbedBuilder-klasse uit discord.js v14.

Wat is een embed en wanneer gebruik je er een?

Een embed is een gestructureerd blok dat Discord binnen een bericht weergeeft. De voorbeeldkaart die automatisch verschijnt als je een link deelt is ook een embed; bots bouwen die kaart simpelweg met de hand. Goede plekken om embeds te gebruiken:

• Commando-uitvoer: gegevens die uiteenvallen in velden, zoals een gebruikersprofiel, serverstatistieken of het weer.
• Logs en meldingen: kleur gebruiken om "succes / waarschuwing / fout" aan te geven.
• Aankondigingen: opvallende berichten met een titel, beschrijving en afbeelding.

Voor antwoorden van één regel is een embed overdreven; platte tekst leest sneller. Gebruik een embed wanneer de informatie er echt baat bij heeft om gestructureerd te zijn.

Je eerste embed met EmbedBuilder

In discord.js v14 worden embeds opgebouwd via EmbedBuilder met geketende methoden. Een basisvoorbeeld:

const { EmbedBuilder } = require('discord.js');

const embed = new EmbedBuilder()
  .setColor(0x5865F2)
  .setTitle('Serverinfo')
  .setDescription('Hieronder staat een samenvatting van de server.')
  .setTimestamp();

await interaction.reply({ embeds: [embed] });

Let op: de embed wordt verstuurd binnen de embeds-array van het bericht, niet als ruwe string. Eén bericht kan maximaal 10 embeds bevatten, maar meestal is er één voldoende.

Kleur: druk je merk uit met één tint

Kleur is de verticale balk aan de linkerrand van de embed en bepaalt in één oogopslag de "toon" van het bericht. setColor accepteert meerdere formaten:

const { Colors } = require('discord.js');

embed.setColor(0x57F287);         // hex-getal (groen)
embed.setColor('#ED4245');        // hex-string (rood)
embed.setColor([88, 101, 242]);   // RGB-array (Discord blurple)
embed.setColor(Colors.Gold);      // ingebouwde kleurconstante
embed.setColor('Random');         // elke keer een willekeurige kleur

Een handige conventie: groen = succes, geel = waarschuwing, rood = fout, merk-blurple = neutrale info. Je kleuren in één object verzamelen houdt het consistent:

const COLORS = { success: 0x57F287, warn: 0xFEE75C, error: 0xED4245 };
embed.setColor(COLORS.success);

Velden: verdeel gegevens in nette kolommen

Velden zijn het krachtigste deel van een embed: elk veld draagt een name (titel) en een value (waarde). Zet inline: true en de velden komen naast elkaar te staan; Discord toont maximaal drie inline-velden per rij.

embed.addFields(
  { name: 'Leden', value: '1.248', inline: true },
  { name: 'Kanalen', value: '37', inline: true },
  { name: 'Aangemaakt', value: '12 maart 2021', inline: true },
  { name: 'Over', value: 'De hoofdserver van de community.', inline: false },
);

Wil je dingen uitlijnen met een lege cel, gebruik dan een onzichtbare kop:

embed.addFields({ name: '​', value: '​', inline: true });

Het teken hierboven is een spatie met breedte nul; omdat Discord een lege name of value weigert, is dit de truc die men gebruikt.

Thumbnail, afbeelding, auteur en footer

De overige onderdelen maken de embed compleet. De thumbnail is de kleine vierkante afbeelding rechtsboven; de image is de grote afbeelding onderaan. De author toont een kleine titel plus icoon helemaal bovenaan, terwijl de footer een kleine notitie helemaal onderaan biedt.

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' });

Voor afbeeldingen kun je een externe URL gebruiken, of verwijzen naar een bestand dat je met de bot uploadt via het attachment://-schema:

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] });

Let op de limieten

Discord legt strikte tekenlimieten op aan embeds. Overschrijd je ze, dan weigert de API het bericht en faalt de bot stilletjes. De belangrijkste:

• title: 256 tekens
• description: 4096 tekens
• aantal velden: maximaal 25 (name 256, value 1024 tekens)
• footer.text: 2048, author.name: 256 tekens
• totaal van alle tekst in één embed: 6000 tekens

Als je gebruikersinvoer in een embed plaatst, maak de waarden dan veilig door ze in te korten met bijvoorbeeld slice(0, 1024); anders kan één lang bericht het hele antwoord breken.

Veelgestelde vragen

Waarom EmbedBuilder in plaats van MessageEmbed?

In discord.js v13 heette de klasse MessageEmbed. v14 hernoemde die naar EmbedBuilder en verwijderde addField (enkelvoud) ten gunste van addFields (meervoud). Gebruik in nieuwe projecten altijd de v14-namen; oudere voorbeelden letterlijk kopiëren levert fouten op.

Kan ik gebruikers de embed-kleur laten kiezen?

Ja. Voeg een optie toe aan je slash-commando en geef de binnenkomende hex-waarde door aan setColor. Valideer de invoer wel eerst: een ongeldige waarde gooit een fout, dus voeg een controle toe zoals /^#?[0-9a-f]{6}$/i.

Zien embeds er voor iedereen hetzelfde uit?

De structuur is identiek, maar er zijn kleine visuele verschillen tussen licht/donker thema en mobiel/desktop. Het is verstandig om op mobiel te testen of je thumbnail- en afbeeldingsformaten niet over de rand lopen.

Wil je dat de berichten van je bot bij je merk passen? Van embed-ontwerp tot commando-architectuur kunnen we je Discord-bot samen bouwen. Neem contact op om over je project te praten.