This is an example app to demonstrate how buttons in Discord message embeds are programed.
Step-by-Step Guide
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.
You can find the button interaction handlers under functions/events/discord/message/button/buttonInteraction1.js and functions/events/discord/message/button/buttonInteraction1.js
Inside the file for buttonInteraction1.js and 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.
Making modifications
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 style, label and acustome_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 dev_button_id and 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 role.js under functions/events/discord/message/create/prefix/role.js This is the code that will execute when a user invokes the prefix command.
Thank you
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.
