Send Discord Embed to Webhook with XHR Request

Question

I am writing a chrome extension in which an embed should be sent to a discord webhook. In chrome extensions, you can't import modules, so I must use XMLHttpRequests.

Here is my code to do this:

const el = document.getElementById("sendwebhook");
el.addEventListener("click", sendMessage, false);


function sendMessage() {
    var request = new XMLHttpRequest();
    request.open("POST", "https://discordapp.com/api/webhooks/693222334567415919/dT2OrV7pQa8_MuiS3kmFRPBTD_lh1nfXVR04OeRS9YKGEVPZXp7cOListUBI-c-32HM7");
    request.setRequestHeader('Content-type', 'application/json');
    var params = {
    username: "My Webhook Name",
    avatar_url: "https://pbs.twimg.com/profile_images/1214545814745300992/7OLFRhok_400x400.jpg",
    content: "The message to send"
    }
    request.send(JSON.stringify(params));
}

Unfortunately, my current code only sends a message through the webhook, but I need it to send a Rich Embed through the webhook that looks something like this:

Answer 1

The correct way to send embeds is by using:

"embeds":[{"color": 0, "title": "title", "description": "description"}]

To adjust the color, you need to convert the hex code of the color you want to decimal (and remove any "." between the numbers). If you are a Windows user, you can easily do this by using calc.exe If you're not, there is a lot of online unit converters that can do the same thing.

<button onclick="sendMessage()">Send</button>
<script>
    webhook_url = "your webhook's url";

    function sendMessage() {
        var request = new XMLHttpRequest();
        request.open("POST", $webhook_url);
        request.setRequestHeader('Content-type', 'application/json');
        var params = {
        username: "Sosi",
        embeds:[{"color": 16711680,"title":"title text", "description":"description text"}]
        }
        request.send(JSON.stringify(params));
    }
</script>

Answer 2

just had to add embeds to my params:

    var params = {
    username: "Jokz' Tools",
    avatar_url: "https://pbs.twimg.com/profile_images/1243255945913872384/jOxyDffX_400x400.jpg",
    embeds: [{
        title: title,
        author: {
            'name': authorname,
            'icon_url': authorimage,
        },
        description: descriptiontext,
        footer: {
            'icon_url': 'https://pbs.twimg.com/profile_images/1243255945913872384/jOxyDffX_400x400.jpg',
            'text': 'Embed Sender | @JokzTools',
        },
        color: 0xff0000,
        timestamp: new Date(),
        }]
    }
    request.send(JSON.stringify(params));
}

Answer 3

To get url go to: server settings > webhooks > create/edit webhook

function send() {  
    var url = "see above";
    var request = new XMLHttpRequest();
    request.open("POST", url);
    request.setRequestHeader('Content-type', 'application/json');

    var myEmbed2 = {
        "author": {
            "name": "Birdie? 3",
            "url": "https://www.reddit.com/r/cats/",
            "icon_url": "https://i.imgur.com/R66g1Pe.jpg"
        },
        "title": "FINALLY!!!... bot embeds!",
        "url": "https://google.com/",
        "description": "Text message. You can use Markdown here. *Italic* **bold** __underline__ ~~strikeout~~ [hyperlink](https://google.com) `code`",
        "color": 15258703,
        "fields": [
            {
                "name": "Admins",
                "value": "Day/Acti",
                "inline": true
            },
            {
                "name": "Helpers",
                "value": "Wombat,Phaedra",
                "inline": true
            },
            {
                "name": "Use `\"inline\": true` parameter, if you want to display fields in the same line.",
                "value": "okay..."
            },
            {
                "name": "Thanks!",
                "value": "You're welcome :wink:"
            }
        ],
        "thumbnail": {
            "url": "https://upload.wikimedia.org/wikipedia/commons/3/38/4-Nature-Wallpapers-2014-1_ukaavUI.jpg"
        },
        "image": {
            "url": "https://upload.wikimedia.org/wikipedia/commons/5/5a/A_picture_from_China_every_day_108.jpg"
        },
        "footer": {
            "text": "Woah! So cool! :smirk:",
            "icon_url": "https://i.imgur.com/fKL31aD.jpg"
        }
    }
    
    var params = {
        username: "Codepen BOT-03",
        embeds: [ myEmbed2 ]
    }
    
    request.send(JSON.stringify(params));  
} // end send