Skip to content

Commit 37ac242

Browse files
anthonydiscordanthonydiscord
authored
Overhaul of Guides section (#8305)
* Add ImageCard component * Update guide cards with images * Fix inconsistencies * Add game development card images * Remove duplicate images * Update community guides * Update bot guides image cards * Update activities guide image cards * Update platform guide image cards * Overhaul social SDK guides section * Update game dev guide cards * Update Social SDK guides * Fix link
1 parent 2119847 commit 37ac242

20 files changed

Lines changed: 257 additions & 120 deletions

‎developers/game-development/how-to-add-proximity-voice-chat-to-your-game.mdx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@ sidebarTitle: Add Proximity Voice Chat to Your Game
44
keywords: ['prox chat', 'proximity chat', 'spatial', 'spatial audio']
55
---
66

7-
import {GameControllerIcon} from '/snippets/icons/GameControllerIcon.jsx'
8-
import {DoorEnterIcon} from '/snippets/icons/DoorEnterIcon.jsx'
9-
import {RobotIcon} from '/snippets/icons/RobotIcon.jsx'
7+
import {ImageCard} from '/snippets/imagecard.jsx'
108
import CommsScopeWarning from '/snippets/discord-social-sdk/callouts/oauth-comms-scopes.mdx';
119

1210
<img src="/images/game-development/how-to-add-proximity-voice-chat-to-your-game/banner-proximity-voice-chat.webp" alt="A banner showing a microphone that produces audio waves that look like they're in 3d space" style={{width: "100%", height: "auto"}} />
@@ -305,12 +303,12 @@ Now you have a working proximity voice solution combining the power of the Disco
305303
Ready to go deeper? These guides cover other ways to build games with Discord:
306304

307305
<Columns cols={2}>
308-
<Card title="How To Grow Your Game" href="/developers/game-development/how-to-grow-your-game" icon={<GameControllerIcon />}>
306+
<ImageCard title="How To Grow Your Game" href="/developers/game-development/how-to-grow-your-game" img="/images/game-development/how-to-grow-your-game/banner-how-to-grow-your-game.webp" horizontal>
309307
Guides for game developers on using Discord's Social SDK and APIs to grow and engage their player base
310-
</Card>
311-
<Card title="How Do I Keep My Players Engaged?" href="/developers/game-development/how-to-keep-your-players-engaged" icon={<RobotIcon />}>
312-
Build a Discord bot to extend your game's presence into the community
313-
</Card>
308+
</ImageCard>
309+
<ImageCard title="How Do I Keep My Players Engaged?" href="/developers/game-development/how-to-keep-your-players-engaged" img="/images/game-development/how-to-keep-your-players-engaged/banner-how-to-keep-your-players-engaged.webp" >
310+
Build a Discord bot to extend your game's presence into the community
311+
</ImageCard>
314312
</Columns>
315313

316314
{/* Autogenerated Reference Links */}

‎developers/game-development/how-to-create-a-community-for-your-game.mdx‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,8 @@ title: How Do I Create a Community For My Game?
33
sidebarTitle: Create a Community For Your Game
44
---
55

6-
import {UserStatusIcon} from '/snippets/icons/UserStatusIcon.jsx'
7-
import {RobotIcon} from '/snippets/icons/RobotIcon.jsx'
8-
import {LinkIcon} from '/snippets/icons/LinkIcon.jsx'
6+
import {ImageCard} from '/snippets/imagecard.jsx'
7+
import {InboxIcon} from '/snippets/icons/InboxIcon.jsx'
98

109
<img src="/images/game-development/how-to-create-a-community-for-your-game/banner-how-to-create-a-community-for-your-game.webp" alt="A banner showing pieces of a community Discord server" style={{width: "100%", height: "auto"}} />
1110

@@ -318,9 +317,9 @@ If you’ve implemented the Discord Social SDK, your Rich Presence can include a
318317

319318
<img src="/images/game-development/how-to-get-your-game-seen/rich-presence-buttons.webp" alt="Rich Presence with a button to join the community" style={{width: "60%", height: "auto"}} />
320319

321-
<Card title="How Do I Get My Game Seen?" href="/developers/game-development/how-to-get-your-game-seen" icon={<UserStatusIcon />} horizontal>
320+
<ImageCard title="How Do I Get My Game Seen?" href="/developers/game-development/how-to-get-your-game-seen" img="/images/game-development/how-to-get-your-game-seen/banner-how-to-get-your-game-seen.webp" horizontal >
322321
Implement Rich Presence with game details, lobby joining, game launching, and store links
323-
</Card>
322+
</ImageCard>
324323

325324
---
326325

@@ -409,9 +408,9 @@ Your server and your game don't have to exist independent of each other. Using a
409408

410409
All of these can run through a Discord bot connected to your game's server. To learn how to build a bot and put these features into practice read this how-to guide:
411410

412-
<Card title="How Do I Keep My Players Engaged?" href="/developers/game-development/how-to-keep-your-players-engaged" icon={<RobotIcon />} horizontal>
411+
<ImageCard title="How Do I Keep My Players Engaged?" href="/developers/game-development/how-to-keep-your-players-engaged" img="/images/game-development/how-to-keep-your-players-engaged/banner-how-to-keep-your-players-engaged.webp" horizontal>
413412
Build a bot connected to your game with leaderboards, event announcements, and achievement sharing
414-
</Card>
413+
</ImageCard>
415414

416415
---
417416

@@ -420,13 +419,13 @@ All of these can run through a Discord bot connected to your game's server. To l
420419
Now that your server is live, configured, and ready for players, here are some helpful next steps:
421420

422421
<CardGroup cols={3}>
423-
<Card title="How Do I Get My Game Seen?" href="/developers/game-development/how-to-get-your-game-seen" icon={<UserStatusIcon />}>
422+
<ImageCard title="How Do I Get My Game Seen?" href="/developers/game-development/how-to-get-your-game-seen" img="/images/game-development/how-to-get-your-game-seen/banner-how-to-get-your-game-seen.webp" horizontal >
424423
Implement Rich Presence with game details, lobby joining, game launching, and store links
425-
</Card>
426-
<Card title="How Do I Keep My Players Engaged?" href="/developers/game-development/how-to-keep-your-players-engaged" icon={<RobotIcon />}>
424+
</ImageCard>
425+
<ImageCard title="How Do I Keep My Players Engaged?" href="/developers/game-development/how-to-keep-your-players-engaged" img="/images/game-development/how-to-keep-your-players-engaged/banner-how-to-keep-your-players-engaged.webp" horizontal>
427426
Build a bot connected to your game with leaderboards, event announcements, and achievement sharing
428-
</Card>
429-
<Card title="Using Community Invites" href="/developers/tutorials/using-community-invites" icon={<LinkIcon />}>
427+
</ImageCard>
428+
<Card title="Using Community Invites" href="/developers/tutorials/using-community-invites" icon={<InboxIcon />}>
430429
Deep dive on Community Invites with full implementation details
431430
</Card>
432431
</CardGroup>

‎developers/game-development/how-to-get-your-game-seen.mdx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ title: How Do I Get My Game Seen?
33
sidebarTitle: Get Your Game Seen
44
---
55

6+
import {ImageCard} from '/snippets/imagecard.jsx'
67
import {InboxIcon} from '/snippets/icons/InboxIcon.jsx'
78
import {DoorEnterIcon} from '/snippets/icons/DoorEnterIcon.jsx'
89
import {RobotIcon} from '/snippets/icons/RobotIcon.jsx'
@@ -728,17 +729,15 @@ Chapter or act titles in `details` , like “Chapter 3: Letting Go”, can hint
728729
Rich Presence scratches the surface of what the Discord Social SDK can do for your game. Want to dive deeper? Check out some of guides:
729730
730731
<Columns cols={3}>
732+
<ImageCard title="How Do I Keep My Players Engaged?" href="/developers/game-development/how-to-keep-your-players-engaged" img="/images/game-development/how-to-keep-your-players-engaged/banner-how-to-keep-your-players-engaged.webp" horizontal>
733+
Build a Discord bot to extend your game's presence into the community
734+
</ImageCard>
731735
<Card title="Managing Game Invites" href="/developers/discord-social-sdk/development-guides/managing-game-invites" icon={<InboxIcon />}>
732-
Implementation guide for game invites
736+
Implementation guide for game invites using the Social SDK to let friends join in-game or through Rich Presence
733737
</Card>
734738
<Card title="Managing Lobbies" href="/developers/discord-social-sdk/development-guides/managing-lobbies" icon={<DoorEnterIcon />}>
735-
Create multiplayer lobbies
736-
</Card>
737-
<Card title="How Do I Keep My Players Engaged?" href="/developers/game-development/how-to-keep-your-players-engaged" icon={<RobotIcon />}>
738-
Build a Discord bot to extend your game's presence into the community
739+
Create multiplayer lobbies with the Social SDK
739740
</Card>
740741
</Columns>
741742
742743
Join the [Discord Developers server](https://discord.gg/discord-developers) to connect with other game developers building on Discord, or check out the [Discord Developers YouTube channel](https://youtube.com/@discorddevelopers) for video walkthroughs and tutorials.
743-
744-
<img src="/images/game-development/how-to-get-your-game-seen/inline-how-to-get-your-game-seen.webp" alt="A banner showing rich presence for a fictional game" style={{width: "100%", height: "auto"}} />

‎developers/game-development/how-to-grow-your-game.mdx‎

Lines changed: 13 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,7 @@ title: How Can I Grow My Game?
33
sidebarTitle: Grow Your Game
44
---
55

6-
import {ListViewIcon} from '/snippets/icons/ListViewIcon.jsx'
7-
import {UserStatusIcon} from '/snippets/icons/UserStatusIcon.jsx'
8-
import {RobotIcon} from '/snippets/icons/RobotIcon.jsx'
6+
import {ImageCard} from '/snippets/imagecard.jsx'
97

108
<img src="/images/game-development/how-to-grow-your-game/banner-how-to-grow-your-game.webp" alt="A banner showing players chatting about playing a game together" style={{width: "100%", height: "auto"}} />
119

@@ -25,34 +23,28 @@ Using Discord as part of your game development strategy can help build community
2523

2624
---
2725

28-
<img src="/images/game-development/how-to-create-a-community-for-your-game/banner-how-to-create-a-community-for-your-game.webp" alt="A banner showing pieces of a community Discord server" style={{width: "100%", height: "auto"}} />
29-
3026
# Build a Community to Capture Your Players
3127

3228
Whether you're just starting on a new game or you've already got a beta up and running, it's never too early to think about community. Discord is a leading platform for hosting official game communities; over 9,000 official game communities are on Discord, with over 80 million members*. Players who join your game’s Discord community can develop a sense of belonging and connection with your game that goes beyond just playing. They become invested in your game's success, provide valuable feedback, and naturally bring new players into the community. It also gives you a chance to interact directly with your players, get to know them better, provide feature updates and bug fixes, and learn why they love your game. A thriving community with active developers gives players a reason to stick around between updates and creates lasting relationships that keep your game alive.
3329

3430
**Discord Internal Data, 2025*
3531

36-
<Card title="How Do I Create a Community For My Game?" href="/developers/game-development/how-to-create-a-community-for-your-game" icon={<ListViewIcon />} horizontal>
32+
<ImageCard title="How Do I Create a Community For My Game?" href="/developers/game-development/how-to-create-a-community-for-your-game" img="/images/game-development/how-to-create-a-community-for-your-game/banner-how-to-create-a-community-for-your-game.webp" horizontal>
3733
Set up a community server, design roles and channels, and bring players in from your game
38-
</Card>
34+
</ImageCard>
3935

4036
---
4137

42-
<img src="/images/game-development/how-to-get-your-game-seen/banner-how-to-get-your-game-seen.webp" alt="A banner showing rich presence for a fictional game" style={{width: "100%", height: "auto"}} />
43-
4438
# Get Your Game Seen With Rich Presence
4539

4640
Have you ever seen what a friend is playing in the Discord client? This is called Rich Presence and there are so many ways to use it to get your game seen. The [Discord Social SDK](https://discord.com/developers/social-sdk) allows you to control how Rich Presence is displayed to your players in Discord by adding text, images, links, buttons, and more. You can even add invites that allow players to join your game directly from Discord. With Rich Presence, your player’s profiles become organic marketing for your game and give you a seamless way to create social experiences. The easier you make it for player’s to show off what they’re playing the faster your game will naturally spread through their social graph.
4741

48-
<Card title="How Do I Get My Game Seen?" href="/developers/game-development/how-to-get-your-game-seen" icon={<UserStatusIcon />} horizontal>
42+
<ImageCard title="How Do I Get My Game Seen?" href="/developers/game-development/how-to-get-your-game-seen" img="/images/game-development/how-to-get-your-game-seen/banner-how-to-get-your-game-seen.webp" horizontal>
4943
Implement Rich Presence with game details, lobby joining, game launching, and store links
50-
</Card>
44+
</ImageCard>
5145

5246
---
5347

54-
<img src="/images/game-development/how-to-keep-your-players-engaged/banner-how-to-keep-your-players-engaged.webp" alt="A banner showing a bot message allowing a player to claim an item for the game in Discord" style={{width: "auto", height: "auto"}} />
55-
5648
# Keeping Your Players Engaged
5749

5850
A Discord bot or companion app keeps your game present in player’s lives even when they're not actively playing. You can use them to bring your game’s world into Discord, announce in-game events, share achievements and leaderboards, and run giveaways or promos. This keeps your game top-of-mind in Discord and gives players a reason to jump back in.
@@ -64,9 +56,9 @@ A Discord bot or companion app keeps your game present in player’s lives even
6456

6557
Bots and companion apps can extend your game's experience into Discord, creating engagement loops that bring players back. A guild-installable bot can live in your community server and user-installable bots allow players to use them anywhere for optimal sharing. A well-built bot helps players organically share your game and community. Players sharing their high scores, leaderboards, builds, and achievements through your bot can drive their friends to return to the game just to beat them, or even purchase the game to join in the competition. It's re-engagement and community building that works for you around the clock.
6658

67-
<Card title="How Do I Keep My Players Engaged?" href="/developers/game-development/how-to-keep-your-players-engaged" icon={<RobotIcon />} horizontal>
59+
<ImageCard title="How Do I Keep My Players Engaged?" href="/developers/game-development/how-to-keep-your-players-engaged" img="/images/game-development/how-to-keep-your-players-engaged/banner-how-to-keep-your-players-engaged.webp" horizontal>
6860
Build a bot connected to your game with leaderboards, event announcements, and achievement sharing
69-
</Card>
61+
</ImageCard>
7062

7163
---
7264

@@ -87,13 +79,13 @@ Start with "**[How Can I Get My Game Seen?](/developers/game-development/how-to-
8779
Start with "**[How Do I Keep My Players Engaged?](/developers/game-development/how-to-keep-your-players-engaged)**". Build a bot that bridges your game and Discord. Think about what information from your game could be the most helpful thing for player’s to share. It can celebrate achievements, announce events, and build competition through leaderboards. This strengthens the connection between your community and your game.
8880

8981
<CardGroup cols={3}>
90-
<Card title="How Do I Create a Community For My Game?" href="/developers/game-development/how-to-create-a-community-for-your-game" icon={<ListViewIcon />}>
82+
<ImageCard title="How Do I Create a Community For My Game?" href="/developers/game-development/how-to-create-a-community-for-your-game" img="/images/game-development/how-to-create-a-community-for-your-game/banner-how-to-create-a-community-for-your-game.webp" >
9183
Set up a community server, design roles and channels, and bring players in from your game
92-
</Card>
93-
<Card title="How Do I Get My Game Seen?" href="/developers/game-development/how-to-get-your-game-seen" icon={<UserStatusIcon />}>
84+
</ImageCard>
85+
<ImageCard title="How Do I Get My Game Seen?" href="/developers/game-development/how-to-get-your-game-seen" img="/images/game-development/how-to-get-your-game-seen/banner-how-to-get-your-game-seen.webp" >
9486
Implement Rich Presence with game details, lobby joining, game launching, and store links
95-
</Card>
96-
<Card title="How Do I Keep My Players Engaged?" href="/developers/game-development/how-to-keep-your-players-engaged" icon={<RobotIcon />}>
87+
</ImageCard>
88+
<ImageCard title="How Do I Keep My Players Engaged?" href="/developers/game-development/how-to-keep-your-players-engaged" img="/images/game-development/how-to-keep-your-players-engaged/banner-how-to-keep-your-players-engaged.webp" >
9789
Build a bot connected to your game with leaderboards, event announcements, and achievement sharing
98-
</Card>
90+
</ImageCard>
9991
</CardGroup>

‎developers/game-development/how-to-keep-your-players-engaged.mdx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: How Do I Keep My Players Engaged?
33
sidebarTitle: Keep Your Players Engaged
44
---
55

6-
import {UserStatusIcon} from '/snippets/icons/UserStatusIcon.jsx'
6+
import {ImageCard} from '/snippets/imagecard.jsx'
77
import {RobotIcon} from '/snippets/icons/RobotIcon.jsx'
88
import {LinkIcon} from '/snippets/icons/LinkIcon.jsx'
99

@@ -180,14 +180,14 @@ Not every strategy above fits every genre. Here are some ideas for which strateg
180180
You don't have to build all of this at once. Pick the strategy that fits your game and player base, get it running, and build from there. The bot can start simple. A single `/leaderboard` command can get your players showing off their achievements which can grow into a full engagement system over time. Start with account linking, add one feature, see how your community responds, and iterate.
181181

182182
<CardGroup cols={3}>
183-
<Card title="How Do I Grow My Game?" href="/developers/game-development/how-to-grow-your-game" icon={<UserStatusIcon />}>
184-
Learn strategies to grow your game through Discord communities and APIs
185-
</Card>
183+
<ImageCard title="How Do I Grow My Game?" href="/developers/game-development/how-to-grow-your-game" img="/images/game-development/how-to-grow-your-game/banner-how-to-grow-your-game.webp" horizontal>
184+
Learn strategies to grow your game through Discord communities and APIs
185+
</ImageCard>
186186
<Card title="Bots and Companion Apps" href="/developers/quick-start/getting-started" icon={<RobotIcon />}>
187-
Getting started guide for building a Discord bot or companion app
187+
Getting started guide for building a Discord bot or companion app
188188
</Card>
189189
<Card title="Account Linking" href="/developers/platform/account-linking" icon={<LinkIcon />}>
190-
Connect your players' game accounts to their Discord identity
190+
Connect your players' game accounts to their Discord identity
191191
</Card>
192192
</CardGroup>
193193

0 commit comments

Comments
 (0)