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

# Widgets

> Show live cards for Discord, Spotify, games, GitHub and more.

Widgets are little live cards on your page: your Discord status, a Spotify track, your Valorant stats, the weather and lots more. You can have up to 10.

**Where to find it:** Customize → **Widgets**, or [love.rip/dashboard/profile/widgets](https://www.love.rip/dashboard/profile/widgets).

<Frame caption="The Widgets page">
  <img src="https://mintcdn.com/love-rip/lWOttRo6BGNcvgSp/images/image-26.png?fit=max&auto=format&n=lWOttRo6BGNcvgSp&q=85&s=b72f8a3ba3a489a2ea0b17ebc0560084" alt="Image 26" title="Image 26" width="1901" height="915" data-path="images/image-26.png" />
</Frame>

## Add a widget

<Steps>
  <Step title="Open the picker">
    Click add and browse by category: **All**, **Social**, **Gaming**, **Music** or **Utility**.
  </Step>

  <Step title="Connect the account">
    Enter the username, ID, link or code the widget asks for. Each widget shows a short guide on what to paste.
  </Step>

  <Step title="Choose where it goes">
    Put it on the **Card** (inside your profile box) or at the **Bottom** of your page. Pick **None** to keep it saved but hidden.
  </Step>

  <Step title="Pick a size and options">
    Set the size and any display options, check the preview, then save.
  </Step>
</Steps>

<Frame caption="The widget picker">
  <img src="https://mintcdn.com/love-rip/lWOttRo6BGNcvgSp/images/image-29.png?fit=max&auto=format&n=lWOttRo6BGNcvgSp&q=85&s=20b1a18192034f2bdaa548c2bce6a8f4" alt="Image 29" title="Image 29" width="414" height="742" data-path="images/image-29.png" />
</Frame>

<Frame caption="Widget Editor">
  <img src="https://mintcdn.com/love-rip/lWOttRo6BGNcvgSp/images/image-28.png?fit=max&auto=format&n=lWOttRo6BGNcvgSp&q=85&s=3d71013f9a03c0e172f14dba7b9ed83c" alt="Image 28" title="Image 28" width="1628" height="889" data-path="images/image-28.png" />
</Frame>

<Frame caption="Widget Placement">
  <img src="https://mintcdn.com/love-rip/lWOttRo6BGNcvgSp/images/image-27.png?fit=max&auto=format&n=lWOttRo6BGNcvgSp&q=85&s=9916af092726d8e38c2acc9e7670ab61" alt="Image 27" title="Image 27" width="1556" height="545" data-path="images/image-27.png" />
</Frame>

## Sizes and space

The Card area and the Bottom area each have 4 slots.

| Size | Slots used |
| - | - |
| Half | 1 |
| Full, Centered full, Tall half | 2 |
| Tall full | 4 |

## All widgets

<AccordionGroup>
  <Accordion title="Discord and socials">
    Discord Presence, Discord Server, GitHub User, GitHub Repository, Pinterest Board, Pinterest Profile, Instagram Profile, YouTube Channel, Twitch Channel, Kick Channel, TikTok Profile, Twitter Profile, Telegram User, Telegram Channel.
  </Accordion>

  <Accordion title="Games">
    FiveM Server, Modrinth Profile, Modrinth Project, Valorant Player, Fortnite Player, Counter-Strike 2 Player, Rust Player, Steam Profile, Overwatch Player, Genshin Impact Player, Roblox Player, Roblox Group, Roblox Game, Clash of Clans Player, Clash of Clans Clan, Clash Royale Player, Clash Royale Clan, Chess.com Player, Chess.com Club, Lichess Player, Lichess Team, Minecraft Player, Minecraft Server.
  </Accordion>

  <Accordion title="Music">
    Spotify Track, Spotify Album, Spotify Playlist, Spotify Artist, Spotify User, Last.fm, Stats.fm.
  </Accordion>

  <Accordion title="Extras">
    Time, Weather, Image (upload up to 10MB), Custom Card.
  </Accordion>
</AccordionGroup>

<Note>The Instagram Profile widget is listed as Premium only.</Note>

<Note>
  Some widgets don't show live data yet: Fortnite, Instagram, Spotify User, Roblox Group, Roblox Game, Clash of Clans Clan, Clash Royale Clan, Chess.com Club, Lichess Team and Minecraft Server.
</Note>

## Handy tips

<AccordionGroup>
  <Accordion title="Discord Presence">
    Turn on **Use linked Discord account** if you've connected Discord in [Account settings](https://www.love.rip/dashboard/account?tab=connections). Or paste your User ID: in Discord, turn on Developer Mode, right-click yourself and pick **Copy User ID** (17–20 digits).
  </Accordion>

  <Accordion title="Discord Server">
    Use an invite link that never expires, or the widget will break when it runs out.
  </Accordion>

  <Accordion title="FiveM Server">
    Paste your server's `cfx.re/join/` code (6 characters).
  </Accordion>
</AccordionGroup>

## Widget styling

Set a fill color and opacity and a border for your widgets.

### Border effects <Badge color="purple">Premium</Badge>

Add a moving border effect to widgets on the card or below it.

<Frame caption="Widgets on a profile page">
  <img src="https://mintcdn.com/love-rip/lWOttRo6BGNcvgSp/images/image-30.png?fit=max&auto=format&n=lWOttRo6BGNcvgSp&q=85&s=17645b82bdb95de9163281ac98337ca2" alt="Image 30" title="Image 30" width="1601" height="792" data-path="images/image-30.png" />
</Frame>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.