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:
Top comments (34)
This is cool, +1!
Hey im having a problem with including fields, when i try to use them and i run the code it doesnt show the field(s), it doesnt return any error, but it runs everything else fine. Im not sure if im putting it in wrong or somthing else.
here is my code: pastebin.com/5KCc1ET7
So I took a look at your code and it seems fine, so I think the issue is in the Webhook endpoint URL. Check if you’ve got it correct, because browsing to that URL returns a 'Unknown Webhook' response.
Yeah i have the webhook url correct because when i run the code it sends the all of the other data, but it doesnt send the field. picture below of what the code i sent shows:
cdn.discordapp.com/attachments/945...
Also if you dont mind can you send me an example of code that successfully sends the field, Thanks.
i use fileds and its not working
Okay and? Please develop your question if you need help.
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
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.
if I host a server and build this discord bot, can this read messages from other channels of which I am not the admin?
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
For fields, I do not want a value, what would I place there instead?
Every property of the embed object is optional, so you can just remove the
fields
array if you don’t want it.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.Waw
Hello !
How can I include the forms informations on the webhook ?
Thank you for help !
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:
i dont understand it at all
it doesn't work for me at all, not showing signs of life. Only the one without color works in the first tutorial.
Hello @BoiDevis just change
color: hexToDecimal("#ff0000")
withcolor : 16711680
@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:
I created a page of my site where I tried to integrate all the functions -> mmmm.world-heberg.com/webhook/ (in french)
Your link is expired.
it doesn't work for me the embed
Does the browser console return any error ?
i gave up on it, so i'm using discohook instead, it makes things easier for me
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.
Hello @oskarcodes I found the issue.
We can't use
color: hexToDecimal("#ff0000")
, instead we have to use decimal code so just changecolor: hexToDecimal("#ff0000")
withcolor : 16711680
Probably you have other script to execute that
hexToDecimal
command.Hope it helps
Oh well yeah the hexTodecimal function is just this:
hello how can i add reaction to my embed message?
That isn’t possible using Webhooks. Use discord bots instead. However for that you’ll need to host a server.