How to embed images in Discord messages

  • 9 March 2022
  • 2 replies
  • 51544 views
How to embed images in Discord messages
Userlevel 7
Badge +11
  • Community Manager
  • 4610 replies

Hey friends! If you’re reading this then you probably already know that the Send Channel Message action for Discord doesn’t currently have a field for image files to be attached. While you can include links to images in the Message Text field and they’ll usually be displayed, you can’t add embed them so that the image link isn’t shown. Bummer, right? Well, not anymore! Let me show you a neat trick to get around this using my favourite app, Webhooks by Zapier.

In Discord

To get around having to create a custom integration to handle all the fancy OAuth stuff we’re going to utilise Discord’s built in Webhooks feature. It’s a bit more limited, but is super quick to set up.

Set up the webhook

To set up the webhook in Discord, click the Edit Channel icon next to one of the channel names on your server:

7420efc706c02eba8b82845e7363d83f.png

Next, you’ll want to click on the Integrations option on the menu. And from there, click on Create Webhook to begin setting up your webhook.

57fce292f7a917c5709bfcf89da280a3.png
With the webhook, we’ll be posting as a bot so enter a NAME for your bot, give it a cool avatar IMAGE and select what CHANNEL it’s going to be posting messages in.

Once you’ve done that, click on the Copy Webhook URL button to add the webhook's URL to your clipboard (We’ll need it in a bit). Oh, and don’t forget to press the Save button to save any changes you make! 

428b9212fad524967680309f064c2e4c.png
For more in-depth instructions check out Discords setup guide for Webhooks here: Intro to Webhooks

In Zapier

Set up your trigger

This part will be specific to your desired workflow but for the purposes for this example I’ve set up the Zap to use a Google Sheets New Spreadsheet Row trigger. This will send the Zap the image link and message that needs to be posted to Discord. For more details on how to set up a trigger step check out this guide: Set up your Zap trigger

Set up your action

Now, let’s get this Webhook step set up! On your action step, select the Webhooks by Zapier app and the Custom Request Action Event:

fcd88a8682ade5febe2a9a17df732e2f.png
In the next section, for the Method select POST. And for the URL field, we’ll need to paste in that Webhook URL that we copied from Discord previously.

The Data field is where we’ll give the details of the message we want to send to Discord. To do that we need to follow the structure outlined in Discord’s API documentation - See Create Message for example.

Here’s some example code you can use:

{

"content":"Select the message text here",

"username":"Specify a name for the bot",

"avatar_url": "Add a link to a new image for the bot",

"embeds": [{

"image": {

        "url": "Select the image URL"

      }

}]

}


We’re not using all the available parameters since I’m only wanting to post a message with an embedded image. I don’t really need to include the username or avatar_url parameters here either. But I wanted to show that if you wanted to change the username or avatar of the bot that’s posting for example, you could specify those in the Data field and it would overwrite the webhook’s bot settings that we set up in Discord earlier. 

Lastly, in the Headers section you’ll want to set Content-Type as a key (on the left) and set it’s value to be application/json.

In the end you should end up with a set up that looks something like this:

fd0886921f0e691f00bd9c87e3643e12.png

Which would post a message to Discord like this:

967710e23d651133428ab04b68b123e3.png

Bonus: Attach other types of files

While playing around I also discovered that there’s a super simple way to post a file as an attachment. All you need to do is specify the Webhook URL (from Discord) in the URL field, leave the Data field blank, then in the File field select your File Object or publicly accessible File URL from the relevant step and you’re done:
91de343ffcbea23b460c0e4d5fb81bd8.png
Just specifying the Webhook URL and file will then all the bot to post the file to Discord like this:
55fbbe3489e51d40956a176d00d118b6.png
Easy right? I should also mention though, that it’s not possible to include a message with the file but you could always use an additional Webhook step to first post the message and follow that up with a secondary webhook step to attach the file. Not super ideal I know but hopefully it’s useful still. 

Wrapping Up

Phew! You can take a break now, we’re all done. I know having to set up webhooks instead of using the existing Send Channel Message action isn’t ideal but hopefully you’ll find this workaround helpful. And please do let me know if you do give this a try. I’d love to hear how you got on in the comments below.

Happy Zapping! :zap:


2 replies

Userlevel 1

Could you give the bot a certain role (so that it’s name would be coloured)? 

Userlevel 7
Badge +11

Hey @joelheath24, so sorry for missing this question!

I’ve done some checking and doesn’t look like it’s possible to assign a role for the bot to change the colour of it’s name. Sorry for the bad news on that. If I do come across a way to assign a role or change the colour, I’ll be sure to post an update here! 🙂

Reply