How to Create a Button on Your NodeJS Discord Bot

Note:

Discord buttons are clickable buttons that appear below your bot’s messages, just like buttons you see in apps and websites. They make your bot interactive and fun to use!

1. Log In to Your Panel

---

2. Select the ‘Files’ Tab

---

3. Create Your Main Bot’s File

Create a new file called index.js then paste the following code.

What this code does:

• It creates a Discord bot that sends interactive buttons when the /ping command is used.
• The buttons allow users to perform quick actions with a single click:
  • Ping! – Checks the bot’s latency and replies with the result.
• The bot registers the /ping slash command automatically when it starts.
• Button interactions are handled so that responses are ephemeral, meaning only the user who clicked sees the reply.
• The code demonstrates using Discord v10 components and persistent message flags for interactive functionality.

// Calling our requierments
const { Client, GatewayIntentBits, REST, Routes, SlashCommandBuilder, ActionRowBuilder, ButtonBuilder, ButtonStyle } = require('discord.js');
 
 // Setting our variables
const TOKEN = 'YOUR_BOT_TOKEN';
const CLIENT_ID = 'YOUR_CLIENT_ID';
 
const client = new Client({
  intents: [GatewayIntentBits.Guilds],
});
 
client.once('ready', async () => {
  console.log(`✅ Logged in as ${client.user.tag}`);
 
  // Register the /ping command
  const commands = [
    new SlashCommandBuilder()
      .setName('ping')
      .setDescription('Sends a ping button')
      .toJSON()
  ];
 
  const rest = new REST({ version: '10' }).setToken(TOKEN);
  await rest.put(Routes.applicationCommands(CLIENT_ID), { body: commands });
  console.log('✅ Slash command registered');
});
 
  // When the command is used it sends the button
client.on('interactionCreate', async interaction => {
  if (interaction.isChatInputCommand() && interaction.commandName === 'ping') {
    const components = [
        new ActionRowBuilder()
            .addComponents(
                new ButtonBuilder()
                    .setStyle(ButtonStyle.Secondary)
                    .setLabel("Ping!")
                    .setCustomId("ping_button"),
            ),
];
 
    await interaction.reply({ components: components, flags: MessageFlags.IsPersistent | MessageFlags.IsComponentsV2}); // As we can see, we've set the messsage flag to IsComponentsV2 so we can use them
  }
    // Sends the response after the button was clicked
  if (interaction.isButton() && interaction.customId === 'ping_button') {
    const ping = client.ws.ping;
    await interaction.reply({ content: `🏓 Pong! Latency is ${ping}ms`, ephemeral: true });
  }
});
 
client.login(TOKEN);

Discord Bot Hosting

Starts at $1.49

Was this article helpful?

0 0

Please Share Your Feedback

How Can We Improve This Article?

Submit