⚙️ Discord.js Internal Dashboard ⚙️
Create a minimal dashboard for your discord bot using select menus, modals and buttons.
Features
-
🛠️ Fully Customisable | This is your dashboard, and you should be allowed to make it your own. That's why this package allows almost every aspect of the dashboard to be customised!
-
🤔 Intuitive | The user interface is designed to be intuitive, and easy to use!
-
🤖 Slash Command & Message Support | No matter how your bot receives its commands, you can simply pass in a CommandInteraction
or Message
and it will work!
Install Package
Note: Before you can use this package, you will need to make sure you have at least Discord.js 13.7 or later installed in your project.
To install this powerful package, simply type the following command into your terminal:
npm i discord.js-internal-dashboard --save
Getting Started
Once you have installed the package, you should first import it into your project:
const dashboard = require("discord.js-internal-dashboard");
To create and show the dashboard, simply listen for a Message
or CommandInteraction
, and then pass it to the package itself, followed by the dashboard's options.
Example:
client.on("messageCreate", message => {
dashboard(message, options);
});
Dashboard Options Example
Below is a full example of the dashboard's options using a Discord.Message
as the input, and the options are what are used to bring the dashboard to life.
Copy this and use it as a starting point for your own dashboard if you wish!
{
timeout: 60000,
startEmbed: {
showCategoriesAndDescriptions: true,
embed: new Discord.MessageEmbed()
.setTitle("Start Embed")
.setDescription("This is the first embed that the user will see when they initiate the internal dashboard!")
.setThumbnail(client.user?.displayAvatarURL({ dynamic: true }))
.setColor("GREEN"),
},
categoryEmbed: new Discord.MessageEmbed()
.setTitle("Category Embed")
.setDescription("This is the category embed description! It will appear on every category.")
.setThumbnail(client.user?.displayAvatarURL({ dynamic: true }))
.setColor("YELLOW"),
closeEmbed: new Discord.MessageEmbed()
.setTitle("Close Embed")
.setDescription("This embed will be shown when the dashboard buttons and selection menus time out.")
.setThumbnail(client.user?.displayAvatarURL({ dynamic: true }))
.setColor("RED"),
categories: [
{
name: "General Settings",
emoji: "⚙️",
description: "The general settings for the bot.",
settings: [
{
name: "Prefix",
description: "The prefix that will be used for commands.",
type: "textinput",
maxLength: 5,
required: true,
fetch: async () => {
return await db.get(`${message.guild.id}.general.prefix`) || "!";
},
save: async (value) => {
await db.set(`${message.guild.id}.general.prefix`, value);
}
},
{
name: "Language",
description: "The language you would like the bot to use.",
type: "textinput",
minLength: 4,
required: true,
fetch: async () => {
return await db.get(`${message.guild.id}.general.language`) || "English";
},
save: async (value) => {
await db.set(`${message.guild.id}.general.language`, value);
}
}
],
reset: async () => {
await db.delete(`${message.guild.id}.general`);
}
},
{
name: "Welcome/Goodbye Message Settings",
emoji: "👋",
description: "Customize the Welcome and Goodbye Messages.",
settings: [
{
name: "Welcome Message",
description: "The welcome message that will be sent to new members.",
type: "textarea",
minLength: 10,
maxLength: 150,
required: true,
fetch: async () => {
return await db.get(`${message.guild.id}.greetings.welcomeMessage`);
},
save: async (value) => {
await db.set(`${message.guild.id}.greetings.welcomeMessage`, value);
}
},
{
name: "Goodbye Message",
description: "The goodbye message that will be sent to members who have left the server.",
type: "textarea",
minLength: 10,
maxLength: 150,
required: false,
fetch: async () => {
return await db.get(`${message.guild.id}.greetings.goodbyeMessage`);
},
save: async (value) => {
await db.set(`${message.guild.id}.greetings.goodbyeMessage`, value);
}
}
],
reset: async () => {
await db.delete(`${message.guild.id}.greetings`);
}
}
]
}
What does it look like?
Below is a GIF showing the dashboard in action using the example above!
Contact Us