Adding Interactive Buttons to Discord Webhook Messages Using a Bot

Other Questions Discord bot
1

I’m working on a project where I have a webhook that sends messages to a Discord channel from a Google Forms page. Now I want to add some interactivity to these messages. Specifically, I’m trying to make buttons appear after the webhook message comes in. These buttons should say “paid” and “denied”.

Right now, I’m just focused on getting the buttons to show up. I’m not worried about handling responses to the buttons yet. Here’s what I’ve tried so far, but it’s not working:

bot.on('messageCreate', (msg) => {
  if (msg.author.bot) {
    const approveBtn = new ButtonBuilder()
      .setLabel('Approve')
      .setStyle(ButtonStyle.Primary)
      .setCustomId('approveExpense');

    const rejectBtn = new ButtonBuilder()
      .setLabel('Reject')
      .setStyle(ButtonStyle.Secondary)
      .setCustomId('rejectExpense');

    const btnRow = new ActionRowBuilder().addComponents(approveBtn, rejectBtn);
    msg.reply({ content: 'Choose an action:', components: [btnRow] });
  } else {
    return;
  }
});

Can anyone help me figure out why this isn’t working or suggest a better approach? Thanks!

2

The issue with your current approach is that webhook messages don’t trigger the ‘messageCreate’ event. Instead, you’ll need to modify your webhook setup to include the buttons directly in the message payload.

When sending the webhook message, include the buttons in the payload as follows:

const webhook = new WebhookClient({ id: 'your_webhook_id', token: 'your_webhook_token' });

const approveBtn = new ButtonBuilder()
  .setCustomId('approve')
  .setLabel('Approve')
  .setStyle(ButtonStyle.Primary);

const rejectBtn = new ButtonBuilder()
  .setCustomId('reject')
  .setLabel('Reject')
  .setStyle(ButtonStyle.Secondary);

const row = new ActionRowBuilder().addComponents(approveBtn, rejectBtn);

webhook.send({
  content: 'Expense report:',
  components: [row]
});

In your bot code, listen for button interactions with the following snippet:

client.on('interactionCreate', async interaction => {
  if (!interaction.isButton()) return;

  if (interaction.customId === 'approve') {
    await interaction.reply('Expense approved');
  } else if (interaction.customId === 'reject') {
    await interaction.reply('Expense rejected');
  }
});

This approach should work better for your use case.

3

yo, i think ur issue is with the messageCreate event. webhook messages don’t trigger that. try using the interactionCreate event instead and check for the specific webhook. then u can add the buttons to the webhook message directly. might work better for ya

4

Hey there! I’ve actually done something similar in one of my projects. The trick is to modify your webhook setup rather than trying to catch the message after it’s sent. Here’s what worked for me:

When you’re sending the webhook message, include the buttons right in the payload. You’ll need to create ButtonBuilder objects for your ‘paid’ and ‘denied’ buttons, then add them to an ActionRowBuilder. It’ll look something like this:

const row = new ActionRowBuilder().addComponents(
new ButtonBuilder().setCustomId(‘paid’).setLabel(‘Paid’).setStyle(ButtonStyle.Success),
new ButtonBuilder().setCustomId(‘denied’).setLabel(‘Denied’).setStyle(ButtonStyle.Danger)
);

webhook.send({ content: ‘Your expense report:’, components: [row] });

This way, the buttons will show up immediately with the webhook message. No need to catch it afterwards.

For handling the button clicks, you’ll want to use the interactionCreate event in your bot code. Hope this helps!