In a recent post, I explained how one could send messages on Discord through a Webhook using JavaScript XMLHttpRequests. In this post, I'm gonna continue on that topic by explaining how you can send cool embeds like this one:

This is done by specifying an array of embed objects in the XMLHttpRequest, that represent each embed to send, like so:

var params = {
  username: "My Webhook Name",
  avatar_url: "",
  content: "The message to send",
  embeds: [
    { /* embed 1 data */ },
    { /* embed 2 data */ },
    etc...
  ]
}

How the embed's data is structured

However, before jumping straight into the code, you'll first have to understand the embed data architecture that is required to correctly format a Discord embed.
Please note that all fields are optional. All you need to send a valid Discord message, is the content field, or at least one embed object.

• author: object containing data about the embed's author
  • name: name of the author
  • url: url of the author. name becomes a hyperlink
  • icon_url: url of author icon
• title: title of the embed
• url: url of the embed
• description: the body text of the embed
• fields: an array containing optional field objects
  • name: name of the field
  • value: value of the field
  • inline: if set to true, the fields will be displayed on the same line, but there can only be 3 max on the same line or 2 max if you specified a thumbnail
• thumbnail: object containing data about the embed's thumbnail
  • url: url of the thumbnail image
• image: object containing data about the embed's image
  • url: url of the image
• footer: object containing data about the embed's footer
  • text: footer text
  • icon_url: footer icon image url
• timestamp: embed's timestamp, formatted in ISO8601 format (yyyy-mm-ddThh:mm:ss.msZ)
• color: the embed's color code. You cannot use HEX, as it isn't supported. What you can do, is to convert your HEX code to a valid decimal numeral value, using the function below.

The following helper function converts a HEX code to a decimal numeral value, that can be used in the color field of an embed:

function hexToDecimal(hex) {
  return parseInt(hex.replace("#",""), 16)
}

How to format such data in JavaScript

This data tree can be easily created and manipulated in JavaScript, as all you have to do is create an embed object, and populate the fields with data, like so:

var myEmbed = {
  author: {
    name: "Captain Hook"
  },
  title: "My new embed",
  description: "This is a cool-looking Discord embed, sent directly from JavaScript!",
  color: hexToDecimal("#ff0000")
}

That embed has only a few object fields populated, as no field is required, but you can add more if you wish. Just check the field's name in the data tree above, and add it!

To send it, you can specify that object as the first element of the embed array in the XMLHttpRequest's data, like so:

var params = {
  username: "My Webhook Name",
  embeds: [ myEmbed ]
}

If you want multiple embeds in the same message, you can add additional embed objects to the embeds array.

And then to finally send your embed, you have to set up an XMLHttpRequest, just like in the previous tutorial:

var request = new XMLHttpRequest();
request.open("POST", "https://discordapp.com/api/webhooks/675812904469004338/82nx6cw6Tvx5edryjRgQhVJ4rPenfQTovyKcvAynyIxG0zy1AI0qP0qNSwpahx2TAJ0z");
// again, replace the url in the open method with yours
request.setRequestHeader('Content-type', 'application/json');

var myEmbed = {
  author: {
    name: "Captain Hook"
  },
  title: "My new embed",
  description: "This is a cool-looking Discord embed, sent directly from JavaScript!",
  color: hexToDecimal("#ff0000")
}

var params = {
  username: "My Webhook Name",
  embeds: [ myEmbed ]
}

request.send(JSON.stringify(params));

// function that converts a color HEX to a valid Discord color
function hexToDecimal(hex) {
  return parseInt(hex.replace("#",""), 16)
}

And there you go! If you followed each step carefully, you should get a cool embed popping up in your Discord channel, like this one: