DEV Community

Oskar Codes
Oskar Codes

Posted on • Updated on

Send automated Discord messages through Webhooks using JavaScript

I'm sure you've heard of Discord, the all-in-one voice and text chat app, and maybe you're even using it. Well did you know that it is possible to send automated messages in Discord servers directly from JavaScript? It's called Webhooks. Let's see how to easily set one up in order for you to integrate it with your app, or even just have fun sending custom messages.
This works by sending a post request with some JSON data to a unique URL Discord provides when you create your Webhook.

Create the Webhook

Discord provides a feature to create Webhooks, but note that it is only available in server channels, not in direct messages. To create a Webhook, click the cog next to the channel in which you wish to set up your Webhook:
channel settings

Then head to the Webhooks tab, and hit Create Webhook. You'll then be able to specify the name, which is the name that is used when sending messages if none is specifided in the JSON post request.
You can also adjust the channel, and add a default image. Again, that image can later be customized from the JSON post request.

Then at the bottom, you'll get the unique Webhook URL. Copy it and save it somewhere, as we will use it later.

Setup the JavaScript file

In order to send POST requests to your webhook, you'll have to set up some form of JavaScript environment in which you can execute code. In my case I'll just simply create a local HTML file that I'll name index.html. Inside it I'll create a basic button that executes the JavaScript function sendMessage().
Here's the code:



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Discord Webhook Tutorial</title>
  </head>
  <body>
    <button onclick="sendMessage()">Send</button>
  </body>
</html>


Enter fullscreen mode Exit fullscreen mode

Then I'll add a script tag in which I'll declare the sendMessage function:



<script>
  function sendMessage() {

  }
</script>


Enter fullscreen mode Exit fullscreen mode

Inside of that function I'll create a new XMLHttpRequest, and I'll save the return value in the request variable. The first parameter will be "POST", because we want to do a POST request to the Webhook. The second parameter is your Webhook URL, that you got when creating your Webhook. If you don't have it, go to your Webhook's settings, and copy it from there.

Please note that the URL specified below is the URL referencing my Discord channel, so you need to change it in order for the code to work in your Discord channel.

Your sendMessage function should look like this:



function sendMessage() {
      const request = new XMLHttpRequest();
      request.open("POST", "https://discordapp.com/api/webhooks/676118118082281513/ZS5YcWhurzokBrKX9NgexqtxrJA5Pu2Bo4i7_JsIxC-JIbPBVhSZkcVVukGOro52rnQA");
      // replace the url in the "open" method with yours
}


Enter fullscreen mode Exit fullscreen mode

Then I'll call the setRequestHeader method, and specify the "Content-type" to be "application/json" in order to indicate that what we're sending is JSON data, like so:



request.setRequestHeader('Content-type', 'application/json');


Enter fullscreen mode Exit fullscreen mode

Then, I'll declare a params object, containing the JSON data we want to send to our Webhook:



const params = {
    username: "My Webhook Name",
    avatar_url: "",
    content: "The message to send"
}


Enter fullscreen mode Exit fullscreen mode

If you don't specify a username or avatar, it will default to the one you chose when creating the Webhook. The content attribute can't be empty, otherwise the request will fail.

And then for the last step, we need to send the actual data, like so:



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


Enter fullscreen mode Exit fullscreen mode

Notice how JSON.stringify is used. It converts our params object to a valid string that can be sent.

Here's the final HTML file in case you want it:



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Discord Webhook Tutorial</title>
  </head>
  <body>
    <button onclick="sendMessage()">Send</button>
  </body>

  <script>
    function sendMessage() {
      const request = new XMLHttpRequest();
      request.open("POST", "https://discordapp.com/api/webhooks/676118118082281513/ZS5YcWhurzokBrKX9NgexqtxrJA5Pu2Bo4i7_JsIxC-JIbPBVhSZkcVVukGOro52rnQA");

      request.setRequestHeader('Content-type', 'application/json');

      const params = {
        username: "My Webhook Name",
        avatar_url: "",
        content: "The message to send"
      }

      request.send(JSON.stringify(params));
    }
  </script>
</html>


Enter fullscreen mode Exit fullscreen mode

And now it's time to test it out! In my case I'll open up Chrome to execute my HTML file, and press the Send button in order to send the message.
And there you go! A message was sent from "My Webhook Name", and it says "The message to send", just like I specified:
Discord message result
If I had specified an avatar URL, it would have replaced the default Discord icon.

And that's basically it! You can now integrate this in your own application, to send automated messages when an event occurs in you app!

In a later tutorial, we'll see how to create embeds, in order to send really cool messages, like this one:
Discord Embed Example

Top comments (57)

Collapse
 
tr11 profile image
Tiago Rangel • Edited

This is cool! Congrats for the article!!!
Did the second part lunched?

Collapse
 
suther profile image
Samuel Suther

Really nice article.
I've also made one, how to connect your Linux-Server to Discord.
It might be useful as additional information if somebody need to trigger a message from a server-process, instead out of JS.

just-sell-online-en.blogspot.com/2...

Collapse
 
jetfire158 profile image
jetfire158 • Edited

So I can just store the html file on the local machine? What would I need to add in order to tell it to execute every 2 hours? And could I run the webhook off of heroku or somewhere so that I wouldn't have to keep my PC on in order for it to work?

Collapse
 
oskarcodes profile image
Oskar Codes

You could start a Node server and use a node module like this one: npmjs.com/package/discord-webhook-...
Then you could maybe use a window.setInterval to execute it repeatedly with an interval.

Collapse
 
abidtkg profile image
Abid Hasan

Thank you!

Collapse
 
reelock profile image
Alessandro • Edited

Hello, Really cool, thanks a bounch!
it his possible to do something like this inside discord app?
I'm using Telegram and it has the cool option to let you write commands in a text message. Then the user click it and Telegram simply repeat the link content and send it to your bot.
Something like this

'Click /done when you have done.'

when you click (or tap) on /done, telegram send a message like this

/done@YourCoolBot

and your bot grab it as a regular command, like if you wrote /done yourself in the text line.

i would like to replicate the behavior on discord to or, if not possible since it seems not, at least do something like that

Collapse
 
oskarcodes profile image
Oskar Codes

You mean having some programmed logic when pressing links on the message sent by the Webhook?

Collapse
 
htmlconverter22 profile image
HtmlConverter22 • Edited

This is very nice and all, but I have a question:

So I made a simplistic website and I want to add a webhook notifiyer right

Basically they paste their webhook in a textbox, and when they press a button,
a message I made gets sent to the webhook they posted in the text box.

I'd like to know how to do this please, and thank you.

Collapse
 
craigseller1979 profile image
craigseller1979

what html editor do you use because i kinda need one lol

Collapse
 
tr11 profile image
Tiago Rangel

vscode is very good

Collapse
 
oskarcodes profile image
Oskar Codes

I use Visual Studio Code

Collapse
 
lecade09 profile image
a13bfg

for me personally i use repl.it, its online based, fast, and you don't need to download anything it supports multiple languages and it can be used as a website hoster.

Collapse
 
tr11 profile image
Tiago Rangel

Glitch is much better in my personal opinion

Collapse
 
kenzodk profile image
nipundil • Edited

I need to embed telegram post via this method to my discord channel. How to do it.
The embed code looks like this
<script async src="https://telegram.org/js/telegram-widget.js?19" data-telegram-post="codewithdila/2" data-width="100%"></script>

Collapse
 
lecade09 profile image
a13bfg

How do i make it send the content that was in the text box of a html page
like an discord webhook sender

Collapse
 
oskarcodes profile image
Oskar Codes

Set the content field to the value of your input:

content: document.querySelector("input").value // could be "textarea" as well
Enter fullscreen mode Exit fullscreen mode
Collapse
 
konrad_szacha_96d4d2fe379 profile image
Konrad Szacha

i did it like that but this is dont working please help me bro
<br> function sendMessage() {<br> const request = new XMLHttpRequest();<br> request.open(&quot;POST&quot;, &quot;<a href="https://discord.com/api/webhooks/921856294481186857/cJd-f85MqKVdLyFotaxZf7yzWH-ILK3VGPL1H7W2IX7UsQwIs0yDEap7cG4oF18uE4K0%22" rel="nofollow">https://discord.com/api/webhooks/921856294481186857/cJd-f85MqKVdLyFotaxZf7yzWH-ILK3VGPL1H7W2IX7UsQwIs0yDEap7cG4oF18uE4K0&quot;</a>);</p> <div class="highlight"><pre class="highlight plaintext"><code> request.setRequestHeader('Content-type', 'application/json'); const params = { username: "My Webhook Name", avatar_url: "", content: document.querySelector("input").value } request.send(JSON.stringify(params)); } </code></pre></div> <p>


and how i should modify this

Thread Thread
 
oskarcodes profile image
Oskar Codes

Where did you copy that code from? That’s some plain HTML displaying JavaScript code, not executing it.

Collapse
 
saucierpond profile image
SaucierPond • Edited

Hey @oskarcodes ! My code doesn't work. Can you please check why?

function sendMessage() {
    const request = new XMLHttpRequest();
    request.open("POST", "https://discordapp.com/api/webhooks/676118118082281513/ZS5YcWhurzokBrKX9NgexqtxrJA5Pu2Bo4i7_JsIxC-JIbPBVhSZkcVVukGOro52rnQA");

    request.setRequestHeader('Content-type', 'application/json');

    const params = {
        username: "My Webhook Name",
        avatar_url: "",
        content: "The message to send"
    }

    request.send(JSON.stringify(params));
}
Enter fullscreen mode Exit fullscreen mode

Thank you!

Collapse
 
oskarcodes profile image
Oskar Codes

Your code looks fine, it must be the Webhook URL endpoint that is wrong

Collapse
 
bigboielthico69 profile image
BIGBOIELTHICO⁶⁹

How would I make it to where I make a text submit box and get whatever hey typed in sent to the webhook?

Collapse
 
oskarcodes profile image
Oskar Codes • Edited

Make an HTML <input> element, select if from JavaScript, and pass the .value of that element to the payload you send to your Webhook.

Collapse
 
bigboielthico69 profile image
BIGBOIELTHICO⁶⁹

can you make an example of this please im really new to this

Some comments may only be visible to logged-in visitors. Sign in to view all comments.