> ## Documentation Index
> Fetch the complete documentation index at: https://docs.discord.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Discord Activity Development Guides

> Guides for developing embedded games and experiences on Discord.

export const ImageCard = ({img, href, title, children, imageHeight = 120, imageFade = false, imageOffset = 0}) => {
  return <div className="MDXImageCard image-card-wrapper" style={{
    position: 'relative',
    cursor: 'pointer',
    marginTop: '0.5rem',
    marginBottom: '0.5rem'
  }}>
      <a href={href} aria-label={title} className="MDXImageCard image-card-link" style={{
    position: 'absolute',
    inset: 0,
    zIndex: 1
  }} />
      <div className="MDXImageCard image-card" style={{
    display: 'flex',
    flexDirection: 'column',
    borderRadius: '1rem',
    overflow: 'hidden',
    height: '100%'
  }}>
        <div style={{
    height: `${imageHeight}px`,
    width: '100%',
    overflow: 'hidden',
    flexShrink: 0,
    backgroundColor: '#242429',
    ...imageFade && ({
      maskImage: 'linear-gradient(to bottom, black 30%, transparent 100%)',
      WebkitMaskImage: 'linear-gradient(to bottom, black 30%, transparent 100%)'
    })
  }}>
          <img src={img} alt={title} style={{
    width: '100%',
    height: '100%',
    objectFit: 'cover',
    objectPosition: `center calc(50% - ${imageOffset}px)`,
    display: 'block',
    margin: 0
  }} />
        </div>
        <div style={{
    display: 'flex',
    flexDirection: 'column',
    padding: '1.25rem 1.5rem',
    flex: 1
  }}>
          <p className="MDXImageCard image-card-title" style={{
    margin: 0,
    fontWeight: 600,
    fontSize: '1rem'
  }}>
            {title}
          </p>
          {children && <p className="MDXImageCard image-card-description" style={{
    margin: '0.25rem 0 0',
    fontSize: '1rem',
    lineHeight: '1.5rem'
  }}>
              {children}
            </p>}
        </div>
      </div>
    </div>;
};

<Note>
  Visit [Activities](/developers/activities/overview) for more on building embedded games and experiences on Discord, including how to get started, best practices, and more.
</Note>

## Getting Started

<CardGroup cols={1}>
  <ImageCard title="Build your first Activity" href="/developers/activities/building-an-activity" img="https://mintcdn.com/discord/F-7joMWagXLYlI0g/images/activities/tutorial-channel-name.png?fit=max&auto=format&n=F-7joMWagXLYlI0g&q=85&s=896ca4ac1242adf3eab2ae5bd933f0fa" width="1210" height="786" data-path="images/activities/tutorial-channel-name.png">
    A step-by-step guide to building your first Activity on Discord.
  </ImageCard>
</CardGroup>

## Diving Deeper

<CardGroup cols={2}>
  <Card title="Setting Rich Presence" href="/developers/rich-presence/using-with-the-embedded-app-sdk">
    Learn how to set up Rich Presence for your Activity to display game status and join features.
  </Card>

  <Card title="Implementing IAP for Activities" href="/developers/monetization/implementing-iap-for-activities">
    A guide to implementing in-app purchases for your Discord Activities.
  </Card>
</CardGroup>

## Best Practices

<CardGroup cols={1}>
  <ImageCard title="Design Patterns for Activities" href="/developers/activities/design-patterns" img="https://mintcdn.com/discord/F-7joMWagXLYlI0g/images/activities/bobble-league.png?fit=max&auto=format&n=F-7joMWagXLYlI0g&q=85&s=abb75c037e20941be808ca16e7531637" width="1200" height="738" data-path="images/activities/bobble-league.png">
    Best practices and design patterns for creating engaging Activities on Discord.
  </ImageCard>
</CardGroup>