DEV Community

loading...

Discord Embed Send automated Discord messages through Webhooks using JavaScript (Part 2 - Embeds)

Oskar Codes
I’m Oskar Zanota, a 16 year old amateur web and game developer based in Zurich, Switzerland.
Updated on ・3 min read

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:
Discord Embed Example

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...
  ]
}
Enter fullscreen mode Exit fullscreen mode

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)
}
Enter fullscreen mode Exit fullscreen mode

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")
}
Enter fullscreen mode Exit fullscreen mode

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 ]
}
Enter fullscreen mode Exit fullscreen mode

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)
}
Enter fullscreen mode Exit fullscreen mode

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:
Discord embed example

Discussion (25)

Collapse
kobulwidodo profile image
kobulwidodo

i use fileds and its not working

Collapse
oskarcodes profile image
Oskar Codes Author

Okay and? Please develop your question if you need help.

Collapse
trades4x profile image
Abhay

Can the webhook be used to read the message in a channel? I am a subscriber but not the owner of the Discord Channel but want to be notified by SMS or Email when a new post appears in the channel

Thread Thread
oskarcodes profile image
Oskar Codes Author

That isn’t possible using Webhooks, as they are made to only send data in server channels, and not receive. However, you can setup a Discord Bot to read messages, but for that you’ll need to host a server.

Thread Thread
trades4x profile image
Abhay

if I host a server and build this discord bot, can this read messages from other channels of which I am not the admin?

Thread Thread
oskarcodes profile image
Oskar Codes Author • Edited

Yes absolutely, the only permission the bot needs is to be able to read messages from that channel, and if that permission is granted then it’ll work

Collapse
mmmm2006 profile image
Mmmm2006

Waw

Collapse
sakusuperball profile image
SakuSuperball

it doesn't work for me the embed

Collapse
oskarcodes profile image
Oskar Codes Author

Does the browser console return any error ?

Collapse
sakusuperball profile image
SakuSuperball

i gave up on it, so i'm using discohook instead, it makes things easier for me

Thread Thread
oskarcodes profile image
Oskar Codes Author

Oh yeah that's totally an option if you just want to send one specific Webhook message, but this post is about learning how to code that, which is useful if you want to integrate that to your own application, so your Webhook can send messages when events occur in it.

Thread Thread
pealco821103 profile image
Pedro Costa • Edited

Hello @oskarcodes I found the issue.

We can't use color: hexToDecimal("#ff0000"), instead we have to use decimal code so just change color: hexToDecimal("#ff0000") with color : 16711680

Probably you have other script to execute that hexToDecimal command.

Hope it helps

Thread Thread
oskarcodes profile image
Oskar Codes Author

Oh well yeah the hexTodecimal function is just this:

function hexToDecimal(hex) {
  return parseInt(hex.replace("#",""), 16)
}
Collapse
mmmm2006 profile image
Mmmm2006

I created a page of my site where I tried to integrate all the functions -> mmmm.world-heberg.com/webhook/ (in french)

Collapse
merlode profile image
Merlode

Your link is expired.

Collapse
dreamkickz1 profile image
DREAMKICKZ

For fields, I do not want a value, what would I place there instead?

Collapse
oskarcodes profile image
Oskar Codes Author

Every property of the embed object is optional, so you can just remove the fields array if you don’t want it.

Collapse
dreamkickz1 profile image
DREAMKICKZ

I have tried to remove the value, but when I save and send the webhook, the message does not appear in my server. I am not too sure what you mean by fields array.

Collapse
plug18343602 profile image
BoiDevis

it doesn't work for me at all, not showing signs of life. Only the one without color works in the first tutorial.

Collapse
pealco821103 profile image
Pedro Costa

Hello @BoiDevis just change color: hexToDecimal("#ff0000") with color : 16711680

Collapse
oskarcodes profile image
Oskar Codes Author • Edited

@plug18343602 yeah you can use a decimal color value like @pealco821103 said, but you can also include the hexToDecimal function if you want to use a HEX color code:

function hexToDecimal(hex) {
  return parseInt(hex.replace("#",""), 16)
}
Collapse
merlode profile image
Merlode

Hello !
How can I include the forms informations on the webhook ?
Thank you for help !

Collapse
oskarcodes profile image
Oskar Codes Author

You mean taking data from an HTML form and sending that in the webhook?
Well you first have to get the raw text that is in each input of that form, and put that in the webhook payload.
For example, if you have an input on your page and want to tell the webhook to send that as the embed description, you would do it like so:

description: document.querySelector("input").value
Collapse
kisaragiarya profile image
kisaragiarya

hello how can i add reaction to my embed message?

Collapse
oskarcodes profile image
Oskar Codes Author

That isn’t possible using Webhooks. Use discord bots instead. However for that you’ll need to host a server.