Discord Message Embeds with Buttons Example
This is an example app to demonstrate how buttons in Discord message embeds are programed.
If you would like to create this app from scratch please follow our step by step guide that explains how to set up every part of the code.
How to program Discord message embeds with buttons
How it works
This bot replies to the prefix command !role.
The bot will post a message embed into the Discord channel where the command was invoked. The embed will contain two buttons and upon selection, a role will be added to the user pressing the button.
If a user already has either role the buttons are disabled and the bot sends a message letting them know they have one of the roles.
Button Interaction Handlers
You can find the button interaction handlers under
Inside the file for
buttonInteraction2.js we use if statements to check if the user pressing either button has a role assigned, if the user has a role then buttons are disabled and the bot sends a message letting them know they have one of the roles.
Check each file to view comments explaining the code.
Changing the prefix command
If you would like to change the prefix command, select the endpoint
message.create. Change the prefix to whatever you wish your prefix command to be.
Changing message embed
To change the Message Embed, head on over to the embed builder. Here you can mock up your message embeds with buttons. For this example, we set up simple embed message with a title, description, and two buttons.
In the Components section, we selected
Button, gave it a
label and a
custome_id This custom id is unique to each button it is what we use to handle the request when a user presses one of the buttons. Here
custom_id has been set to
techie_button_id for the two buttons.
Once your embed message looks perfect toggle the
view code button on the top right. Copy and paste it into the file
functions/events/discord/message/create/prefix/role.js This is the code that will execute when a user invokes the prefix command.
If you have any questions or feedback, please join our community Discord server from the link in the top bar. You can also follow us on Twitter, @AutocodeHQ.