discord-dashboard-dgh
Advanced tools
The best way to create a Web Dashboard for your Discord Bot! No need to edit files or write the server from scratch!
npm i discord-dashboard dbd-capriham-theme
or
npm i discord-web-dashboard dbd-capriham-theme
Better looking documentation with navigation: https://assistants.ga/dbd-docs/#/
const DBD = require('discord-dashboard');
const CaprihamTheme = require('dbd-capriham-theme');
let langsSettings = {};
let currencyNames = {};
let botNicknames = {};
const Discord = require('discord.js');
const client = new Discord.Client();
client.login("botToken");
const Dashboard = new DBD.Dashboard({
port: 80,
client: {
id: 'clientId',
secret: 'clientSecret'
},
redirectUri: 'http://localhost/discord/callback',
domain: 'http://localhost',
bot: client,
theme: CaprihamTheme({
privacypolicy: {
websitename: "Assistants",
websiteurl: "https://assistants.ga/",
supportemail: "support@assistants.ga"
},
websiteName: "Assistants",
iconURL: 'https://assistants.ga/ac_logo_v6.png',
index: {
card:{
title: "Assistants - The center of everything",
description: "Assistants Discord Bot management panel. Assistants Bot was created to give others the ability to do what they want. Just.<br>That's an example text.<br><br><b><i>Feel free to use HTML</i></b>",
image: "https://www.geeklawblog.com/wp-content/uploads/sites/528/2018/12/liprofile-656x369.png",
},
information: {
title: "Information",
description: "To manage your bot, go to the <a href='/manage'>Server Management page</a>.<br><br>For a list of commands, go to the <a href='/commands'>Commands page</a>.<br><br><b><i>You can use HTML there</i></b>"
},
feeds: {
title: "Feeds",
list: [
{
icon: "fa fa-user",
text: "New user registered",
timeText: "Just now",
bg: "bg-light-info"
},
{
icon: "fa fa-server",
text: "Server issues",
timeText: "3 minutes ago",
bg: "bg-light-danger"
}
]
}
},
commands: {
pageTitle: "Commands",
table: {
title: "List",
subTitle: "All Assistants' commands",
list:
[
{
commandName: "Test command",
commandUsage: "prefix.test <arg> [op]",
commandDescription: "Lorem ipsum dolor sth"
},
{
commandName: "2nd command",
commandUsage: "oto.nd <arg> <arg2> [op]",
commandDescription: "Lorem ipsum dolor sth, arg sth arg2 stuff"
}
]
}
}
}),
settings: [
{
categoryId: 'setup',
categoryName: "Setup",
categoryDescription: "Setup your bot with default settings!",
categoryOptionsList: [
{
optionId: 'lang',
optionName: "Language",
optionDescription: "Change bot's language easily",
optionType: DBD.formTypes.select({"Polish": 'pl', "English": 'en', "French": 'fr'}),
getActualSet: async ({guild}) => {
return langsSettings[guild.id] || null;
},
setNew: async ({guild,newData}) => {
langsSettings[guild.id] = newData;
return;
}
},
{
optionId: 'nickname',
optionName: "Nickname",
optionDescription: "Bot's nickname on the guild",
optionType: DBD.formTypes.input("Bot username", 1, 16, false, true),
getActualSet: async ({guild}) => {
return botNicknames[guild.id] || false;
},
setNew: async ({guild,newData}) => {
botNicknames[guild.id] = newData;
return;
}
},
]
},
{
categoryId: 'eco',
categoryName: "Economy",
categoryDescription: "Economy Module Settings",
categoryOptionsList: [
{
optionId: 'currency_name',
optionName: "Currency name",
optionDescription: "Economy module Guild currency name",
optionType: DBD.formTypes.input('Currency name', null, 10, false, true),
getActualSet: async ({guild}) => {
return currencyNames[guild.id] || null;
},
setNew: async ({guild,newData}) => {
currencyNames[guild.id] = newData;
return;
}
},
]
},
]
});
Dashboard.init();
Official Discord Web Dashoard documentation. The best way to create a Web Dashboard for your Discord Bot! No need to edit files or write the server from scratch!
All available functions are described below.
Join our Discord server to get help: https://discord.gg/CHbfcSbEgd
The project is licensed by MIT. This means that you can edit it, but you must mention its author publicly in this project (breftejk, Github: https://github.com/breftejk, Discord Server: https://discord.gg/CHbfcSbEgd).
To install all the modules needed for the project to run, you need to run one simple command:
npm i discord-dashboard
For the Dashboard to work, you need to create the server it will be based on. Fortunately, we help you with this and you can do it this way:
const DBD = require('discord-dashboard');
const Dashboard = new DBD.Dashboard(config);
For TypeScript:
import { Dashboard } from 'discord-dashboard';
const DD = new Dashboard(config);
That's all. The server is ready to run. Before starting up, however, you must understand the options needed to start the server.
Thanks to the config, server knows how to behave and what settings to use. There are many useful options as described in the Config section.
For everything to start working, the server needs to be started. After setting config, all you have to do is do:
Dashboard.init();
Where Dashboard is your first step in the Setup section.
It depends on how your Dashboard will work and look. If you want it to have a "Setup" section with a "Language" setting, set it up here. If you want it to have a crocodile icon, do it here. If you want it to run on port 80, do so here. It all depends on config.
Config allows you to set server-stuff. All the options available here are:
...
port: 80,
domain: 'http://localhost',
sessionFileStore: true/false,
SSL: {
enabled: true/false,
key: 'key string or fs readFileSync',
cert: 'cert string or fs readFileSync'
},
invite: {
redirectUri: 'http://domain.com/ (website to redirect after inviting the bot - must be added to the trusted uris',
permissions: 'permissions numer, by default 0',
clientId: 'Client ID, by default is set to config.bot.user.id',
scopes: ["bot"],
otherParams: "&state=15773059ghq9183habn"
},
noCreateServer: false,
supportServer: {
slash: '/support-server',
inviteUrl: 'https://discord.gg/Nkc8MWxHRD'
},
...
To get express-app with all the endpoints, use:
DBD.getApp();
The dashboard will never work without a few required settings. These include Redirect URI, Client ID, Client Secret and Discord.js v12 Client. We write more about them in the Discord section.
const Discord = require('discord.js');
const DiscordClient = new Discord.Client();
DiscordClient.login('application_bot_token');
...
...
client: {
id: 'application_client_id',
secret: 'application_client_secret'
},
redirectUri: 'http://localhost/discord/callback',
bot: DiscordClient,
...
You can also change the name, icon, etc. of the page itself.
...
websiteTitle: 'Discord Web Dashboard',
iconUrl: 'https://domain.com/icon.png',
html404: `<!DOCTYPE html>
<html>
<head>
<title>{{websiteTitle}} - 404 Page Not Found</title>
</head>
<body>
<h1>404 Not Found</h1>
<a href="/">Take me back home</a>
</body>
</html>`,
...
You can also use themes to change the look of the page. To do this, you need to use additional modules and 'connect' them to the project.
If there are new themes, we'll write about them here, on Discord Server and Twitter.
...
theme: <ThemeModule>,
...
PS: Themes in a Github project are located in the themes folder, you can also access them there. Themes in package with npm must be used as separate modules.
npm i dbd-capriham-theme
const DBD = require('discord-dashboard');
const CaprihamTheme = require('dbd-capriham-theme');
const Dashboard = new DBD.Dashboard({
...
theme: CaprihamTheme({
privacypolicy: {
websitename: "Assistants",
websiteurl: "https://assistants.ga/",
supportemail: "support@assistants.ga"
},
websiteName: "Assistants",
iconURL: 'https://assistants.ga/ac_logo_v6.png',
index: {
card:{
title: "Assistants - The center of everything",
description: "Assistants Discord Bot management panel. Assistants Bot was created to give others the ability to do what they want. Just.<br>That's an example text.<br><br><b><i>Feel free to use HTML</i></b>",
//image: "https://www.geeklawblog.com/wp-content/uploads/sites/528/2018/12/liprofile-656x369.png",
},
information: {
title: "Information",
description: "To manage your bot, go to the <a href='/manage'>Server Management page</a>.<br><br>For a list of commands, go to the <a href='/commands'>Commands page</a>.<br><br><b><i>You can use HTML there</i></b>"
},
feeds: {
title: "Feeds",
list: [
{
icon: "fa fa-user",
text: "New user registered",
timeText: "Just now",
bg: "bg-light-info"
},
{
icon: "fa fa-server",
text: "Server issues",
timeText: "3 minutes ago",
bg: "bg-light-danger"
}
]
}
},
commands: {
pageTitle: "Commands",
table: {
title: "List",
subTitle: "All Assistants' commands",
list:
[
{
commandName: "Test command",
commandUsage: "prefix.test <arg> [op]",
commandDescription: "Lorem ipsum dolor sth"
},
{
commandName: "2nd command",
commandUsage: "oto.nd <arg> <arg2> [op]",
commandDescription: "Lorem ipsum dolor sth, arg sth arg2 stuff"
}
]
}
}
}),
...
});
Dashboard.init();
Settings - that's what we called something that is basically the most important here. Settings are divided into Sections, and each Section has its own Options.
Sounds horrible, I know. Therefore, we have created a Settings section that describes everything.
...
settings: [
{
categoryId: 'setup',
categoryName: "Setup",
categoryDescription: "Setup your bot with default settings!",
categoryOptionsList: [
{
optionId: 'lang',
optionName: "Language",
optionDescription: "Change bot's language easily",
optionType: DBD.formTypes.select({"Polish": 'pl', "English": 'en'}),
getActualSet: async ({guild}) => {
const lang = await <db>.get(`${guild.id}.lang`);
return lang || null;
},
setNew: async ({guild,newData}) => {
await <db>.set(`${guild.id}.lang`, newData);
return;
}
},
]
},
]
...
Each category has this something to it. It defines the settings sections. Because settings can be for different things, right? Therefore, the "Setup" and "Economy" sections will look separately in the basic panel like this:
Cool is not it?
Each category is divided into:
If you want the bot to be able to change the language by selecting it from the Select Box, you need to set it up. That's what Options are for.
{guild,user,newData}, where guild and user are: {id: guild / user ID}. guild#id is the server affected by the change, and the user#id is the person who made the change. newData is the new data to which the Option applies.What are the optionTypes? How to get them?
The important thing is that option Types are contained in the module itself, not in the Dashboard. Therefore, to get them, you need to do this:
const DBD = require('discord-dashboard');
...
...
optionType: DBD.formTypes.input("Placeholder", 2, 5),
...
For TypeScript:
import { formTypes } from 'discord-dashboard';
...
...
optionType: formTypes.input("Placeholder", 2, 5),
...
Currently available types are:
...
optionType: DBD.formTypes.select(list, disabled),
...
list: { displayName: valueReturned } - required
disabled: Boolean (true/false) - optional
String: selected item 'valueReturned' value
...
optionType: DBD.formTypes.input(placeholder, min, max, disabled, required),
...
placeholder: String - optional
min: Number (as min length) - optional
max: Number (as max length) - optional
disabled: Boolean (true/false) - optional
required: Boolean (true/false) - optional
String
...
optionType: DBD.formTypes.textarea(placeholder, min, max, disabled, required),
...
placeholder: String - optional
min: Number - optional (as min length)
max: Number - optional (as max length)
disabled: Boolean (true/false) - optional
required: Boolean (true/false) - optional
String
...
optionType: DBD.formTypes.switch(defaultState, disabled),
...
defaultState: Boolean (true/false) - optional
disabled: Boolean (true/false) - optional
Boolean (true/false)
...
optionType: DBD.formTypes.colorSelect(defaultColor, disabled),
...
defaultColor: Hex with the # - optional (if not set, will be white #ffffff by default) disabled: Boolean (true/false) - optional
String (Hex color with the # - for example, #fff000)
...
optionType: DBD.formTypes.channelsSelect(disabled),
...
disabled: Boolean (true/false) - optional
String (Channel ID)
...
optionType: DBD.formTypes.rolesSelect(disabled),
...
disabled: Boolean (true/false) - optional
String (Role ID)
Our module also allows you to create Custom Pages. These are pages that are not intended to be closely affiliated with Discord-Dashboard.
const DBD = require('discord-dashboard');
...
...
customPages: [
optionType: DBD.sendJson('/json-test', ({user}) => {
return {
message: 'Hello!',
};
})
]
...
For TypeScript:
import { customPagesTypes } from 'discord-dashboard';
...
...
customPages: [
customPagesTypes.sendJson('/json-test', ({user}) => {
return {
message: 'Hello!',
};
}),
]
...
There are 3 types of Custom Pages: redirect to another page, custom HTML and JSON Api.
endpoint is stuff after url to your project. For example, endpoint: '/test/stuff' will be accessible from the localhost/test/stuff URL. Localhost can be also your domain or IP adress.getDataFunction function is function to get data to return. For redirect, it will be an URL string. For custom HTML, it will be HTML string. For JSON Api, it will be an JSON Object....
DBD.customPagesTypes.redirectToUrl(endpoint: String, getDataFunction: Function<String>),
...
...
DBD.customPagesTypes.renderHtml(endpoint: String, getDataFunction: Function<String>),
...
...
DBD.customPagesTypes.sendJson(endpoint: String, getDataFunction: Function<Object>),
...
...
customPages: [
DBD.customPagesTypes.redirectToUrl('/redirect-to-foo', ({user}) => {
if(user.id)return `https://foo.com/?user=${user.id}`;
return "https://foo.com/?user=false";
}),
DBD.customPagesTypes.renderHtml('/html-render', ({user}) => {
return `
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>${user.id ? `Hello, ${user.username}!` : `You are not logged in.`}</h1>
</body>
</html>
`
}),
DBD.customPagesTypes.sendJson('/json-test', ({user}) => {
return {
error: user.id ? false : true,
message: user.id ? null : "User not logged in.",
user: user
};
})
]
...
For the proper operation of the panel, you need a few previously mentioned Discord settings. It seems difficult, but it is not.
PS. Don't show this information to ANYONE. They are confidential and only for you.
To get all of the required items listed below, you need to:
FAQs
The best way to create a Web Dashboard for your Discord Bot! No need to edit files or write the server from scratch!
The npm package discord-dashboard-dgh receives a total of 0 weekly downloads. As such, discord-dashboard-dgh popularity was classified as not popular.
We found that discord-dashboard-dgh demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.