discord.js - Imagine ❄•14mo ago

How to swap between 3 embeds using buttons?

I would like to swap between 3 different embeds when a button is pressed. So say embed1 is displayed, then button2 would change it to embed2 and button3 would change it to embed3. Or if embed2 is displayed, then button1 would change it to embed1 and button3 would change it to embed3. But the button for the current embed is not displayed. I'm not sure on the fundamentals of how to do this so I would really appreciate it if I could have some skeleton code on how something like this would function. Thanks very much!

10 Replies

d.js toolkit•14mo ago

- What's your exact discord.js npm list discord.js and node node -v version? - Not a discord.js issue? Check out #other-js-ts. - Consider reading #how-to-get-help to improve your question! - Explain what exactly your issue is. - Post the full error stack trace, not just the top part! - Show your code! - Issue solved? Press the button! - ✅ Marked as resolved by OP

treble/luna•14mo ago

use the customId of the button and map it to the embed you want to display ex embed1, embed2

XehnyOP•14mo ago

Yeah the part I am confused on is how to change the message to another embed once the button has been pressed

d.js docs•14mo ago

ButtonInteraction#update() Updates the original message of the component on which the interaction was received on.

XehnyOP•14mo ago

I've got the embed updating once but I'm not sure what I need to do so they can switch back and forth multiple times Here's the skeleton code of what I have currently

const {
    SlashCommandBuilder,
    EmbedBuilder,
    ButtonBuilder,
    ButtonStyle,
    ActionRowBuilder,
} = require("discord.js");

module.exports = {
    data: new SlashCommandBuilder()
        .setName("command")
        .setDescription("Test command"),

    async execute(interaction) {
        const embed1 = new EmbedBuilder()
            .setTitle("Embed 1")
            .setColor("#e00000");

        const embed2 = new EmbedBuilder()
            .setTitle("Embed 2")
            .setColor("#e00000");

        const button1 = new ButtonBuilder()
            .setCustomId("button1")
            .setLabel("Button 1")
            .setStyle(ButtonStyle.Primary);

        const button2 = new ButtonBuilder()
            .setCustomId("button2")
            .setLabel("Button 2")
            .setStyle(ButtonStyle.Primary);

        const row1 = new ActionRowBuilder().addComponents(button2);

        const row2 = new ActionRowBuilder().addComponents(button1);

        const response = await interaction.reply({
            embeds: [embed1],
            components: [row1],
        });

        const confirmation = await response.awaitMessageComponent();

        await confirmation.update({
            embeds: [embed2],
            components: [row2],
        });
    },
};

const {
    SlashCommandBuilder,
    EmbedBuilder,
    ButtonBuilder,
    ButtonStyle,
    ActionRowBuilder,
} = require("discord.js");

module.exports = {
    data: new SlashCommandBuilder()
        .setName("command")
        .setDescription("Test command"),

    async execute(interaction) {
        const embed1 = new EmbedBuilder()
            .setTitle("Embed 1")
            .setColor("#e00000");

        const embed2 = new EmbedBuilder()
            .setTitle("Embed 2")
            .setColor("#e00000");

        const button1 = new ButtonBuilder()
            .setCustomId("button1")
            .setLabel("Button 1")
            .setStyle(ButtonStyle.Primary);

        const button2 = new ButtonBuilder()
            .setCustomId("button2")
            .setLabel("Button 2")
            .setStyle(ButtonStyle.Primary);

        const row1 = new ActionRowBuilder().addComponents(button2);

        const row2 = new ActionRowBuilder().addComponents(button1);

        const response = await interaction.reply({
            embeds: [embed1],
            components: [row1],
        });

        const confirmation = await response.awaitMessageComponent();

        await confirmation.update({
            embeds: [embed2],
            components: [row2],
        });
    },
};

treble/luna•14mo ago

use the non promisified collector

d.js docs•14mo ago

Message#createMessageComponentCollector() Creates a message component interaction collector.

XehnyOP•14mo ago

I now have it swapping back and forth but each time I click the button it still says ... for 3s and interaction failed, makes me think I'm not "acknowledging" the interaction or something

const {
    SlashCommandBuilder,
    EmbedBuilder,
    ButtonBuilder,
    ButtonStyle,
    ActionRowBuilder,
    ComponentType,
} = require("discord.js");

module.exports = {
    data: new SlashCommandBuilder()
        .setName("command")
        .setDescription("Test command"),

    async execute(interaction) {
        const embed1 = new EmbedBuilder()
            .setTitle("Embed 1")
            .setColor("#e00000");

        const embed2 = new EmbedBuilder()
            .setTitle("Embed 2")
            .setColor("#e00000");

        const button1 = new ButtonBuilder()
            .setCustomId("button1")
            .setLabel("Button 1")
            .setStyle(ButtonStyle.Primary);

        const button2 = new ButtonBuilder()
            .setCustomId("button2")
            .setLabel("Button 2")
            .setStyle(ButtonStyle.Primary);

        const row1 = new ActionRowBuilder().addComponents(button2);

        const row2 = new ActionRowBuilder().addComponents(button1);

        const message = await interaction.reply({
            embeds: [embed1],
            components: [row1],
        });

        const collector = message.createMessageComponentCollector({
            componentType: ComponentType.Button,
            time: 15000,
        });

        collector.on("collect", (i) => {
            if (i.customId === "button1") {
                message.edit({
                    embeds: [embed1],
                    components: [row1],
                });
            } else if (i.customId === "button2") {
                message.edit({
                    embeds: [embed2],
                    components: [row2],
                });
            }
        });
    },
};

const {
    SlashCommandBuilder,
    EmbedBuilder,
    ButtonBuilder,
    ButtonStyle,
    ActionRowBuilder,
    ComponentType,
} = require("discord.js");

module.exports = {
    data: new SlashCommandBuilder()
        .setName("command")
        .setDescription("Test command"),

    async execute(interaction) {
        const embed1 = new EmbedBuilder()
            .setTitle("Embed 1")
            .setColor("#e00000");

        const embed2 = new EmbedBuilder()
            .setTitle("Embed 2")
            .setColor("#e00000");

        const button1 = new ButtonBuilder()
            .setCustomId("button1")
            .setLabel("Button 1")
            .setStyle(ButtonStyle.Primary);

        const button2 = new ButtonBuilder()
            .setCustomId("button2")
            .setLabel("Button 2")
            .setStyle(ButtonStyle.Primary);

        const row1 = new ActionRowBuilder().addComponents(button2);

        const row2 = new ActionRowBuilder().addComponents(button1);

        const message = await interaction.reply({
            embeds: [embed1],
            components: [row1],
        });

        const collector = message.createMessageComponentCollector({
            componentType: ComponentType.Button,
            time: 15000,
        });

        collector.on("collect", (i) => {
            if (i.customId === "button1") {
                message.edit({
                    embeds: [embed1],
                    components: [row1],
                });
            } else if (i.customId === "button2") {
                message.edit({
                    embeds: [embed2],
                    components: [row2],
                });
            }
        });
    },
};

treble/luna•14mo ago

you do have to reply to the interaction and you can replace the msg.edit with <Interaction>.update

XehnyOP•14mo ago

That works perfectly, thank you very much for all your help

Gaming

Programming

How to swap between 3 embeds using buttons?