Tutorial - Dropdown

IMPORTANT: This tutorial expects that you’ve already done the ping command tutorial so you can understand the basics of making flows, placing blocks, and inserting variables.

In this tutorial, we will be building a simple dropdown that allows users to select their favorite color.

Step 1 - Set Slash Command Trigger

Flow triggers decide what action will start your flow. In this case, we want the dropdown to appear after we send a message with a slash command.

Step 2 - Set Command Name and Description

Set an appropriate command name and description.

We’re using fav-color as the command name and Create fav color dropdown. as the description, but you can set it to anything you want.

The user will be selecting their favorite color from the dropdown, not from the command itself, so we don’t need to set any command options.

Step 3 - Add Dropdown Builder Block

Now that we have the Slash Command trigger, we need to add the dropdown. To do this, we’ll use the Embed Dropdown Builder block.

Click the Add Block button, and select Embed Dropdown Builder.

Once you add the block, set a custom ID (we used fav-color and set the type to text. You can leave everything else blank.

Step 4 - Add Dropdown Options

Now that we have the Embed Dropdown Builder block, we need to add the options to the dropdown. To do this, add Add Option to Dropdown Builder blocks to the flow.

For each option, select the dropdown, and provide a label, value, and emoji. We created 3 options for red, green, and blue. You can copy/paste these emojis: :red_circle: :green_circle: :large_blue_circle:.

Pro tip: use the Duplicate button on the Add Option to Dropdown Builder block to easily create more.

Step 5 - Add Interaction Response Block

Now that we have the dropdown, we need to send it to the user. To do this, we’ll use the Embed Reply to Interaction block.

Click the Add Block button, and select Embed Reply to Interaction.

Once you add the block, find the Dropdown Builder Data field, click Insert Variable, and add the Dropdown Data output from the Embed Dropdown Builder block.

You also need to set the Content or Body fields to something, so we used Choose your favorite color! as a prompt.

Step 6 - Create a New Flow

Now that we have the dropdown, we need to create a new flow that will handle the user’s selection.

To do this, go to the Components page and create a new flow. We’d suggest calling it something like Favorite Color Dropdown Handler.

Step 7 - Set Dropdown Select Trigger

Once you’ve created the new flow, you need to set the trigger to Dropdown Select.

Set the Dropdown ID to the same ID you used in the Embed Dropdown Builder block, which is fav-color in our case.

Step 8 - Add Interaction Response Block

Now that we have the Dropdown Select trigger, we need to send a message back to the user with their selection. To do this, we’ll use the Text Reply to Interaction block.

Click the Add Block button, and select Text Reply to Interaction.

Once you add the block, find the Message Content field, click Insert Variable, and add the Dropdown Values output from the Dropdown Select trigger.

For our example, we used <@[Executing User ID]>'s favorite color is [Dropdown Values]! as the message content.

Step 9 - You’re Done!

Go over to Discord to test it out. It should pop up in the slash command menu, and you should be able to select a color from the dropdown and get a reply.

If it isn’t showing up, click on the Slash Command trigger at the top of the first flow, and click Sync Command. It can take up to 5 minutes, but restarting your Discord client should force it to show up.

If you’re confused or have any issues, ask in Support. We’re happy to help!