{"id":3811,"date":"2025-07-04T18:00:00","date_gmt":"2025-07-04T18:00:00","guid":{"rendered":"https:\/\/cybrancee.com\/blog\/?p=3811"},"modified":"2025-07-04T22:10:13","modified_gmt":"2025-07-04T22:10:13","slug":"the-future-of-discord-components-v2","status":"publish","type":"post","link":"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/","title":{"rendered":"The Future of Discord: Components V2"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">Introducing Components V2!<\/h1>\n\n\n\n<p>If you have been using Discord for a long time, you have likely tried to code a Discord bot. Now here comes the interesting part, in your journey, you probably encountered these things called \u201ccomponents\u201d which include buttons, dropdown menus, embeds, etc. These components are old and can\u2019t be used in many ways, but about a month ago, Discord decided to release an update. This new update is called Components V2, and it comes with a new look and a new way to work with components. Sounds interesting? If so, let\u2019s dive into them!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is Components V2?<\/h2>\n\n\n\n<p>Alright, let&#8217;s get down to it. Components V2 creates a new method for developers to offer a modern look to their Discord servers and enrich the user experience. It\u2019s an update that lets us create new styles of messages by assembling components. Text, images, files, buttons, etc., can be placed (almost) everywhere and in (almost) any order!<\/p>\n\n\n\n<p>Imagine being able to style the output of your bot. Make interactive menus cleaner, more interesting, and use a modern design that expresses your server theme. Sounds cool, right? Let\u2019s get started!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Limitations of Components V2<\/h2>\n\n\n\n<p>Unfortunately, this update comes with some limitations, although these are not very important, it\u2019s necessary to mention them. Here are the limitations:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The ability to use content, embeds, stickers, and the poll field will be disabled.<\/li>\n\n\n\n<li>No support for audio files.<\/li>\n\n\n\n<li>No simple text preview for files.<\/li>\n\n\n\n<li>No embeds for URLs.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\">Important!<\/h3>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-text-align-left\">In this blog we are going to use the latest version of discord.js, and we assume that you know the basics of discord.js and that you have knowledge about creating a Discord app in the <a href=\"https:\/\/discord.com\/developers\/applications\">Discord Developer Portal<\/a><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">1. <strong>Getting Started<\/strong><\/h3>\n\n\n\n<p>If you are a developer, I am sure that you already have a Discord Bot with some commands or functions. So, before we begin with creating our components, make sure you grab your Bot\u2019s TOKEN and Client ID.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Creating Your Components<\/h3>\n\n\n\n<p>Now you have your bot\u2019s TOKEN and Client ID, we are now ready to build some commands with these new components<\/p>\n\n\n\n<p>Here is what we are going to use in this blog:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Buttons:<\/strong> Very easy to use and have an infinite range of functions.<\/li>\n\n\n\n<li><strong>Dropdown Menus:<\/strong> Also, quite easy to use and can be used to make interactive menus for people to use (e.g., selecting a role, selecting a ticket category)<\/li>\n\n\n\n<li><strong>Separators:<\/strong> A new component added in this update, and as the name suggests, it separates text, buttons, files, etc.<\/li>\n\n\n\n<li><strong>Containers:<\/strong> This is the most interesting component. Containers allow you to give a new face to the menu that you are building. Now, you can use <code>separators<\/code>, <code>buttons<\/code>, <code>text<\/code>,\u00a0 <code>thumbnails<\/code>, and the rest in these containers.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Some important points to mention before we begin to code these components.<\/h4>\n\n\n\n<p><strong>First point<\/strong>, if we code these components without the new flag, the bot will send them as legacy components and not the V2 ones, so we need to enable them by adding <code>IsComponentsV2<\/code>  message flag (I will show you this in just a bit)<\/p>\n\n\n\n<p><strong>Second point<\/strong>, this update comes with a new feature. Buttons and dropdown menus can now have specific IDs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Now, we will begin with the buttons<\/h3>\n\n\n\n<p>In this update, we can now place buttons anywhere we like, plus they have a new modern look. Here is a simple example of discord.js command that uses Components V2.<\/p>\n\n\n\n<p>This is a simple slash command that sends a button with the label &#8220;Ping!&#8221;, after the button is pressed, the bot replies with &#8220;Pong!&#8221; and the latency of the bot is displayed.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2\"><span style=\"align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7\">JavaScript<\/span><span role=\"button\" data-code=\"\/\/ Calling our requierments\nconst { Client, GatewayIntentBits, REST, Routes, SlashCommandBuilder, ActionRowBuilder, ButtonBuilder, ButtonStyle } = require('discord.js');\n \n \/\/ Setting our variables\nconst TOKEN = 'YOUR_BOT_TOKEN';\nconst CLIENT_ID = 'YOUR_CLIENT_ID';\n \nconst client = new Client({\n  intents: [GatewayIntentBits.Guilds],\n});\n \nclient.once('ready', async () =&gt; {\n  console.log(`\u2705 Logged in as ${client.user.tag}`);\n \n  \/\/ Register the \/ping command\n  const commands = [\n    new SlashCommandBuilder()\n      .setName('ping')\n      .setDescription('Sends a ping button')\n      .toJSON()\n  ];\n \n  const rest = new REST({ version: '10' }).setToken(TOKEN);\n  await rest.put(Routes.applicationCommands(CLIENT_ID), { body: commands });\n  console.log('\u2705 Slash command registered');\n});\n \n  \/\/ When the command is used it sends the button\nclient.on('interactionCreate', async interaction =&gt; {\n  if (interaction.isChatInputCommand() &amp;&amp; interaction.commandName === 'ping') {\n    const components = [\n        new ActionRowBuilder()\n            .addComponents(\n                new ButtonBuilder()\n                    .setStyle(ButtonStyle.Secondary)\n                    .setLabel(&quot;Ping!&quot;)\n                    .setCustomId(&quot;ping_button&quot;),\n            ),\n];\n \n    await interaction.reply({ components: components, flags: MessageFlags.IsPersistent | MessageFlags.IsComponentsV2}); \/\/ As we can see, we've set the messsage flag to IsComponentsV2 so we can use them\n  }\n    \/\/ Sends the response after the button was clicked\n  if (interaction.isButton() &amp;&amp; interaction.customId === 'ping_button') {\n    const ping = client.ws.ping;\n    await interaction.reply({ content: `\ud83c\udfd3 Pong! Latency is ${ping}ms`, ephemeral: true });\n  }\n});\n \nclient.login(TOKEN);\n\" style=\"color:#D4D4D4\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\"><code><span class=\"line\"><span style=\"color: #6A9955\">\/\/ Calling our requierments<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> { <\/span><span style=\"color: #4FC1FF\">Client<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">GatewayIntentBits<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">REST<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">Routes<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">SlashCommandBuilder<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">ActionRowBuilder<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">ButtonBuilder<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">ButtonStyle<\/span><span style=\"color: #D4D4D4\"> } = <\/span><span style=\"color: #DCDCAA\">require<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#039;discord.js&#039;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #6A9955\">\/\/ Setting our variables<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">TOKEN<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #CE9178\">&#039;YOUR_BOT_TOKEN&#039;<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">CLIENT_ID<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #CE9178\">&#039;YOUR_CLIENT_ID&#039;<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">client<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">Client<\/span><span style=\"color: #D4D4D4\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">intents:<\/span><span style=\"color: #D4D4D4\"> [<\/span><span style=\"color: #9CDCFE\">GatewayIntentBits<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">Guilds<\/span><span style=\"color: #D4D4D4\">],<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">});<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">client<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">once<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#039;ready&#039;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #569CD6\">async<\/span><span style=\"color: #D4D4D4\"> () <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">console<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">log<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">`\u2705 Logged in as <\/span><span style=\"color: #569CD6\">${<\/span><span style=\"color: #9CDCFE\">client<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">user<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">tag<\/span><span style=\"color: #569CD6\">}<\/span><span style=\"color: #CE9178\">`<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #6A9955\">\/\/ Register the \/ping command<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">commands<\/span><span style=\"color: #D4D4D4\"> = [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">SlashCommandBuilder<\/span><span style=\"color: #D4D4D4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      .<\/span><span style=\"color: #DCDCAA\">setName<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#039;ping&#039;<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      .<\/span><span style=\"color: #DCDCAA\">setDescription<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#039;Sends a ping button&#039;<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      .<\/span><span style=\"color: #DCDCAA\">toJSON<\/span><span style=\"color: #D4D4D4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  ];<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">rest<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">REST<\/span><span style=\"color: #D4D4D4\">({ <\/span><span style=\"color: #9CDCFE\">version:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#039;10&#039;<\/span><span style=\"color: #D4D4D4\"> }).<\/span><span style=\"color: #DCDCAA\">setToken<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #4FC1FF\">TOKEN<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #C586C0\">await<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">rest<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">put<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">Routes<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">applicationCommands<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #4FC1FF\">CLIENT_ID<\/span><span style=\"color: #D4D4D4\">), { <\/span><span style=\"color: #9CDCFE\">body:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">commands<\/span><span style=\"color: #D4D4D4\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">console<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">log<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#039;\u2705 Slash command registered&#039;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">});<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #6A9955\">\/\/ When the command is used it sends the button<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">client<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">on<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#039;interactionCreate&#039;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #569CD6\">async<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">isChatInputCommand<\/span><span style=\"color: #D4D4D4\">() &amp;&amp; <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">commandName<\/span><span style=\"color: #D4D4D4\"> === <\/span><span style=\"color: #CE9178\">&#039;ping&#039;<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">components<\/span><span style=\"color: #D4D4D4\"> = [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">ActionRowBuilder<\/span><span style=\"color: #D4D4D4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            .<\/span><span style=\"color: #DCDCAA\">addComponents<\/span><span style=\"color: #D4D4D4\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">ButtonBuilder<\/span><span style=\"color: #D4D4D4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    .<\/span><span style=\"color: #DCDCAA\">setStyle<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">ButtonStyle<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">Secondary<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    .<\/span><span style=\"color: #DCDCAA\">setLabel<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;Ping!&quot;<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    .<\/span><span style=\"color: #DCDCAA\">setCustomId<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;ping_button&quot;<\/span><span style=\"color: #D4D4D4\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            ),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">];<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">await<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">reply<\/span><span style=\"color: #D4D4D4\">({ <\/span><span style=\"color: #9CDCFE\">components:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">components<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">flags:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">MessageFlags<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">IsPersistent<\/span><span style=\"color: #D4D4D4\"> | <\/span><span style=\"color: #9CDCFE\">MessageFlags<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">IsComponentsV2<\/span><span style=\"color: #D4D4D4\">}); <\/span><span style=\"color: #6A9955\">\/\/ As we can see, we&#039;ve set the messsage flag to IsComponentsV2 so we can use them<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #6A9955\">\/\/ Sends the response after the button was clicked<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">isButton<\/span><span style=\"color: #D4D4D4\">() &amp;&amp; <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">customId<\/span><span style=\"color: #D4D4D4\"> === <\/span><span style=\"color: #CE9178\">&#039;ping_button&#039;<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">ping<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">client<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">ws<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">ping<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">await<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">reply<\/span><span style=\"color: #D4D4D4\">({ <\/span><span style=\"color: #9CDCFE\">content:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">`\ud83c\udfd3 Pong! Latency is <\/span><span style=\"color: #569CD6\">${<\/span><span style=\"color: #9CDCFE\">ping<\/span><span style=\"color: #569CD6\">}<\/span><span style=\"color: #CE9178\">ms`<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">ephemeral:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">true<\/span><span style=\"color: #D4D4D4\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">});<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">client<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">login<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #4FC1FF\">TOKEN<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p><strong>Now let&#8217;s start the bot and see what happens. As you can see, the command gets registered and can be used<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"504\" height=\"178\" src=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed.png\" alt=\"A discord slash command named ping\" class=\"wp-image-3815\" srcset=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed.png 504w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-300x106.png 300w\" sizes=\"auto, (max-width: 504px) 100vw, 504px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-left\"><strong>After we use the command, you can see that the bot sends the button that has a new look.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-6 is-layout-flex wp-block-gallery-is-layout-flex\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"174\" data-id=\"3813\" src=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-1.png\" alt=\"the response of the discord slash command named ping\" class=\"wp-image-3813\" srcset=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-1.png 500w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-1-300x104.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n<\/div><\/figure>\n\n\n\n<p><strong>After we press the button, you can see that the bot replies to the message and sends the specific message that you have set, along with the latency.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-7 is-layout-flex wp-block-gallery-is-layout-flex\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"233\" data-id=\"3814\" src=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-2.png\" alt=\"the response of a discord slash command that was used with the information \" class=\"wp-image-3814\" srcset=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-2.png 512w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-2-300x137.png 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Now, the second component we will explore is dropdown menus<\/h3>\n\n\n\n<p>Here we have a simple command that sends a dropdown menu that we can use to select different custom options.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2\"><span style=\"align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7\">JavaScript<\/span><span role=\"button\" data-code=\" \/\/ Calling our requierments\nconst { Client, GatewayIntentBits, REST, Routes, SlashCommandBuilder, ActionRowBuilder, MessageFlags, StringSelectMenuBuilder, StringSelectMenuOptionBuilder } = require('discord.js');\n \n \/\/ Setting our variables\nconst TOKEN = 'YOUR_BOT_TOKEN';\nconst CLIENT_ID = 'YOUR_CLIENT_ID';\n \nconst client = new Client({\n  intents: [GatewayIntentBits.Guilds],\n});\n \nclient.once('ready', async () =&gt; {\n  console.log(`\u2705 Logged in as ${client.user.tag}`);\n \n  \/\/ Register the \/menu command\n  const commands = [\n    new SlashCommandBuilder()\n      .setName('menu')\n      .setDescription('Sends a dropdown menu!')\n      .toJSON()\n  ];\n \n  const rest = new REST({ version: '10' }).setToken(TOKEN);\n  await rest.put(Routes.applicationCommands(CLIENT_ID), { body: commands });\n  console.log('\u2705 Slash command registered');\n});\n \n  \/\/ The bot sends dropdown menu after the command was used\nclient.on('interactionCreate', async interaction =&gt; {\n  if (interaction.isChatInputCommand() &amp;&amp; interaction.commandName === 'menu') {\n    const components = [\n        new ActionRowBuilder()\n            .addComponents(\n                new StringSelectMenuBuilder()\n                    .setCustomId(&quot;dropdown_menu&quot;)\n                    .setPlaceholder(&quot;Plan selector&quot;)\n                    .addOptions(\n                        new StringSelectMenuOptionBuilder()\n                            .setLabel(&quot;Discord Bot hosting&quot;)\n                            .setDescription(&quot;(cheapest option)&quot;)\n                            .setValue(&quot;discord_hosting&quot;)\n                            .setEmoji({\n                                name: &quot;\ud83e\udd16&quot;,\n                            }),\n                        new StringSelectMenuOptionBuilder()\n                            .setLabel(&quot;Game Hosting&quot;)\n                            .setValue(&quot;game_hosting&quot;)\n                            .setDescription(&quot;(best resources)&quot;)\n                            .setEmoji({\n                                name: &quot;\ud83c\udfae&quot;,\n                            }),\n                        new StringSelectMenuOptionBuilder()\n                            .setLabel(&quot;Web hosting&quot;)\n                            .setValue(&quot;web_hosting&quot;)\n                            .setEmoji({\n                                name: &quot;\ud83c\udf10&quot;,\n                            }),\n                    ),\n            ),\n];\n \n    await interaction.reply({ components: components, flags: MessageFlags.IsPersistent | MessageFlags.IsComponentsV2 }); \/\/ As we can see, we've set the messsage flag to IsComponentsV2 so we can use them\n  }\n \n  if (interaction.isStringSelectMenu() &amp;&amp; interaction.customId === 'dropdown_menu') {\n    const selection = interaction.values[0];\n    let response;\n    if (selection === 'discord_hosting') {\n      response = '\ud83e\udd16 You selected **Discord Bot Hosting**.';\n    } else if (selection === 'game_hosting') {\n      response = '\ud83c\udfae You selected **Game Hosting**.';\n    } else if (selection === 'web_hosting') {\n      response = '\ud83c\udf10 You selected **Web Hosting**.';\n    }\n    await interaction.reply({ content: response, ephemeral: true });\n  }\n});\n \nclient.login(TOKEN);\n\" style=\"color:#D4D4D4\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\"><code><span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #6A9955\">\/\/ Calling our requierments<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> { <\/span><span style=\"color: #4FC1FF\">Client<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">GatewayIntentBits<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">REST<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">Routes<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">SlashCommandBuilder<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">ActionRowBuilder<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">MessageFlags<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">StringSelectMenuBuilder<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">StringSelectMenuOptionBuilder<\/span><span style=\"color: #D4D4D4\"> } = <\/span><span style=\"color: #DCDCAA\">require<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#039;discord.js&#039;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #6A9955\">\/\/ Setting our variables<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">TOKEN<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #CE9178\">&#039;YOUR_BOT_TOKEN&#039;<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">CLIENT_ID<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #CE9178\">&#039;YOUR_CLIENT_ID&#039;<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">client<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">Client<\/span><span style=\"color: #D4D4D4\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">intents:<\/span><span style=\"color: #D4D4D4\"> [<\/span><span style=\"color: #9CDCFE\">GatewayIntentBits<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">Guilds<\/span><span style=\"color: #D4D4D4\">],<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">});<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">client<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">once<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#039;ready&#039;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #569CD6\">async<\/span><span style=\"color: #D4D4D4\"> () <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">console<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">log<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">`\u2705 Logged in as <\/span><span style=\"color: #569CD6\">${<\/span><span style=\"color: #9CDCFE\">client<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">user<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">tag<\/span><span style=\"color: #569CD6\">}<\/span><span style=\"color: #CE9178\">`<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #6A9955\">\/\/ Register the \/menu command<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">commands<\/span><span style=\"color: #D4D4D4\"> = [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">SlashCommandBuilder<\/span><span style=\"color: #D4D4D4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      .<\/span><span style=\"color: #DCDCAA\">setName<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#039;menu&#039;<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      .<\/span><span style=\"color: #DCDCAA\">setDescription<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#039;Sends a dropdown menu!&#039;<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      .<\/span><span style=\"color: #DCDCAA\">toJSON<\/span><span style=\"color: #D4D4D4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  ];<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">rest<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">REST<\/span><span style=\"color: #D4D4D4\">({ <\/span><span style=\"color: #9CDCFE\">version:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#039;10&#039;<\/span><span style=\"color: #D4D4D4\"> }).<\/span><span style=\"color: #DCDCAA\">setToken<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #4FC1FF\">TOKEN<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #C586C0\">await<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">rest<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">put<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">Routes<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">applicationCommands<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #4FC1FF\">CLIENT_ID<\/span><span style=\"color: #D4D4D4\">), { <\/span><span style=\"color: #9CDCFE\">body:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">commands<\/span><span style=\"color: #D4D4D4\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">console<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">log<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#039;\u2705 Slash command registered&#039;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">});<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #6A9955\">\/\/ The bot sends dropdown menu after the command was used<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">client<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">on<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#039;interactionCreate&#039;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #569CD6\">async<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">isChatInputCommand<\/span><span style=\"color: #D4D4D4\">() &amp;&amp; <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">commandName<\/span><span style=\"color: #D4D4D4\"> === <\/span><span style=\"color: #CE9178\">&#039;menu&#039;<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">components<\/span><span style=\"color: #D4D4D4\"> = [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">ActionRowBuilder<\/span><span style=\"color: #D4D4D4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            .<\/span><span style=\"color: #DCDCAA\">addComponents<\/span><span style=\"color: #D4D4D4\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">StringSelectMenuBuilder<\/span><span style=\"color: #D4D4D4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    .<\/span><span style=\"color: #DCDCAA\">setCustomId<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;dropdown_menu&quot;<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    .<\/span><span style=\"color: #DCDCAA\">setPlaceholder<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;Plan selector&quot;<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    .<\/span><span style=\"color: #DCDCAA\">addOptions<\/span><span style=\"color: #D4D4D4\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">StringSelectMenuOptionBuilder<\/span><span style=\"color: #D4D4D4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setLabel<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;Discord Bot hosting&quot;<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setDescription<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;(cheapest option)&quot;<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setValue<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;discord_hosting&quot;<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setEmoji<\/span><span style=\"color: #D4D4D4\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                                <\/span><span style=\"color: #9CDCFE\">name:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&quot;\ud83e\udd16&quot;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            }),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">StringSelectMenuOptionBuilder<\/span><span style=\"color: #D4D4D4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setLabel<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;Game Hosting&quot;<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setValue<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;game_hosting&quot;<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setDescription<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;(best resources)&quot;<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setEmoji<\/span><span style=\"color: #D4D4D4\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                                <\/span><span style=\"color: #9CDCFE\">name:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&quot;\ud83c\udfae&quot;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            }),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">StringSelectMenuOptionBuilder<\/span><span style=\"color: #D4D4D4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setLabel<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;Web hosting&quot;<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setValue<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;web_hosting&quot;<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setEmoji<\/span><span style=\"color: #D4D4D4\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                                <\/span><span style=\"color: #9CDCFE\">name:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&quot;\ud83c\udf10&quot;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            }),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    ),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            ),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">];<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">await<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">reply<\/span><span style=\"color: #D4D4D4\">({ <\/span><span style=\"color: #9CDCFE\">components:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">components<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">flags:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">MessageFlags<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">IsPersistent<\/span><span style=\"color: #D4D4D4\"> | <\/span><span style=\"color: #9CDCFE\">MessageFlags<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">IsComponentsV2<\/span><span style=\"color: #D4D4D4\"> }); <\/span><span style=\"color: #6A9955\">\/\/ As we can see, we&#039;ve set the messsage flag to IsComponentsV2 so we can use them<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">isStringSelectMenu<\/span><span style=\"color: #D4D4D4\">() &amp;&amp; <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">customId<\/span><span style=\"color: #D4D4D4\"> === <\/span><span style=\"color: #CE9178\">&#039;dropdown_menu&#039;<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">selection<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">values<\/span><span style=\"color: #D4D4D4\">[<\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">];<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">let<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">response<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #9CDCFE\">selection<\/span><span style=\"color: #D4D4D4\"> === <\/span><span style=\"color: #CE9178\">&#039;discord_hosting&#039;<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #9CDCFE\">response<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #CE9178\">&#039;\ud83e\udd16 You selected **Discord Bot Hosting**.&#039;<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    } <\/span><span style=\"color: #C586C0\">else<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #9CDCFE\">selection<\/span><span style=\"color: #D4D4D4\"> === <\/span><span style=\"color: #CE9178\">&#039;game_hosting&#039;<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #9CDCFE\">response<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #CE9178\">&#039;\ud83c\udfae You selected **Game Hosting**.&#039;<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    } <\/span><span style=\"color: #C586C0\">else<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #9CDCFE\">selection<\/span><span style=\"color: #D4D4D4\"> === <\/span><span style=\"color: #CE9178\">&#039;web_hosting&#039;<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #9CDCFE\">response<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #CE9178\">&#039;\ud83c\udf10 You selected **Web Hosting**.&#039;<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">await<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">reply<\/span><span style=\"color: #D4D4D4\">({ <\/span><span style=\"color: #9CDCFE\">content:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">response<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">ephemeral:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">true<\/span><span style=\"color: #D4D4D4\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">});<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">client<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">login<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #4FC1FF\">TOKEN<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p><strong>Now let\u2019s start the bot and see what happens. As you can see, the command gets registered and can be used.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-8 is-layout-flex wp-block-gallery-is-layout-flex\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"454\" height=\"156\" data-id=\"3819\" src=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-3.png\" alt=\"a discord slash command named menu\" class=\"wp-image-3819\" srcset=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-3.png 454w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-3-300x103.png 300w\" sizes=\"auto, (max-width: 454px) 100vw, 454px\" \/><\/figure>\n<\/div><\/figure>\n\n\n\n<p><strong>After we use the command, the dropdown menu gets sent and we can use it like a normal menu, but now the options have a description, and a new modern look.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-9 is-layout-flex wp-block-gallery-is-layout-flex\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"868\" height=\"390\" data-id=\"3820\" src=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-4.png\" alt=\"a discord dropdown menu with multiple options\" class=\"wp-image-3820\" srcset=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-4.png 868w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-4-300x135.png 300w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-4-768x345.png 768w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-4-512x230.png 512w\" sizes=\"auto, (max-width: 868px) 100vw, 868px\" \/><\/figure>\n<\/div><\/figure>\n\n\n\n<p><strong>If we select any option, we can see that the bot sends a confirmation message of the option that we&#8217;ve selected.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-10 is-layout-flex wp-block-gallery-is-layout-flex\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"936\" height=\"380\" data-id=\"3821\" src=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-5.png\" alt=\"a dropdown menu along with the confirmation of selecting discord bot hosting \" class=\"wp-image-3821\" srcset=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-5.png 936w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-5-300x122.png 300w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-5-768x312.png 768w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-5-512x208.png 512w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-5-920x374.png 920w\" sizes=\"auto, (max-width: 936px) 100vw, 936px\" \/><\/figure>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-11 is-layout-flex wp-block-gallery-is-layout-flex\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"898\" height=\"394\" data-id=\"3822\" src=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-6.png\" alt=\"a dropdown menu along with the confirmation of selecting web hosting\" class=\"wp-image-3822\" srcset=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-6.png 898w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-6-300x132.png 300w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-6-768x337.png 768w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-6-512x225.png 512w\" sizes=\"auto, (max-width: 898px) 100vw, 898px\" \/><\/figure>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-12 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"884\" height=\"386\" data-id=\"3823\" src=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-7.png\" alt=\"a dropdown menu along with the confirmation of selecting game hosting\" class=\"wp-image-3823\" srcset=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-7.png 884w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-7-300x131.png 300w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-7-768x335.png 768w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-7-512x224.png 512w\" sizes=\"auto, (max-width: 884px) 100vw, 884px\" \/><\/figure>\n<\/figure>\n\n\n\n<p><strong>Now, of course, this doesn&#8217;t do much; it just tells us what we&#8217;ve selected, but you can develop a more advanced command that gives a role to the user or creates a voice channel that they can control. Your imagination is your limit; you can do a lot of things with these new dropdown menus!<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Last but not least: Separators and containers.<\/h3>\n\n\n\n<p>Separators and containers unlock a much more customizable and modern alternative to an embed. Let&#8217;s dig into it!<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2\"><span style=\"align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7\">JavaScript<\/span><span role=\"button\" data-code=\" \/\/ Calling our requierments\nconst { Client, GatewayIntentBits, REST, Routes, SlashCommandBuilder, ActionRowBuilder, MessageFlags, TextDisplayBuilder, SeparatorBuilder, SeparatorSpacingSize, ButtonBuilder, ButtonStyle, ContainerBuilder } = require('discord.js');\n \n \/\/ Setting our variables\nconst TOKEN = 'YOUR_BOT_TOKEN';\nconst CLIENT_ID = 'YOUR_CLIENT_ID';\n \n  \/\/ Register the \/plan command\n  const commands = [\n    new SlashCommandBuilder()\n      .setName('plan')\n      .setDescription('Sends a container plan!')\n      .toJSON()\n  ];\n \n  const rest = new REST({ version: '10' }).setToken(TOKEN);\n  await rest.put(Routes.applicationCommands(CLIENT_ID), { body: commands });\n  console.log('\u2705 Slash command registered');\n});\n  \/\/ The bot sends the container after the command was used\nclient.on('interactionCreate', async interaction =&gt; {\n  if (interaction.isChatInputCommand() &amp;&amp; interaction.commandName === 'plan') {\n    const components = [\n        new ContainerBuilder()\n            .addTextDisplayComponents(\n                new TextDisplayBuilder().setContent(&quot;## Welcome to Cybrancee!&quot;),\n            )\n            .addTextDisplayComponents(\n                new TextDisplayBuilder().setContent(&quot;Please select the plan you want to join!&quot;),\n            )\n            .addSeparatorComponents(\n                new SeparatorBuilder().setSpacing(SeparatorSpacingSize.Small).setDivider(true),\n            )\n            .addActionRowComponents(\n                new ActionRowBuilder()\n                    .addComponents(\n                        new ButtonBuilder()\n                            .setStyle(ButtonStyle.Primary)\n                            .setLabel(&quot;Discord Bot Hosting&quot;)\n                            .setCustomId(&quot;plan_bot&quot;),\n                        new ButtonBuilder()\n                            .setStyle(ButtonStyle.Success)\n                            .setLabel(&quot;Game Hosting&quot;)\n                            .setCustomId(&quot;plan_game&quot;),\n                        new ButtonBuilder()\n                            .setStyle(ButtonStyle.Danger)\n                            .setLabel(&quot;Web Hosting&quot;)\n                            .setCustomId(&quot;plan_web&quot;),\n                    ),\n            )\n            .addSeparatorComponents(\n                new SeparatorBuilder().setSpacing(SeparatorSpacingSize.Small).setDivider(true),\n            )\n            .addActionRowComponents(\n                new ActionRowBuilder()\n                    .addComponents(\n                        new ButtonBuilder()\n                            .setStyle(ButtonStyle.Link)\n                            .setLabel(&quot;Visit our website!&quot;)\n                            .setEmoji({\n                                name: &quot;\ud83c\udf10&quot;,\n                            })\n                            .setURL(&quot;https:\/\/cybrancee.com\/&quot;),\n                    ),\n            ),\n];\n \n    await interaction.reply({ components: components, flags: MessageFlags.IsPersistent | MessageFlags.IsComponentsV2 }); \/\/ As we can see, we've set the messsage flag to IsComponentsV2 so we can use them\n}});\n \n  client.on('interactionCreate', async interaction =&gt; {\n  if (!interaction.isButton()) return;\n \n  switch (interaction.customId) {\n    case 'plan_bot':\n      await interaction.reply({ content: '\ud83e\udd16 You selected **Discord Bot Hosting**.', ephemeral: true });\n      break;\n    case 'plan_game':\n      await interaction.reply({ content: '\ud83c\udfae You selected **Game Hosting**.', ephemeral: true });\n      break;\n    case 'plan_web':\n      await interaction.reply({ content: '\ud83c\udf10 You selected **Web Hosting**.', ephemeral: true });\n      break;\n  }\n});\n \nclient.login(TOKEN);\n\" style=\"color:#D4D4D4\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\"><code><span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #6A9955\">\/\/ Calling our requierments<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> { <\/span><span style=\"color: #4FC1FF\">Client<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">GatewayIntentBits<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">REST<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">Routes<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">SlashCommandBuilder<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">ActionRowBuilder<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">MessageFlags<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">TextDisplayBuilder<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">SeparatorBuilder<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">SeparatorSpacingSize<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">ButtonBuilder<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">ButtonStyle<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #4FC1FF\">ContainerBuilder<\/span><span style=\"color: #D4D4D4\"> } = <\/span><span style=\"color: #DCDCAA\">require<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#039;discord.js&#039;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #6A9955\">\/\/ Setting our variables<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">TOKEN<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #CE9178\">&#039;YOUR_BOT_TOKEN&#039;<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">CLIENT_ID<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #CE9178\">&#039;YOUR_CLIENT_ID&#039;<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #6A9955\">\/\/ Register the \/plan command<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">commands<\/span><span style=\"color: #D4D4D4\"> = [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">SlashCommandBuilder<\/span><span style=\"color: #D4D4D4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      .<\/span><span style=\"color: #DCDCAA\">setName<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#039;plan&#039;<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      .<\/span><span style=\"color: #DCDCAA\">setDescription<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#039;Sends a container plan!&#039;<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      .<\/span><span style=\"color: #DCDCAA\">toJSON<\/span><span style=\"color: #D4D4D4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  ];<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">rest<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">REST<\/span><span style=\"color: #D4D4D4\">({ <\/span><span style=\"color: #9CDCFE\">version:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#039;10&#039;<\/span><span style=\"color: #D4D4D4\"> }).<\/span><span style=\"color: #DCDCAA\">setToken<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #4FC1FF\">TOKEN<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #C586C0\">await<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">rest<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">put<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">Routes<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">applicationCommands<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #4FC1FF\">CLIENT_ID<\/span><span style=\"color: #D4D4D4\">), { <\/span><span style=\"color: #9CDCFE\">body:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">commands<\/span><span style=\"color: #D4D4D4\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">console<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">log<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#039;\u2705 Slash command registered&#039;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">});<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #6A9955\">\/\/ The bot sends the container after the command was used<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">client<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">on<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#039;interactionCreate&#039;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #569CD6\">async<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">isChatInputCommand<\/span><span style=\"color: #D4D4D4\">() &amp;&amp; <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">commandName<\/span><span style=\"color: #D4D4D4\"> === <\/span><span style=\"color: #CE9178\">&#039;plan&#039;<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #569CD6\">const<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #4FC1FF\">components<\/span><span style=\"color: #D4D4D4\"> = [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">ContainerBuilder<\/span><span style=\"color: #D4D4D4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            .<\/span><span style=\"color: #DCDCAA\">addTextDisplayComponents<\/span><span style=\"color: #D4D4D4\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">TextDisplayBuilder<\/span><span style=\"color: #D4D4D4\">().<\/span><span style=\"color: #DCDCAA\">setContent<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;## Welcome to Cybrancee!&quot;<\/span><span style=\"color: #D4D4D4\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            )<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            .<\/span><span style=\"color: #DCDCAA\">addTextDisplayComponents<\/span><span style=\"color: #D4D4D4\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">TextDisplayBuilder<\/span><span style=\"color: #D4D4D4\">().<\/span><span style=\"color: #DCDCAA\">setContent<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;Please select the plan you want to join!&quot;<\/span><span style=\"color: #D4D4D4\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            )<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            .<\/span><span style=\"color: #DCDCAA\">addSeparatorComponents<\/span><span style=\"color: #D4D4D4\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">SeparatorBuilder<\/span><span style=\"color: #D4D4D4\">().<\/span><span style=\"color: #DCDCAA\">setSpacing<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">SeparatorSpacingSize<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">Small<\/span><span style=\"color: #D4D4D4\">).<\/span><span style=\"color: #DCDCAA\">setDivider<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #569CD6\">true<\/span><span style=\"color: #D4D4D4\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            )<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            .<\/span><span style=\"color: #DCDCAA\">addActionRowComponents<\/span><span style=\"color: #D4D4D4\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">ActionRowBuilder<\/span><span style=\"color: #D4D4D4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    .<\/span><span style=\"color: #DCDCAA\">addComponents<\/span><span style=\"color: #D4D4D4\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">ButtonBuilder<\/span><span style=\"color: #D4D4D4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setStyle<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">ButtonStyle<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">Primary<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setLabel<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;Discord Bot Hosting&quot;<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setCustomId<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;plan_bot&quot;<\/span><span style=\"color: #D4D4D4\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">ButtonBuilder<\/span><span style=\"color: #D4D4D4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setStyle<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">ButtonStyle<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">Success<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setLabel<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;Game Hosting&quot;<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setCustomId<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;plan_game&quot;<\/span><span style=\"color: #D4D4D4\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">ButtonBuilder<\/span><span style=\"color: #D4D4D4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setStyle<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">ButtonStyle<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">Danger<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setLabel<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;Web Hosting&quot;<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setCustomId<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;plan_web&quot;<\/span><span style=\"color: #D4D4D4\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    ),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            )<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            .<\/span><span style=\"color: #DCDCAA\">addSeparatorComponents<\/span><span style=\"color: #D4D4D4\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">SeparatorBuilder<\/span><span style=\"color: #D4D4D4\">().<\/span><span style=\"color: #DCDCAA\">setSpacing<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">SeparatorSpacingSize<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">Small<\/span><span style=\"color: #D4D4D4\">).<\/span><span style=\"color: #DCDCAA\">setDivider<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #569CD6\">true<\/span><span style=\"color: #D4D4D4\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            )<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            .<\/span><span style=\"color: #DCDCAA\">addActionRowComponents<\/span><span style=\"color: #D4D4D4\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">ActionRowBuilder<\/span><span style=\"color: #D4D4D4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    .<\/span><span style=\"color: #DCDCAA\">addComponents<\/span><span style=\"color: #D4D4D4\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        <\/span><span style=\"color: #569CD6\">new<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">ButtonBuilder<\/span><span style=\"color: #D4D4D4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setStyle<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">ButtonStyle<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">Link<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setLabel<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;Visit our website!&quot;<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setEmoji<\/span><span style=\"color: #D4D4D4\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                                <\/span><span style=\"color: #9CDCFE\">name:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&quot;\ud83c\udf10&quot;<\/span><span style=\"color: #D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            })<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                            .<\/span><span style=\"color: #DCDCAA\">setURL<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;https:\/\/cybrancee.com\/&quot;<\/span><span style=\"color: #D4D4D4\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    ),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            ),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">];<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">await<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">reply<\/span><span style=\"color: #D4D4D4\">({ <\/span><span style=\"color: #9CDCFE\">components:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">components<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">flags:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">MessageFlags<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">IsPersistent<\/span><span style=\"color: #D4D4D4\"> | <\/span><span style=\"color: #9CDCFE\">MessageFlags<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">IsComponentsV2<\/span><span style=\"color: #D4D4D4\"> }); <\/span><span style=\"color: #6A9955\">\/\/ As we can see, we&#039;ve set the messsage flag to IsComponentsV2 so we can use them<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}});<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">client<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">on<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#039;interactionCreate&#039;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #569CD6\">async<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">=&gt;<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\"> (!<\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">isButton<\/span><span style=\"color: #D4D4D4\">()) <\/span><span style=\"color: #C586C0\">return<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #C586C0\">switch<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">customId<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">case<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#039;plan_bot&#039;<\/span><span style=\"color: #D4D4D4\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #C586C0\">await<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">reply<\/span><span style=\"color: #D4D4D4\">({ <\/span><span style=\"color: #9CDCFE\">content:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#039;\ud83e\udd16 You selected **Discord Bot Hosting**.&#039;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">ephemeral:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">true<\/span><span style=\"color: #D4D4D4\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #C586C0\">break<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">case<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#039;plan_game&#039;<\/span><span style=\"color: #D4D4D4\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #C586C0\">await<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">reply<\/span><span style=\"color: #D4D4D4\">({ <\/span><span style=\"color: #9CDCFE\">content:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#039;\ud83c\udfae You selected **Game Hosting**.&#039;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">ephemeral:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">true<\/span><span style=\"color: #D4D4D4\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #C586C0\">break<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #C586C0\">case<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#039;plan_web&#039;<\/span><span style=\"color: #D4D4D4\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #C586C0\">await<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">interaction<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">reply<\/span><span style=\"color: #D4D4D4\">({ <\/span><span style=\"color: #9CDCFE\">content:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">&#039;\ud83c\udf10 You selected **Web Hosting**.&#039;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">ephemeral:<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">true<\/span><span style=\"color: #D4D4D4\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #C586C0\">break<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">});<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #9CDCFE\">client<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">login<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #4FC1FF\">TOKEN<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p><strong>Now let&#8217;s start the bot and see what happens. The command (as always) gets registered and can be used.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-13 is-layout-flex wp-block-gallery-is-layout-flex\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"442\" height=\"146\" data-id=\"3824\" src=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-8.png\" alt=\"a discord slash command named plan\" class=\"wp-image-3824\" srcset=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-8.png 442w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-8-300x99.png 300w\" sizes=\"auto, (max-width: 442px) 100vw, 442px\" \/><\/figure>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-14 is-layout-flex wp-block-gallery-is-layout-flex\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"924\" height=\"474\" data-id=\"3825\" src=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-9.png\" alt=\"a discord container with buttons , text and separators\" class=\"wp-image-3825\" srcset=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-9.png 924w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-9-300x154.png 300w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-9-768x394.png 768w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-9-512x263.png 512w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-9-920x472.png 920w\" sizes=\"auto, (max-width: 924px) 100vw, 924px\" \/><\/figure>\n<\/div><\/figure>\n\n\n\n<p><strong>As you can see, the bot sends the container with the buttons and separators that we\u2019ve set. I think you noticed already that we can now place buttons inside the container and with different colors. Very cool, right? This gives us an infinite number of possibilities.<\/strong><\/p>\n\n\n\n<p><strong>As always, if we press any of the buttons, it sends us a confirmation, and the link button sends us to the website.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-15 is-layout-flex wp-block-gallery-is-layout-flex\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"936\" height=\"589\" data-id=\"3826\" src=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-10.png\" alt=\"a container along with a selection confirmation for discord bot hosting \" class=\"wp-image-3826\" srcset=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-10.png 936w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-10-300x189.png 300w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-10-768x483.png 768w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-10-512x322.png 512w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-10-920x579.png 920w\" sizes=\"auto, (max-width: 936px) 100vw, 936px\" \/><\/figure>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-16 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"472\" height=\"338\" data-id=\"3828\" src=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-12.png\" alt=\"a container along with a selection confirmation for web hosting\" class=\"wp-image-3828\" srcset=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-12.png 472w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-12-300x215.png 300w\" sizes=\"auto, (max-width: 472px) 100vw, 472px\" \/><\/figure>\n<\/figure>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-17 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"473\" height=\"315\" data-id=\"3827\" src=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-11.png\" alt=\"a container along with a selection confirmation for game hosting\" class=\"wp-image-3827\" srcset=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-11.png 473w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-11-300x200.png 300w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><\/figure>\n<\/figure>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-18 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"904\" height=\"574\" data-id=\"3829\" src=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-13.png\" alt=\"a leaving discord message sending to cybrancee.com website\" class=\"wp-image-3829\" srcset=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-13.png 904w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-13-300x190.png 300w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-13-768x488.png 768w, https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/unnamed-13-512x325.png 512w\" sizes=\"auto, (max-width: 904px) 100vw, 904px\" \/><\/figure>\n<\/figure>\n\n\n\n<p><strong>But this is not all of it, just by adding this line of code when creating the container, you can mark it as a spoiler.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2\"><span style=\"align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7\">JavaScript<\/span><span role=\"button\" data-code=\".setSpoiler(true)\" style=\"color:#D4D4D4\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\"><code><span class=\"line\"><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">setSpoiler<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #569CD6\">true<\/span><span style=\"color: #D4D4D4\">)<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-19 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"494\" height=\"224\" data-id=\"3833\" src=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/06\/ezgif-100d380a5ab1f3.gif\" alt=\"a container marked as spoiler\" class=\"wp-image-3833\"\/><\/figure>\n<\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">If you encounter any problems making these manually, you can use this site to create your custom menus, containers, buttons, etc.<\/h5>\n\n\n\n<p><a href=\"https:\/\/discord.builders\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">discord.builders<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Testing and Feedback<\/h3>\n\n\n\n<p>Before rolling out these new features to your whole community, test them first. Test them by yourself or get a few users to test them and give you feedback. This will allow you to fix anything that does not work exactly right and to make changes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why Use Components V2?<\/h2>\n\n\n\n<p>You might ask yourself, \u201cDo I really need this?\u201d If you want to build up a big community or become the next best developer, then yes! Components V2 gives you new ways to make your community more interesting. It\u2019s all about creating an interactive atmosphere where users can interact with each other.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Final Thoughts<\/h2>\n\n\n\n<p>Overall, Components V2 brought a huge improvement to how developers design interactive experiences in Discord. It feels like Discord has finally given developers like me the tools we\u2019ve needed for a long time \u2013 more control, better structure, and cleaner code. Whether you\u2019re building advanced Discord bots or just experimenting for fun, Components V2 makes the process smoother and more enjoyable. I genuinely believe it\u2019s a must-try for anyone working with Discord bots.<\/p>\n","protected":false},"excerpt":{"rendered":"Introducing Components V2! If you have been using Discord for a long time, you have likely tried to&hellip;","protected":false},"author":10,"featured_media":4545,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[5],"tags":[],"class_list":{"0":"post-3811","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-discord-bot-hosting","8":"cs-entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>The Future of Discord: Components V2<\/title>\n<meta name=\"description\" content=\"This new update is called Components V2, and it comes with a new look and a new way to work with components. Sounds interesting?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Future of Discord: Components V2\" \/>\n<meta property=\"og:description\" content=\"This new update is called Components V2, and it comes with a new look and a new way to work with components. Sounds interesting?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/\" \/>\n<meta property=\"og:site_name\" content=\"Cybrancee Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cybrancee\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-04T18:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-04T22:10:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/07\/componentsV2InformationBanner.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"564\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Denis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cybrancee\" \/>\n<meta name=\"twitter:site\" content=\"@cybrancee\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Denis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/\"},\"author\":{\"name\":\"Denis\",\"@id\":\"https:\/\/cybrancee.com\/blog\/#\/schema\/person\/9f00e117246b808e567c309b7a866a4b\"},\"headline\":\"The Future of Discord: Components V2\",\"datePublished\":\"2025-07-04T18:00:00+00:00\",\"dateModified\":\"2025-07-04T22:10:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/\"},\"wordCount\":1191,\"publisher\":{\"@id\":\"https:\/\/cybrancee.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/07\/componentsV2InformationBanner.jpg\",\"articleSection\":[\"Discord Bot Hosting\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/\",\"url\":\"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/\",\"name\":\"The Future of Discord: Components V2\",\"isPartOf\":{\"@id\":\"https:\/\/cybrancee.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/07\/componentsV2InformationBanner.jpg\",\"datePublished\":\"2025-07-04T18:00:00+00:00\",\"dateModified\":\"2025-07-04T22:10:13+00:00\",\"description\":\"This new update is called Components V2, and it comes with a new look and a new way to work with components. Sounds interesting?\",\"breadcrumb\":{\"@id\":\"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/#primaryimage\",\"url\":\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/07\/componentsV2InformationBanner.jpg\",\"contentUrl\":\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/07\/componentsV2InformationBanner.jpg\",\"width\":1600,\"height\":564,\"caption\":\"Discord components V2 banner with information\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cybrancee.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Future of Discord: Components V2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cybrancee.com\/blog\/#website\",\"url\":\"https:\/\/cybrancee.com\/blog\/\",\"name\":\"Cybrancee Blog\",\"description\":\"Gaming News\",\"publisher\":{\"@id\":\"https:\/\/cybrancee.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cybrancee.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cybrancee.com\/blog\/#organization\",\"name\":\"Cybrancee\",\"url\":\"https:\/\/cybrancee.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cybrancee.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2024\/08\/logo.png\",\"contentUrl\":\"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2024\/08\/logo.png\",\"width\":466,\"height\":100,\"caption\":\"Cybrancee\"},\"image\":{\"@id\":\"https:\/\/cybrancee.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/cybrancee\/\",\"https:\/\/x.com\/cybrancee\",\"https:\/\/www.instagram.com\/cybrancee\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/cybrancee.com\/blog\/#\/schema\/person\/9f00e117246b808e567c309b7a866a4b\",\"name\":\"Denis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/c0a3ff07fcf30f948d3bada6460c97de14925400844f2ce6ac085e6cb1932d99?s=96&d=retro&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c0a3ff07fcf30f948d3bada6460c97de14925400844f2ce6ac085e6cb1932d99?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c0a3ff07fcf30f948d3bada6460c97de14925400844f2ce6ac085e6cb1932d99?s=96&d=retro&r=g\",\"caption\":\"Denis\"},\"url\":\"https:\/\/cybrancee.com\/blog\/author\/denis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Future of Discord: Components V2","description":"This new update is called Components V2, and it comes with a new look and a new way to work with components. Sounds interesting?","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/","og_locale":"en_US","og_type":"article","og_title":"The Future of Discord: Components V2","og_description":"This new update is called Components V2, and it comes with a new look and a new way to work with components. Sounds interesting?","og_url":"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/","og_site_name":"Cybrancee Blog","article_publisher":"https:\/\/www.facebook.com\/cybrancee\/","article_published_time":"2025-07-04T18:00:00+00:00","article_modified_time":"2025-07-04T22:10:13+00:00","og_image":[{"width":1600,"height":564,"url":"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/07\/componentsV2InformationBanner.jpg","type":"image\/jpeg"}],"author":"Denis","twitter_card":"summary_large_image","twitter_creator":"@cybrancee","twitter_site":"@cybrancee","twitter_misc":{"Written by":"Denis","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/#article","isPartOf":{"@id":"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/"},"author":{"name":"Denis","@id":"https:\/\/cybrancee.com\/blog\/#\/schema\/person\/9f00e117246b808e567c309b7a866a4b"},"headline":"The Future of Discord: Components V2","datePublished":"2025-07-04T18:00:00+00:00","dateModified":"2025-07-04T22:10:13+00:00","mainEntityOfPage":{"@id":"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/"},"wordCount":1191,"publisher":{"@id":"https:\/\/cybrancee.com\/blog\/#organization"},"image":{"@id":"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/#primaryimage"},"thumbnailUrl":"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/07\/componentsV2InformationBanner.jpg","articleSection":["Discord Bot Hosting"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/","url":"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/","name":"The Future of Discord: Components V2","isPartOf":{"@id":"https:\/\/cybrancee.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/#primaryimage"},"image":{"@id":"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/#primaryimage"},"thumbnailUrl":"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/07\/componentsV2InformationBanner.jpg","datePublished":"2025-07-04T18:00:00+00:00","dateModified":"2025-07-04T22:10:13+00:00","description":"This new update is called Components V2, and it comes with a new look and a new way to work with components. Sounds interesting?","breadcrumb":{"@id":"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/#primaryimage","url":"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/07\/componentsV2InformationBanner.jpg","contentUrl":"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2025\/07\/componentsV2InformationBanner.jpg","width":1600,"height":564,"caption":"Discord components V2 banner with information"},{"@type":"BreadcrumbList","@id":"https:\/\/cybrancee.com\/blog\/the-future-of-discord-components-v2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cybrancee.com\/blog\/"},{"@type":"ListItem","position":2,"name":"The Future of Discord: Components V2"}]},{"@type":"WebSite","@id":"https:\/\/cybrancee.com\/blog\/#website","url":"https:\/\/cybrancee.com\/blog\/","name":"Cybrancee Blog","description":"Gaming News","publisher":{"@id":"https:\/\/cybrancee.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cybrancee.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cybrancee.com\/blog\/#organization","name":"Cybrancee","url":"https:\/\/cybrancee.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cybrancee.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2024\/08\/logo.png","contentUrl":"https:\/\/cybrancee.com\/blog\/wp-content\/uploads\/2024\/08\/logo.png","width":466,"height":100,"caption":"Cybrancee"},"image":{"@id":"https:\/\/cybrancee.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/cybrancee\/","https:\/\/x.com\/cybrancee","https:\/\/www.instagram.com\/cybrancee\/"]},{"@type":"Person","@id":"https:\/\/cybrancee.com\/blog\/#\/schema\/person\/9f00e117246b808e567c309b7a866a4b","name":"Denis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c0a3ff07fcf30f948d3bada6460c97de14925400844f2ce6ac085e6cb1932d99?s=96&d=retro&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c0a3ff07fcf30f948d3bada6460c97de14925400844f2ce6ac085e6cb1932d99?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c0a3ff07fcf30f948d3bada6460c97de14925400844f2ce6ac085e6cb1932d99?s=96&d=retro&r=g","caption":"Denis"},"url":"https:\/\/cybrancee.com\/blog\/author\/denis\/"}]}},"_links":{"self":[{"href":"https:\/\/cybrancee.com\/blog\/wp-json\/wp\/v2\/posts\/3811","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cybrancee.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cybrancee.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cybrancee.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/cybrancee.com\/blog\/wp-json\/wp\/v2\/comments?post=3811"}],"version-history":[{"count":14,"href":"https:\/\/cybrancee.com\/blog\/wp-json\/wp\/v2\/posts\/3811\/revisions"}],"predecessor-version":[{"id":3929,"href":"https:\/\/cybrancee.com\/blog\/wp-json\/wp\/v2\/posts\/3811\/revisions\/3929"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cybrancee.com\/blog\/wp-json\/wp\/v2\/media\/4545"}],"wp:attachment":[{"href":"https:\/\/cybrancee.com\/blog\/wp-json\/wp\/v2\/media?parent=3811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cybrancee.com\/blog\/wp-json\/wp\/v2\/categories?post=3811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cybrancee.com\/blog\/wp-json\/wp\/v2\/tags?post=3811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}