diff --git a/docs/quick_start/Getting_Started.mdx b/docs/quick_start/Getting_Started.mdx
index cc14ea00dc..1c4a8b9690 100644
--- a/docs/quick_start/Getting_Started.mdx
+++ b/docs/quick_start/Getting_Started.mdx
@@ -2,9 +2,12 @@
# Building your first Discord app
-Discord apps let you customize and extend Discord using a collection of APIs and interactive features. This guide will walk you through building your first Discord app using JavaScript, and by the end you'll have an app that uses slash commands, sends messages, and responds to component interactions.
+[Discord apps](#DOCS_QUICK_START_OVERVIEW_OF_APPS) let you customize and extend Discord using a collection of APIs and interactive features. This guide will walk you through building your first Discord app using JavaScript and by the end you'll have an app that uses slash commands, sends messages, and responds to component interactions.
-We'll be building a Discord app that lets server members play rock-paper-scissors (with 7 choices instead of the usual 3). This guide is beginner-focused, but it assumes a basic understanding of [JavaScript](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics).
+> info
+> If you're interested in building a game or social experience in an iframe, you can follow the tutorial for [building an Activity](#DOCS_ACTIVITIES_BUILDING_AN_ACTIVITY)
+
+We'll be building a Discord app that lets users play rock-paper-scissors (with 7 choices instead of 3). This guide is beginner-focused, but it assumes a basic understanding of [JavaScript](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics).
Here's what the finished app will look like:
@@ -13,10 +16,10 @@ Here's what the finished app will look like:
To make the user flow a bit more explicit:
-1. User 1 initiates a new game and picks their object using the app's `/challenge` slash command
+1. User A initiates a new game and picks their object using the app's `/challenge` slash command
2. A message is sent to channel with a button inviting others to accept the challenge
-3. User 2 presses the **Accept** button
-4. User 2 is sent an ephemeral message where they select their object of choice
+3. User B presses the **Accept** button
+4. User B is sent an ephemeral message where they select their object of choice
5. The result of the game is posted back into the original channel for all to see
@@ -24,11 +27,57 @@ To make the user flow a bit more explicit:
- **[GitHub repository](https://github.com/discord/discord-example-app)** where the code from this guide lives along with some additional feature-specific code examples.
- **[discord-interactions](https://github.com/discord/discord-interactions-js)**, a library that provides types and helper functions for Discord apps.
- **[Express](https://expressjs.com)**, a popular JavaScript web framework we'll use to create a server where Discord can send us requests.
-- **[Glitch](https://glitch.com/)**, an online environment that simplifies building and hosting apps during early prototyping and development. You can also develop locally with a tool like **[ngrok](https://ngrok.com/)**.
+- **[ngrok](https://ngrok.com/)**, a tool that lets us tunnel our local server to a public URL where Discord can send requests.
---
+## Step 0: Project Setup
+
+Before we get started, you'll need to set up your local environment and get the project code from the [sample app repository](https://github.com/discord/discord-example-app).
+
+> info
+> We'll be developing our app locally with a little help from [ngrok](https://ngrok.com/), but you can use your preferred development environment.
+
+If you don't have [NodeJS](https://nodejs.org/en/download/) installed, install that first.
+
+After NodeJS is installed, open your command line and clone the project code:
+
+```
+git clone https://github.com/discord/discord-example-app.git
+```
+
+Then navigate to the directory and install the project's dependencies:
+
+```
+# navigate to directory
+cd discord-example-app
+
+# install dependencies
+npm install
+```
+
+
+```
+├── examples -> short, feature-specific sample apps
+│ ├── app.js -> finished app.js code
+│ ├── button.js
+│ ├── command.js
+│ ├── modal.js
+│ ├── selectMenu.js
+├── .env -> your credentials and IDs
+├── app.js -> main entrypoint for app
+├── commands.js -> slash command payloads + helpers
+├── game.js -> logic specific to Rock, Paper, Scissors
+├── utils.js -> utility functions and constants
+├── package.json
+├── README.md
+└── .gitignore
+```
+
+
+With that out of the way, open your new project in the code editor of your choice, and we'll move ahead to setting up your Discord app.
+
## Step 1: Creating an app
First, you'll need to create an app in the developer portal if you don't have one already:
@@ -39,126 +88,114 @@ Enter a name for your app, then press **Create**.
After you create your app, you'll land on the **General Overview** page of the app's settings where you can update basic information about your app like its description and icon. You'll also see an **Application ID** and **Interactions Endpoint URL**, which we'll use a bit later in the guide.
-### Configuring your bot
-
-Next we'll configure the [bot user](#DOCS_TOPICS_OAUTH2/bot-vs-user-accounts) for your app, which allows it to appear and behave similarly to other server members.
+### Fetching your credentials
-On the left hand sidebar click **Bot**. On this page, you can configure settings like its [privileged intents](#DOCS_TOPICS_GATEWAY/privileged-intents) or whether it can be installed by other users.
+We'll need to set up and fetch a few sensitive values for your app, like its token and ID.
-
-Intents determine which events Discord will send your app when you're creating a [Gateway API connection](#DOCS_TOPICS_GATEWAY). For example, if you want your app to do something when users add a reaction to a message, you can pass the `GUILD_MESSAGE_REACTIONS` (`1 << 10`) intent.
+> warn
+> Your token is used to authorize API requests and carry your app's permissions, so they are *highly* sensitive. Make sure to never share your token or check it into any kind of version control.
-Some intents are [privileged](#DOCS_TOPICS_GATEWAY/privileged-intents), meaning they allow your app to access data that may be considered sensitive (like the contents of messages). Privileged intents appear and can be toggled on the **Bot** page in your app's settings. Standard, non-privileged intents don't require any additional permissions or configurations.
+Back in your project folder, rename the `.sample.env` file to `.env`. `.env` is where we'll store all of your app's credentials.
-More information about intents and a full list of available intents, along with their associated events, is in the [Gateway documentation](#DOCS_TOPICS_GATEWAY/gateway-intents).
-
+We'll need three values from your app's settings for your `.env` file:
-
+- On the **General Information** page, copy the value for **Application ID**. In `.env`, replace `` with the ID you copied.
+- Back on the **General Information** page, copy the value for **Public Key**, which is used to ensure HTTP requests are coming from Discord. In `.env`, replace `` with the value you copied.
+- On the **Bot** page under **Token**, click "Reset Token" to generate a new bot token. In `.env`, replace `` with your new token.
-There's also a **Token** section on the **Bot** page, which allows you to copy and reset your bot's token.
+> warn
+> You won't be able to view your token again unless you regenerate it, so make sure to keep it somewhere safe (like in a password manager).
-Bot tokens are used to authorize API requests and carry your bot user's permissions, making them *highly sensitive*. Make sure to *never* share your token or check it into any kind of version control.
+Now that you have the credentials you need, lets configure your bot user and installation settings.
-Go ahead and copy the token, and store the token somewhere safe (like in a password manager).
+### Configuring your bot
-> warn
-> You won't be able to view your token again unless you regenerate it, so make sure to keep it somewhere safe.
+Newly-created apps have a bot user enabled by default. Bot users allow your app to appear and behave similarly to other server members when it's [installed to a server](#DOCS_QUICK_START_OVERVIEW_OF_APPS/where-are-apps-installed).
-### Adding scopes and bot permissions
+On the left hand sidebar in your app's settings, there's a **Bot** page (where we fetched the token from). On this page, you can also configure settings like its [privileged intents](#DOCS_TOPICS_GATEWAY/privileged-intents) or whether it can be installed by other users.
-Apps need approval from installing users to perform actions in Discord (like creating a slash command or fetching a list of server members). Let's select a few scopes and permissions to request before installing the app.
+
+Intents determine which events Discord will send your app when you're creating a [Gateway API connection](#DOCS_TOPICS_GATEWAY). For example, if you want your app to perform an action when users add a reaction to a message, you can pass the `GUILD_MESSAGE_REACTIONS` (`1 << 10`) intent.
-
-When creating an app, scopes and permissions determine what your app can do and access in Discord servers.
+Some intents are [privileged](#DOCS_TOPICS_GATEWAY/privileged-intents), meaning they allow your app to access data that may be considered sensitive (like the contents of messages). Privileged intents can be toggled on the **Bot** page in your app's settings, but they must be approved before you [verify your app](https://support-dev.discord.com/hc/en-us/articles/23926564536471-How-Do-I-Get-My-App-Verified). Standard, non-privileged intents don't require any additional permissions or configurations.
-- [OAuth2 Scopes](#DOCS_TOPICS_OAUTH2/shared-resources-oauth2-scopes) determine what data access and actions your app can take, granted on behalf of an installing or authenticating user.
-- [Permissions](#DOCS_TOPICS_PERMISSIONS/permission-overwrites) are the granular permissions for your bot user, the same as other users in Discord have. They can be approved by the installing user or later updated within server settings or with [permission overwrites](#DOCS_TOPICS_PERMISSIONS/permission-overwrites).
+More information about intents and a full list of available intents (along with their associated events) is in the [Gateway documentation](#DOCS_TOPICS_GATEWAY/gateway-intents).
-Click on **OAuth2** in the left sidebar, then select **URL generator**.
+For now, we don't need to configure anything additional here, but you may need to in the future depending on your app's use case. Let's go ahead and get our app ready for installation.
-> info
-> The URL generator creates an installation link based on the scopes and permissions you select for your app. You can use the link to install the app onto your own server, or share it with others so they can install it.
+### Choosing installation contexts
-For now, just add the **`bot` scope**, which adds your bot user.
+Now we'll select where your app can be installed in Discord, which is determined by the [installation contexts](#DOCS_RESOURCES_APPLICATION/installation-context) that your app supports.
-After you select `bot`, you can also select different permissions for your bot. For now, just check **Send Messages**.
+
+**Installation contexts** determine where your app can be installed: to servers, to users, or both. Apps can choose which installation contexts they support within the app's settings.
-See a list of all [OAuth2 scopes](#DOCS_TOPICS_OAUTH2/shared-resources-oauth2-scopes), or read more on [permissions](#DOCS_TOPICS_PERMISSIONS) in the documentation.
+- Apps installed in a **[server context](#DOCS_RESOURCES_APPLICATION/server-context)** (server-installed apps) must be authorized by a server member with the `MANAGE_GUILD` permission, and are visible to all members of the server.
+- Apps installed in a **[user context](#DOCS_RESOURCES_APPLICATION/user-context)** (user-installed apps) are visible only to the authorizing user, and therefore don't require any server-specific permissions. Apps installed to a user context are visible across all of the user's servers, DMs, and GDMs—however, they're limited to using commands.
+
-### Installing your app
+Click on **Installation** in the left sidebar, then under **Installation Contexts** make sure both "User Install" and "Guild Install" are selected.
-Once you add scopes, you should see a URL that you can copy to install your app.
+> info
+> Some apps may only want to support one installation context—for example, a moderation app may only support a server context. However, by default, we recommend supporting both installation contexts. For detailed information about supporting user-installed apps, you can read the [user-installable app tutorial](#DOCS_TUTORIALS_DEVELOPING_A_USER_INSTALLABLE_APP).
-
+### Setting up an install link
-> info
-> When developing apps, you should build and test in a server that isn't actively used by others. If you don't have your own server already, you can [create one for free](https://support.discord.com/hc/en-us/articles/204849977-How-do-I-create-a-server-).
+[Install links](#DOCS_RESOURCES_APPLICATION/install-links) provide an easy way for users to install your app in Discord. We'll set up the default [Discord Provided Link](#DOCS_RESOURCES_APPLICATION/discord-provided-link), but you can read more about the different type of install links in the [Application documentation](#DOCS_RESOURCES_APPLICATION/types-of-install-links).
-Copy the URL from above, and paste it into your browser. You'll be guided through the installation flow, where you should make sure you're installing your app on a server where you can develop and test it.
+On the **Installation** page, go to the **Install Link** section and select "Discord Provided Link" if it's not already selected.
-After installing your app, you can head over to your server and see that it has joined ✨
+When Discorded Provided Link is selected, a new **Default Install Settings** section will appear, which we'll configure next.
-With your app configured and installed, let's start developing it.
+### Adding scopes and bot permissions
----
+Apps need approval from installing users to perform actions in Discord (like creating a slash command or fetching a list of server members). Let's add scopes and permissions before installing the app.
-## Step 2: Running your app
+
+When creating an app, scopes and permissions determine what your app can do and access in Discord.
-All of the code used in the example app can be found in [the GitHub repository](https://github.com/discord/discord-example-app).
+- [OAuth2 Scopes](#DOCS_TOPICS_OAUTH2/shared-resources-oauth2-scopes) determine what data access and actions your app can take, granted on behalf of an installing or authenticating user.
+- [Permissions](#DOCS_TOPICS_PERMISSIONS/permission-overwrites) are the granular permissions for your bot user, the same as other users in Discord have. They can be approved by the installing user or later updated within server settings or with [permission overwrites](#DOCS_TOPICS_PERMISSIONS/permission-overwrites). Since apps installed to a user context can only respond to commands, these permissions are only relevant to apps installed to a server.
+
-To make development a bit simpler, the app uses [discord-interactions](https://github.com/discord/discord-interactions-js), which provides types and helper functions. If you prefer to use other languages or libraries, check out the [Community Resources](#DOCS_TOPICS_COMMUNITY_RESOURCES) documentation.
+On the **Installation** page in the **Default Install Settings** section:
+- For **User Install**, add the `applications.commands` scope
+- For **Guild Install**, add the `applications.commands` scope and `bot` scope. When you select `bot`, a new **Permissions** menu will appear to select the bot user's permissions. Select any permissions that you may want for your app—for now, I'll just select `Send Messages`.
-### Remixing the project
+
-This guide uses Glitch, which lets you clone and develop within your browser. If you'd prefer to develop your app locally, there's instructions on using ngrok [in the README](https://github.com/discord/discord-example-app#running-app-locally).
+See a list of all [OAuth2 scopes](#DOCS_TOPICS_OAUTH2/shared-resources-oauth2-scopes), or read more on [permissions](#DOCS_TOPICS_PERMISSIONS) in the documentation.
+
+### Installing your app
> info
-> While Glitch is great for development and testing, [it has technical restrictions](https://help.glitch.com/kb/article/17-technical-restrictions/) so other hosting providers should be considered for production apps.
+> When developing apps, you should build and test on your user account (for user-installable apps) and in a server that isn't actively used by others (for server-installable apps). If you don't have your own server already, you can [create one for free](https://support.discord.com/hc/en-us/articles/204849977-How-do-I-create-a-server-).
-To start, **[remix (or clone) the Glitch project 🎏](https://glitch.com/edit/#!/import/git?url=https://github.com/discord/discord-example-app.git)**.
+Once you add scopes, copy the URL from the **Install Link** section from before.
-Once you remix the project, you'll land on a new Glitch project.
+Since our app is supporting both installation contexts, we'll install your new app to both a test server and your user account so that we can test in both [installation contexts](#DOCS_RESOURCES_APPLICATION/installation-context).
-
-
+###### Install to server
-- Your **project name** is a unique name for your project, found in the upper-left corner
-- **`.env`** is the file where all of your credentials for your app will be stored
-- **Logs** are where your project's output is found—this is helpful to see if the app is running or information about any errors your app encounters
-- The **Share** button in the top-right corner is where you'll find the live project URL, which you'll need to set up interactivity later in this guide
-
+To install your app to your test server, copy the default Install Link for your app from the **Installation** page. Paste the link in your browser and hit enter, then select "Add to server" in the installation prompt.
-#### Project structure
+Select your test server, and follow the installation prompt. Once your app is added to your test server, you should see it appear in the member list.
-All of the files for the project are on the left-hand side of your Glitch project. Below is an overview of the main folders and files:
+###### Install to user account
-```
-├── examples -> short, feature-specific sample apps
-│ ├── app.js -> finished app.js code
-│ ├── button.js
-│ ├── command.js
-│ ├── modal.js
-│ ├── selectMenu.js
-├── .env -> your credentials and IDs
-├── app.js -> main entrypoint for app
-├── commands.js -> slash command payloads + helpers
-├── game.js -> logic specific to RPS
-├── utils.js -> utility functions and enums
-├── package.json
-├── README.md
-└── .gitignore
-```
+Next, install your app to your user account. Paste the same Install Link in your browser and hit enter. This time, select "Add to my apps" in the installation prompt.
-### Adding credentials
+Follow the installation prompt to install your app to your user account. Once it's installed you can open a DM with it.
-There's already some code in your `app.js` file, but you'll need your app's token and ID to make requests. All of your credentials can be stored directly in the `.env` file.
+---
-First, copy your bot user's token from earlier and paste it in the **`DISCORD_TOKEN`** variable in your `.env` file.
+## Step 2: Running your app
-Next, navigate to your app's **General Overview** page, then copy the **App ID** and **Public Key**. Paste the values in your `.env` file as **`APP_ID`** and **`PUBLIC_KEY`**.
+With your app configured and installed to your test server and account, let's take a look at the code.
-With your credentials configured, let's install and handle slash commands.
+> info
+> To make development a bit simpler, the app uses [discord-interactions](https://github.com/discord/discord-interactions-js), which provides types and helper functions. If you prefer to use other languages or libraries, check out the [Community Resources](#DOCS_TOPICS_COMMUNITY_RESOURCES) documentation.
### Installing slash commands
@@ -169,18 +206,16 @@ The project contains a `register` script you can use to install the commands in
If you want to customize your commands or add additional ones, you can reference the command structure in the [commands documentation](#DOCS_INTERACTIONS_APPLICATION_COMMANDS/application-command-object-application-command-structure).
-Run the `register` script by clicking **Terminal** at the bottom of your Glitch project and pasting the following command:
+In your terminal within the project folder, run the following command:
```
npm run register
```
-Hit enter to run the command.
-
If you navigate back to your server, you should see the slash commands appear. But if you try to run them, nothing will happen since your app isn't receiving or handling any requests from Discord.
-Discord has two APIs that you can mix-and-match to build apps:
+Apps have access to [APIs](#DOCS_QUICK_START_OVERVIEW_OF_APPS/what-apis-can-apps-use) that you can mix-and-match to build apps:
- **[HTTP API](#DOCS_REFERENCE/http-api)** is a REST-like API for general operations like sending and updating data in Discord, or fetching data about a resource.
- **[Gateway API](#DOCS_REFERENCE/gateway-websocket-api)** is a WebSocket-based API that is helpful for maintaining state or listening to events happening in a Discord server. We won't be using it in this guide, but more information about how to create a Gateway connection and the different events you can listen to are in the [Gateway documentation](#DOCS_TOPICS_GATEWAY).
@@ -190,28 +225,61 @@ Discord has two APIs that you can mix-and-match to build apps:
## Step 3: Handling interactivity
-To enable your app to receive slash command requests (and other interactions), Discord needs a public URL to send them. This URL can be configured in your app's settings as **Interaction Endpoint URL**.
+To enable your app to receive slash command and other interactions requests, Discord needs a public URL to send them. This URL can be configured in your app's settings as **Interaction Endpoint URL**.
-### Adding an interaction endpoint URL
+### Set up a public endpoint
-Glitch projects have a public URL exposed by default. Copy your project's URL by clicking the **Share** button in the top right corner, then copy the "Live site" project link near the bottom of the modal.
+To set up a public endpoint, we'll start our app which runs an [Express](https://expressjs.com/) server, then use [ngrok](https://ngrok.com/) to expose our server publicly.
-> info
-> If you're developing locally, there are instructions for tunneling requests to your local environment [on the GitHub README](https://github.com/discord/discord-example-app#running-app-locally).
+First, go to your project's folder and run the following to start your app:
-With the link copied, go to your app's settings from [the developer portal](https://discord.com/developers/applications).
+```
+npm run start
+```
-On your app's **General Information** page, there's an **Interactive Endpoint URL** option, where you can paste your app's URL and append `/interactions` to it, which is where the Express app is configured to listen for requests.
+There should be output indiciating your app is running on port `3000`. Behind the scenes, our app is ready to handle interactions from Discord, which includes verifying security request headers and responding to `PING` requests. We're skipping over a lot of the details in this tutorial, but details about preparing apps for interactions is in the [Interactions Overview](#DOCS_INTERACTIONS_OVERVIEW/preparing-for-interactions) documentation.
+
+> info
+> By default, the server will listen to requests sent to port 3000, but if you want to change the port, you can specify a `PORT` variable in your `.env` file.
+
+Next, we'll start our ngrok tunnel. If you don't have ngrok installed locally, you can install it by following the instructions on the [ngrok download page](https://ngrok.com/download).
+
+After ngrok is installed, open a new terminal and create a public endpoint that will forward requests to your Express server:
+
+```
+ngrok http 3000
+```
-
+You should see your connection open with output similar to the following:
+
+```
+Tunnel Status online
+Version 2.0/2.0
+Web Interface http://127.0.0.1:4040
+Forwarding https://1234-someurl.ngrok.io -> localhost:3000
+
+Connections ttl opn rt1 rt5 p50 p90
+ 0 0 0.00 0.00 0.00 0.00
+```
+
+We'll use **Forwarding** URL as the publicly-accessible URL where Discord will send interactions requests in the next step.
+
+### Adding an interaction endpoint URL
+
+Go to your [app's settings](https://discord.com/developers/applications) and on the **General Information** page under **Interaction Endpoint URL**, paste your new ngrok forwarding URL and append `/interactions`.
+
+
Click **Save Changes** and ensure your endpoint is successfully verified.
-The sample app handles verification in two ways:
+> info
+> If you have troubles verifying your endpoint, make sure both ngrok and your app are running on the same port, and that you've copied the ngrok URL correctly
+
+The verification is handled automatically by the sample app in two ways:
- It uses the `PUBLIC_KEY` and [discord-interactions package](https://github.com/discord/discord-interactions-js#usage) with a wrapper function (imported from `utils.js`) that makes it conform to [Express's `verify` interface](http://expressjs.com/en/5x/api.html#express.json). This is run on every incoming request to your app.
- It responds to incoming `PING` requests.
-You can learn more about preparing your app to receive interactions in [the interactions documentation](#DOCS_INTERACTIONS_RECEIVING_AND_RESPONDING/receiving-an-interaction).
+You can learn more about preparing your app to receive interactions in [the interactions documentation](#DOCS_INTERACTIONS_OVERVIEW/preparing-for-interactions).
### Handling slash command requests
@@ -231,7 +299,7 @@ if (name === 'test') {
}
```
-The code above is responding to the interaction with a message in the channel it originated from. You can see all available response types, like responding with a modal, [in the documentation](#DOCS_INTERACTIONS_RECEIVING_AND_RESPONDING/interaction-response-object-interaction-callback-type).
+The code above is responding to the interaction with a message in the channel, DM, or Group DM it originated from. You can see all available response types, like responding with a modal, [in the documentation](#DOCS_INTERACTIONS_RECEIVING_AND_RESPONDING/interaction-response-object-interaction-callback-type).
> info
> `InteractionResponseType.CHANNEL_MESSAGE_WITH_SOURCE` is a constant [exported from `discord-interactions`](https://github.com/discord/discord-interactions-js/blob/main/src/index.ts#L33)
@@ -262,7 +330,10 @@ To handle the `/challenge` command, add the following code after the `if name ==
```javascript
// "challenge" command
if (name === 'challenge' && id) {
- const userId = req.body.member.user.id;
+ // Interaction context
+ const context = req.body.context;
+ // User ID is in user field for (G)DMs, and member for servers
+ const userId = context === 0 ? req.body.member.user.id : req.body.user.id;
// User's object choice
const objectName = req.body.data.options[0].value;
@@ -295,12 +366,11 @@ if (name === 'challenge' && id) {
}
```
-
> info
-> If you aren't sure where to paste the code, you can see the full code in `examples/app.js` in the Glitch project or the root `app.js` [on GitHub](https://github.com/discord/discord-example-app/blob/main/app.js).
+> If you aren't sure where to paste the code, you can see the full code in `examples/app.js`.
The above code is doing a few things:
-1. Parses the request body to get the ID of the user who triggered the slash command (`userId`), and the option (object choice) they selected (`objectName`).
+1. Parses the request body to get the ID of the user who triggered the slash command (`userId`), and the option (object choice) they selected (`objectName`). If the interaction is run in a server (`context === 0`), the user ID will be nested in the `member` object. If it's in a DM or Group DM, it will be in the `user` object.
2. Adds a new game to the `activeGames` object using the interaction ID. The active game records the `userId` and `objectName`.
3. Sends a message back to the channel with a button with a `custom_id` of `accept_button_`.
@@ -424,9 +494,11 @@ const componentId = data.custom_id;
const gameId = componentId.replace('select_choice_', '');
if (activeGames[gameId]) {
+ // Interaction context
+ const context = req.body.context;
// Get user ID and object choice for responding user
- const userId = req.body.member.user.id;
- const objectName = data.values[0];
+ // User ID is in user field for (G)DMs, and member for servers
+ const userId = context === 0 ? req.body.member.user.id : req.body.user.id;
// Calculate result from helper function
const resultStr = getResult(activeGames[gameId], {
id: userId,
@@ -478,9 +550,19 @@ Finally, the results are sent in the channel using the `CHANNEL_MESSAGE_WITH_SOU
Congrats on building your first Discord app! 🤖
-Hopefully you learned a bit about Discord apps, how to configure them, and how to make them interactive. From here, you can continue building out your app or explore what else is possible:
-- Read **[the documentation](#DOCS_INTRO)** for in-depth information about API features
-- Browse the `examples/` folder in this project for smaller, feature-specific code examples
-- Check out **[community resources](#DOCS_TOPICS_COMMUNITY_RESOURCES)** for language-specific tools maintained by community members
-- Read our tutorial on [hosting Discord apps on Cloudflare Workers](#DOCS_TUTORIALS_HOSTING_ON_CLOUDFLARE_WORKERS)
-- Join the **[Discord Developers server](https://discord.gg/discord-developers)** to ask questions about the API, attend events hosted by the Discord API team, and interact with other devs
+Hopefully you learned a bit about Discord apps, how to configure them, and how to make them interactive. From here, you can continue building out your app or explore what else is possible.
+
+
+
+ Explore the platform features and APIs you have access to when building an app on Discord
+
+
+ Explore 1st party and community-built libraries and tools to speed up and simplify your development
+
+
+ Tutorial on building and handling interactions for apps installed to a user
+
+
+ Join our community to ask questions about the API, attend events hosted by the Discord platform team, and interact with other devs
+
+
diff --git a/docs/resources/Application.md b/docs/resources/Application.md
index d29b211dce..add356ebe4 100644
--- a/docs/resources/Application.md
+++ b/docs/resources/Application.md
@@ -6,36 +6,36 @@
###### Application Structure
-| Field | Type | Description |
-|------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| id | snowflake | ID of the app |
-| name | string | Name of the app |
-| icon | ?string | [Icon hash](#DOCS_REFERENCE/image-formatting) of the app |
-| description | string | Description of the app |
-| rpc_origins? | array of strings | List of RPC origin URLs, if RPC is enabled |
-| bot_public | boolean | When `false`, only the app owner can add the app to guilds |
-| bot_require_code_grant | boolean | When `true`, the app's bot will only join upon completion of the full OAuth2 code grant flow |
-| bot? | partial [user](#DOCS_RESOURCES_USER/user-object) object | Partial user object for the bot user associated with the app |
-| terms_of_service_url? | string | URL of the app's Terms of Service |
-| privacy_policy_url? | string | URL of the app's Privacy Policy |
-| owner? | partial [user](#DOCS_RESOURCES_USER/user-object) object | Partial user object for the owner of the app |
-| summary *(deprecated)* | string | **deprecated and will be removed in v11.** An empty string. |
-| verify_key | string | Hex encoded key for verification in interactions and the GameSDK's [GetTicket](#DOCS_GAME_SDK_APPLICATIONS/getticket) |
-| team | ?[team](#DOCS_TOPICS_TEAMS/data-models-team-object) object | If the app belongs to a team, this will be a list of the members of that team |
-| guild_id? | snowflake | Guild associated with the app. For example, a developer support server. |
-| guild? | partial [guild](#DOCS_RESOURCES_GUILD/guild-object) object | Partial object of the associated guild |
-| primary_sku_id? | snowflake | If this app is a game sold on Discord, this field will be the id of the "Game SKU" that is created, if exists |
-| slug? | string | If this app is a game sold on Discord, this field will be the URL slug that links to the store page |
-| cover_image? | string | App's default rich presence invite [cover image hash](#DOCS_REFERENCE/image-formatting) |
-| flags? | integer | App's public [flags](#DOCS_RESOURCES_APPLICATION/application-object-application-flags) |
-| approximate_guild_count? | integer | Approximate count of guilds the app has been added to |
-| redirect_uris? | array of strings | Array of redirect URIs for the app |
-| interactions_endpoint_url? | string | [Interactions endpoint URL](#DOCS_INTERACTIONS_RECEIVING_AND_RESPONDING/receiving-an-interaction) for the app |
-| role_connections_verification_url? | string | Role connection verification URL for the app |
-| tags? | array of strings | List of tags describing the content and functionality of the app. Max of 5 tags. |
-| install_params? | [install params](#DOCS_RESOURCES_APPLICATION/install-params-object) object | Settings for the app's default in-app authorization link, if enabled |
-| integration_types_config? | dictionary with keys of [application integration types](#DOCS_RESOURCES_APPLICATION/application-object-application-integration-types) | [In preview](#DOCS_CHANGE_LOG/userinstallable-apps-preview). Default scopes and permissions for each supported installation context. Value for each key is an [integration type configuration object](#DOCS_RESOURCES_APPLICATION/application-object-application-integration-type-configuration-object) |
-| custom_install_url? | string | Default custom authorization URL for the app, if enabled |
+| Field | Type | Description |
+|------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| id | snowflake | ID of the app |
+| name | string | Name of the app |
+| icon | ?string | [Icon hash](#DOCS_REFERENCE/image-formatting) of the app |
+| description | string | Description of the app |
+| rpc_origins? | array of strings | List of RPC origin URLs, if RPC is enabled |
+| bot_public | boolean | When `false`, only the app owner can add the app to guilds |
+| bot_require_code_grant | boolean | When `true`, the app's bot will only join upon completion of the full OAuth2 code grant flow |
+| bot? | partial [user](#DOCS_RESOURCES_USER/user-object) object | Partial user object for the bot user associated with the app |
+| terms_of_service_url? | string | URL of the app's Terms of Service |
+| privacy_policy_url? | string | URL of the app's Privacy Policy |
+| owner? | partial [user](#DOCS_RESOURCES_USER/user-object) object | Partial user object for the owner of the app |
+| summary *(deprecated)* | string | **deprecated and will be removed in v11.** An empty string. |
+| verify_key | string | Hex encoded key for verification in interactions and the GameSDK's [GetTicket](#DOCS_GAME_SDK_APPLICATIONS/getticket) |
+| team | ?[team](#DOCS_TOPICS_TEAMS/data-models-team-object) object | If the app belongs to a team, this will be a list of the members of that team |
+| guild_id? | snowflake | Guild associated with the app. For example, a developer support server. |
+| guild? | partial [guild](#DOCS_RESOURCES_GUILD/guild-object) object | Partial object of the associated guild |
+| primary_sku_id? | snowflake | If this app is a game sold on Discord, this field will be the id of the "Game SKU" that is created, if exists |
+| slug? | string | If this app is a game sold on Discord, this field will be the URL slug that links to the store page |
+| cover_image? | string | App's default rich presence invite [cover image hash](#DOCS_REFERENCE/image-formatting) |
+| flags? | integer | App's public [flags](#DOCS_RESOURCES_APPLICATION/application-object-application-flags) |
+| approximate_guild_count? | integer | Approximate count of guilds the app has been added to |
+| redirect_uris? | array of strings | Array of redirect URIs for the app |
+| interactions_endpoint_url? | string | [Interactions endpoint URL](#DOCS_INTERACTIONS_RECEIVING_AND_RESPONDING/receiving-an-interaction) for the app |
+| role_connections_verification_url? | string | Role connection verification URL for the app |
+| tags? | array of strings | List of tags describing the content and functionality of the app. Max of 5 tags. |
+| install_params? | [install params](#DOCS_RESOURCES_APPLICATION/install-params-object) object | Settings for the app's default in-app authorization link, if enabled |
+| integration_types_config? | dictionary with keys of [application integration types](#DOCS_RESOURCES_APPLICATION/application-object-application-integration-types) | Default scopes and permissions for each supported installation context. Value for each key is an [integration type configuration object](#DOCS_RESOURCES_APPLICATION/application-object-application-integration-type-configuration-object) |
+| custom_install_url? | string | Default custom authorization URL for the app, if enabled |
###### Example Application Object
@@ -160,7 +160,7 @@ Apps that support the user installation context are visible across all of an aut
By default, newly-created apps only support installation to guilds.
-You can update which installation contexts your app supports in your [app's settings](https://discord.com/developers/applications). On the **Installation** page under the **Authorization Methods** section, you can select the installation contexts your app supports.
+You can update which installation contexts your app supports in your [app's settings](https://discord.com/developers/applications). On the **Installation** page under the **Installation Contexts** section, you can select the installation contexts your app supports.
> info
> If you update your app to support a new installation context, you will need to update your existing [commands](#DOCS_INTERACTIONS_APPLICATION_COMMANDS/contexts) if you want them to be supported in the new context. Details are in the [Application Command](#DOCS_INTERACTIONS_APPLICATION_COMMANDS/contexts) documentation.
@@ -216,18 +216,18 @@ Edit properties of the app associated with the requesting bot user. Only propert
###### JSON Params
-| Field | Type | Description |
-|-----------------------------------|---------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| custom_install_url | string | Default custom authorization URL for the app, if enabled |
-| description | string | Description of the app |
-| role_connections_verification_url | string | Role connection verification URL for the app |
-| install_params | [install params](#DOCS_RESOURCES_APPLICATION/install-params-object) object | Settings for the app's default in-app authorization link, if enabled |
-| integration_types_config | dictionary with keys of [application integration types](#DOCS_RESOURCES_APPLICATION/application-object-application-integration-types) | [In preview](#DOCS_CHANGE_LOG/userinstallable-apps-preview). Default scopes and permissions for each supported installation context. Value for each key is an [integration type configuration object](#DOCS_RESOURCES_APPLICATION/application-object-application-integration-type-configuration-object) |
-| flags \* | integer | App's public [flags](#DOCS_RESOURCES_APPLICATION/application-object-application-flags) |
-| icon | ?[image data](#DOCS_REFERENCE/image-data) | Icon for the app |
-| cover_image | ?[image data](#DOCS_REFERENCE/image-data) | Default rich presence invite cover image for the app |
-| interactions_endpoint_url \*\* | string | [Interactions endpoint URL](#DOCS_INTERACTIONS_RECEIVING_AND_RESPONDING/receiving-an-interaction) for the app |
-| tags | array of strings | List of tags describing the content and functionality of the app (max of 20 characters per tag). Max of 5 tags. |
+| Field | Type | Description |
+|-----------------------------------|---------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| custom_install_url | string | Default custom authorization URL for the app, if enabled |
+| description | string | Description of the app |
+| role_connections_verification_url | string | Role connection verification URL for the app |
+| install_params | [install params](#DOCS_RESOURCES_APPLICATION/install-params-object) object | Settings for the app's default in-app authorization link, if enabled |
+| integration_types_config | dictionary with keys of [application integration types](#DOCS_RESOURCES_APPLICATION/application-object-application-integration-types) | Default scopes and permissions for each supported installation context. Value for each key is an [integration type configuration object](#DOCS_RESOURCES_APPLICATION/application-object-application-integration-type-configuration-object) |
+| flags \* | integer | App's public [flags](#DOCS_RESOURCES_APPLICATION/application-object-application-flags) |
+| icon | ?[image data](#DOCS_REFERENCE/image-data) | Icon for the app |
+| cover_image | ?[image data](#DOCS_REFERENCE/image-data) | Default rich presence invite cover image for the app |
+| interactions_endpoint_url \*\* | string | [Interactions endpoint URL](#DOCS_INTERACTIONS_RECEIVING_AND_RESPONDING/receiving-an-interaction) for the app |
+| tags | array of strings | List of tags describing the content and functionality of the app (max of 20 characters per tag). Max of 5 tags. |
\* Only limited intent flags (`GATEWAY_PRESENCE_LIMITED`, `GATEWAY_GUILD_MEMBERS_LIMITED`, and `GATEWAY_MESSAGE_CONTENT_LIMITED`) can be updated via the API.
diff --git a/docs/tutorials/Developing_a_User_Installable_App.mdx b/docs/tutorials/Developing_a_User_Installable_App.mdx
index edfd0220e5..3aa5516144 100644
--- a/docs/tutorials/Developing_a_User_Installable_App.mdx
+++ b/docs/tutorials/Developing_a_User_Installable_App.mdx
@@ -93,7 +93,7 @@ An app's **[installation context](#DOCS_RESOURCES_APPLICATION/installation-conte
We're going to configure our app to support both installation contexts, and while that's a good default for most apps, some apps may only make sense in one context or the other.
-In your app's settings, go to the **Installation** page from the sidebar. Under **Authorization Methods**, check both **User Install** and **Guild Install**, then press **Save Changes**.
+In your app's settings, go to the **Installation** page from the sidebar. Under **Installation Contexts**, check both **User Install** and **Guild Install**, then press **Save Changes**.
### Configuring Default Install Settings
@@ -218,7 +218,6 @@ Let's configure our app's **Interaction Endpoint URL**.
Go to your [app's settings](https://discord.com/developers/applications) and on the **General Information** page under **Interaction Endpoint URL**, paste your new ngrok URL and append `/interactions` (it'll be something like `https://84c5df474.ngrok-free.dev/interactions`).
-
Click **Save Changes** and if all is well, your Interactions Endpoint URL should be verified by Discord.
> info
@@ -264,7 +263,7 @@ However, for this tutorial, we're going to focus more on the metadata related to
###### `context`
-`context`) tells you which [interaction context](#DOCS_INTERACTIONS_APPLICATION_COMMANDS/interaction-contexts) the command was invoked from. I triggered the command from my app's DM, so `context` is `1` (or `BOT_DM`).
+`context` tells you which [interaction context](#DOCS_INTERACTIONS_APPLICATION_COMMANDS/interaction-contexts) the command was invoked from. Since I triggered the command from my app's DM the `context` is `1` (or `BOT_DM`).
With interaction context, something to keep in mind in `BOT_DM` is only the *DM with your bot user*. If you run the same command in a DM with your bestie, or in a group DM, the interaction context will be `PRIVATE_CHANNEL` (`2`).
diff --git a/images/getting-started-default-install.png b/images/getting-started-default-install.png
new file mode 100644
index 0000000000..a4315a2178
Binary files /dev/null and b/images/getting-started-default-install.png differ
diff --git a/images/getting-started-interactions-endpoint.png b/images/getting-started-interactions-endpoint.png
new file mode 100644
index 0000000000..0bc512d9ca
Binary files /dev/null and b/images/getting-started-interactions-endpoint.png differ