Skip to content

chore(examples): update bot token placeholder and add components v2 example #1604

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

chore(examples): update bot token placeholder and add components v2 example #1604

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
94b9fa1
fix(examples): update bot token placeholder
seeyebe Sep 28, 2025
ea067d5
feat(examples): add componentsV2.js example
seeyebe Sep 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions examples/applicationCommands.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ const Eris = require("eris");

const Constants = Eris.Constants;

// Replace TOKEN with your bot account's token
const bot = new Eris("BOT TOKEN", {
// Replace BOT_TOKEN with your bot account's token
const bot = new Eris("Bot BOT_TOKEN", {
intents: [], // No intents are needed for interactions, but you still need to specify either an empty array or 0
});

Expand Down
4 changes: 2 additions & 2 deletions examples/basicCommands.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const Eris = require("eris");

// Replace TOKEN with your bot account's token
const bot = new Eris.CommandClient("Bot TOKEN", {}, {
// Replace BOT_TOKEN with your bot account's token
const bot = new Eris.CommandClient("Bot BOT_TOKEN", {}, {
description: "A test bot made with Eris",
owner: "somebody",
prefix: "!",
Expand Down
6 changes: 3 additions & 3 deletions examples/components.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ const Eris = require("eris");

const Constants = Eris.Constants;

// Replace TOKEN with your bot account's token
const bot = new Eris("BOT TOKEN", {
// Replace BOT_TOKEN with your bot account's token
const bot = new Eris("Bot BOT_TOKEN", {
intents: ["guildMessages"],
});

Expand All @@ -24,7 +24,7 @@ bot.on("messageCreate", (msg) => { // When a message is created
type: Constants.ComponentTypes.ACTION_ROW, // You can have up to 5 action rows, and 5 buttons per action row
components: [
{
type: Constants.ComponentTypes.BUTTON, // https://discord.com/developers/docs/interactions/message-components#buttons
type: Constants.ComponentTypes.BUTTON, // https://discord.com/developers/docs/interactions/message-components#button
style: Constants.ButtonStyles.PRIMARY, // This is the style of the button https://discord.com/developers/docs/interactions/message-components#button-object-button-styles
custom_id: "click_one",
label: "Click me!",
Expand Down
141 changes: 141 additions & 0 deletions examples/componentsV2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
const Eris = require("eris");

const Constants = Eris.Constants;

// Replace BOT_TOKEN with your bot account's token
const bot = new Eris("Bot BOT_TOKEN", {
intents: ["guildMessages"],
});

// Custom IDs so we can identify the button interactions later (must stay unique per message)
const INFO_BUTTON_ID = "components_v2_info";
const MORE_BUTTON_ID = "components_v2_more";
const DISMISS_BUTTON_ID = "components_v2_dismiss";

bot.on("ready", () => { // When the bot is ready
console.log("Ready!"); // Log "Ready!"
});

bot.on("error", (err) => {
console.error(err); // or your preferred logger
});

bot.on("messageCreate", (msg) => { // When a message is created
if (msg.content === "!componentsv2") { // If the message content is "!componentsv2"
bot.createMessage(msg.channel.id, {
// Required so Discord accepts the structured components payload.
flags: Constants.MessageFlags.IS_COMPONENTS_V2,
components: [
{
// Top-level section gives an overview with a button accessory on the right
type: Constants.ComponentTypes.SECTION,
components: [
{
type: Constants.ComponentTypes.TEXT_DISPLAY,
content: "Components V2 let you create card-style layouts inside a message.",
},
],
accessory: {
type: Constants.ComponentTypes.BUTTON,
style: Constants.ButtonStyles.PRIMARY,
custom_id: INFO_BUTTON_ID,
label: "What is this?",
},
},
{
type: Constants.ComponentTypes.SEPARATOR,
spacing: 2, // Adds extra breathing room between the section and container
},
{
// Container lets us bundle multiple sections and traditional components together
type: Constants.ComponentTypes.CONTAINER,
accent_color: 0x5865F2,
components: [
{
type: Constants.ComponentTypes.TEXT_DISPLAY,
content: "**Highlights**", // Simple heading inside the container
},
{
// Section inside the container to demonstrate stacked text blocks
type: Constants.ComponentTypes.SECTION,
components: [
{
type: Constants.ComponentTypes.TEXT_DISPLAY,
content: "Sections stack text displays and optionally add a rich accessory.",
},
{
type: Constants.ComponentTypes.TEXT_DISPLAY,
content: "Accessories can be thumbnails or buttons placed on the right side.",
},
],
accessory: {
type: Constants.ComponentTypes.THUMBNAIL,
media: {
url: "https://cdn.discordapp.com/embed/avatars/0.png",
}, // Thumbnail accessories render on the right edge of the section
},
},
{
type: Constants.ComponentTypes.SEPARATOR,
spacing: 1,
},
{
// Media gallery showcases how multiple images fit into a single card
type: Constants.ComponentTypes.MEDIA_GALLERY,
items: [
{
media: {
url: "https://cdn.discordapp.com/embed/avatars/1.png",
},
description: "Gallery items can show multiple images.",
},
{
media: {
url: "https://cdn.discordapp.com/embed/avatars/2.png",
},
spoiler: false,
},
],
},
{
// Standard action row still works inside the container for interactive controls
type: Constants.ComponentTypes.ACTION_ROW,
components: [
{
type: Constants.ComponentTypes.BUTTON, // https://discord.com/developers/docs/interactions/message-components#button
style: Constants.ButtonStyles.PRIMARY,
custom_id: MORE_BUTTON_ID,
label: "Tell me more",
},
{
type: Constants.ComponentTypes.BUTTON, // https://discord.com/developers/docs/interactions/message-components#button
style: Constants.ButtonStyles.SECONDARY,
custom_id: DISMISS_BUTTON_ID,
label: "Dismiss",
},
],
},
],
},
],
});
}
});

bot.on("interactionCreate", async (interaction) => {
if (interaction instanceof Eris.ComponentInteraction) {
if (interaction.data.custom_id === INFO_BUTTON_ID || interaction.data.custom_id === MORE_BUTTON_ID) {
await interaction.createMessage({
content: "Components V2 combine text, media, and classic components to build rich cards.",
flags: 64,
});
} else if (interaction.data.custom_id === DISMISS_BUTTON_ID) {
await interaction.createMessage({
content: "Dismissed! Run !componentsv2 again to reopen the card.",
flags: 64,
});
}
}
});

bot.connect(); // Get the bot to connect to Discord
4 changes: 2 additions & 2 deletions examples/embed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const Eris = require("eris");

// Replace TOKEN with your bot account's token
const bot = new Eris("Bot TOKEN");
// Replace BOT_TOKEN with your bot account's token
const bot = new Eris("Bot BOT_TOKEN");

bot.on("ready", () => { // When the bot is ready
console.log("Ready!"); // Log "Ready!"
Expand Down
4 changes: 2 additions & 2 deletions examples/intent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const Eris = require("eris");

// Replace TOKEN with your bot account's token
const bot = new Eris("Bot TOKEN", {
// Replace BOT_TOKEN with your bot account's token
const bot = new Eris("Bot BOT_TOKEN", {
intents: [
"guilds",
"guildMessages",
Expand Down
4 changes: 2 additions & 2 deletions examples/pingpong.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const Eris = require("eris");

// Replace TOKEN with your bot account's token
const bot = new Eris("Bot TOKEN");
// Replace BOT_TOKEN with your bot account's token
const bot = new Eris("Bot BOT_TOKEN");

bot.on("ready", () => { // When the bot is ready
console.log("Ready!"); // Log "Ready!"
Expand Down
4 changes: 2 additions & 2 deletions examples/playFile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const Eris = require("eris");

// Replace TOKEN with your bot account's token
const bot = new Eris("Bot TOKEN");
// Replace BOT_TOKEN with your bot account's token
const bot = new Eris("Bot BOT_TOKEN");

const playCommand = "!play";

Expand Down
4 changes: 2 additions & 2 deletions examples/reactionButtons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const Eris = require("eris");

// Replace TOKEN with your bot account's token
const bot = new Eris.CommandClient("Bot TOKEN", {}, {
// Replace BOT_TOKEN with your bot account's token
const bot = new Eris.CommandClient("Bot BOT_TOKEN", {}, {
description: "A test bot made with Eris",
owner: "somebody",
prefix: "!",
Expand Down
4 changes: 2 additions & 2 deletions examples/sharding.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const Eris = require("eris");

// Replace TOKEN with your bot account's token
const bot = new Eris("Bot TOKEN", {
// Replace BOT_TOKEN with your bot account's token
const bot = new Eris("Bot BOT_TOKEN", {
firstShardID: 0,
lastShardID: 15,
maxShards: 16,
Expand Down