Discord Server Commands List With Message Buttons

This App will allow you to create a simple server command list and easily customize it!

Installing it will add a prefix command called help that will show a prompt such as this:

!help Command and Prompt

The user may then continue to the command list.

Command List

With the buttons below they can navigate and exit the list. Navagation

That's pretty much what the bot can do! Of course you can customize and change the project however it suits you!

Setup

Press install, then link your Discord Account/Bot to this Autocode Project. Once that's done, choose the prefix you'd like to use to run the command — in my example screenshots, I've chosen ! and am running the command as !help.

Now Let's get started adding your commands! Go to the First_Page.js endpoint in the project! It should look like this:

First_Page Example

Now you can Simply edit your commands in the embed here:

fields: [{
  name:`${process.env.PREFIX}help`,
  value: "Shows this prompt and these commands."
},{
  name: `${process.env.PREFIX}Command2`,
  value: "Description of Command"
},{
  name: `${process.env.PREFIX}Command3`,
  value: "Description of Command"
},{
  name: `${process.env.PREFIX}Command4`,
  value: "Description of Command"
},{
  name: `${process.env.PREFIX}Command5`,
  value: "Description of Command"
}]

You could add a new command as a new entry to this array like this:

{
  name: `${process.env.PREFIX}give`,
  value: "Gives Everyone a Big Hug!"
}

You can do the same thing with the endpoint Second_Page.js

Want to add more Pages?

This requires some basic knowledge of JavaScript and the Discord API!

Let's get started! This app generally works by updating the original message containing the buttons whenever a new button is pressed.

You can duplicate one of the Page Endpoints and name it ThirdPage.js. Make sure the event trigger at the top of the editor is set to Discord > message.button.interaction, and set the custom_id to help-thirdpage. Then, edit the fields in the embed to have different commands and edit the buttons in the components array to go back to the second page instead of the first one.

You'll also need to add a button to the previous page of results with a custom-id matching help-thirdpage. For example, you could add add another button to the list in SecondPage.js like this:

{
  type: 2,
  label: "Exit",
  style: 4,
  custom_id: "help-exit"
},
{
  type: 2,
  style: 2,
  emoji: {name: "◀️"},
  custom_id: "help-firstpage"
},
{
  type: 2,
  style: 2,
  emoji: {name: "▶️"},
  custom_id: "help-thirdpage"
}

When someone presses that help-thirdpage button, the code in ThirdPage.js will run and update the message to show a third page of results!

Changing the Command Prefix

If you want to change your command prefix after installing this app, open your environment variables:

Enviromental Variables

And change the one called PREFIX to whatever you'd like your new prefix to be:

Prefix Example

Thank You!

You can further customize this project as much as you'd like! Try to figure it out yourself using the Discord and Autocode Documentation.

If you need help, ask on the Autocode Help Server — you can get an invite from the topbar above.

Or DM me directly on Discord @ lols#7896

Thanks for reading and installing!