Discord.JS Modals Explained in 5 Minutes
1. Introduction
In this video, you’re going to learn how to add a modal support to your Discord bot with a Discord.js version 14.
We need a way to open up our modal and to do that we’re going to use a button, which means of course you need a text channel to send a message that contains a button. Now your channel ID is going to be different than the one you see in the video, but go ahead and fetch a target channel that you can use for testing.
Next, we can fetch all of the existing messages within your testing channel, and if none exist, we now have the ability to send a new message. We’re doing this check here just so we don’t have a bunch of messages being sent every time your bot restarts.
Now we can send a new message to our channel, and this message is going to contain a button. Now if you’re new to Discord.js buttons, go ahead and watch my tutorial on the top right of this video here, or by clicking the link in the description down below. When creating our button, we set a label, which is the text the user can see, in this case it is make modal. We also have a custom ID, which is make-modal. It’s important to remember that because we’re going to use it later on. We can also set a success style, which will make the button green, and of course you can change the color of this button if you want to.
Starting up my bot, we now see a new message is being sent in our target channel, and of course this button doesn’t do anything yet.
2. Interaction Create Event
We can now listen to the interaction create event, which will be fired every single time our button is clicked or our modal is submitted.
Now, we can check if the custom ID exactly equals make-modal, which was the custom ID we assigned to our button. That way, we know for sure if the user is clicking on our button or if some other type of interaction was being ran.
We can now create our modal and apply a custom ID of modal. Of course, in your actual bot, you’re going to want a more descriptive and unique ID, but for the tutorial, this ID will work fine. We can also apply a title, which will be shown above all of the text fields when the modal shows up.
We can finally add our input field to our modal, and to do this, we can set a custom ID. We can set a label, which is what the user sees above the input field. The style can either be short or paragraph. More options might be added in the future. We can also set a Boolean for required, and then a min or max length as a number.
We can now create a paragraph input field that will allow the user to enter in their bio. In this case, we’re just setting a minimum length to 10. Obviously, we’re using a paragraph input style and we change the label.
We can now add our name and bio text input fields to our modal by calling the addComponents function. It’s important to note that we can only pass in one component per ActionRowBuilder, which is much different than buttons or other types of ActionRowBuilders might be used to. After you’ve added all of your components to your modal, we can now apply to the button click interaction by calling the showModal function and passing in our modal. This will make it visible to the user and then they can interact with it.
Now, running our bot and clicking the button, our modal will now appear, now submitting it won’t do anything because we’re not handling that interaction yet.
3. Accessing Modal Data
Now, as a second if statement within our event listener, we can check to see if the interaction is our modal being submitted. Notice how I’m checking against the modal string, which is the exact string I provided as the modal’s custom ID. Inside of this if statement, you can now access the name and bio strings that were provided by the user.
In your actual bots you can do whatever you want with this information, but for this tutorial I’m simply going to reply to the user saying what their name is and the bio that they provided.
Running the bot, we can now see the final input where I can enter my name and bio, and then the response is going to be sent to me within the text channel.
