Widgets
mariaa
mariaa

Updated 4 months ago

Widgets

Widgets are a powerful way to enhance your profile by showcasing content from popular platforms. Whether it's displaying your favorite Spotify playlist, recent YouTube videos, Discord server stats, or your Roblox and Steam profiles, widgets make your profile dynamic and interactive.

How to add?

In the Widgets tab, click on the platform icon you want to add. Once selected, you'll see the supported widget types for that platform. For example, selecting the Discord icon will present options like Discord Invite/Server and Discord Presence. Each option comes with a pre-filled example to guide you on how to customize it with your own content. Depending on the content in the input field, the widget will adjust accordingly if valid.

For more details on each option, read the sections below.

General Customization

Customize your widgets to fit your profile style. Not all options are available for every widget.

  • Place Inside Card: Places the widget inside the Profile Card.

  • Compact Layout: Uses a compact layout.

  • Second Style: Enables a second style. Style varies based off the widget type.

Widget

Inside Card

Compact Layout

Second Style

Steam

✅

❌

❌

Youtube

✅

❌

❌

Soundcloud

✅

✅

✅

Discord

✅

❌

✅

Roblox

✅

✅

✅

Spotify

✅

❌

✅

Note: Certain widget types may not support specific options. For example, Compact Layout works for Spotify albums and playlists but not for individual tracks.

Steam

A custom-made widget to showcase your Steam profile, displaying your avatar, display name, online status, and the current game you're playing. This widget enhances your profile by showing real-time information directly from Steam.

Example: https://steamcommunity.com/id/76561198252251082 (Must be SteamID64)

How to Find Your Steam ID

There are multiple ways to find your Steam ID:

  1. If you are using a Custom URL:

    • Visit tools like SteamID Finder and paste your profile URL. It will display your SteamID64 and other related IDs. Copy the SteamID64 (17-digit numeric ID) for the widget as Steam's API requires this format.

  1. Through the Steam App:

    • Open the Steam application and go to your profile.

    • Click on your profile image or name in the top-right corner.

    • The URL at the top will either display your SteamID64 (17-digit number) or a custom username.

  1. Through Steam Settings:

    • Go to View > Settings > Interface and enable "Display Steam URL bar."

    • Open your profile, and the Steam URL will appear at the top.

Youtube

A rich YouTube embed that allows you to embed your favorite videos directly into your profile. Share specific content, showcase your latest uploads, or highlight important videos for visitors.

Example: https://youtu.be/C1vL2j1bZ8w?si=Ss62ysbt_tV_FhcF

How to Get a YouTube Video Link

  1. From the YouTube Mobile App:

    • Open the video and tap the Share button.

    • Select Copy Link to get the shortened version (https://youtu.be/...).

  2. Using YouTube's Share Button:
    This will generate a shortened URL (https://youtu.be/...) which works perfectly for embedding.

Soundcloud

Integrate SoundCloud to share tracks or albums directly on your profile with a rich, embedded player. Whether it’s showcasing your latest track or a curated playlist, SoundCloud widgets bring music to life on your page.

Example: <iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" ...

Supported Types

  1. Track: Embed a single track.

  2. Album: Embed a full album an interactive player.

How to Get Your SoundCloud Embed Code

  1. Go to SoundCloud and find the track or album you want to embed.

  2. Click the Share button below the player.

  3. Go to the Embed tab and customize the player (e.g., size, color, autoplay).

  4. Copy the generated <iframe> code.

Customization Options

  • Compact Layout: Makes the embed shorter.

  • Second Style: Enables a more visual player experience. SoundCloud makes the background of the embed an image.

Discord

A custom widget that allows you to integrate Discord content into your profile, showcasing your server or real-time presence. This widget is perfect for growing your community, sharing server invites, and displaying your current online status.

Supported Types

  1. Discord Server/Invite: Share an invite link to your Discord server with real-time member count and server details.

  2. Discord Presence: Display your current presence, including online status and the game or activity you're currently engaged in.

Discord Presence: https://discord.com/users/1014431678858543134
Discord Server: https://discord.gg/biolink

How to Get Your Discord Server Invite

  1. Open your Discord server and go to Server Settings > Invites.

  2. Generate a permanent invite link.

  3. Use this link in your widget (https://discord.gg/your-server-id).

How to Get Your Discord Presence URL

  1. Go to Discord Settings > Advanced and enable Developer Mode.

  2. Right-click your profile in any server or chat and select Copy ID.
    Example: 123456789012345678

  3. Use this link in your widget (https://discord.com/users/123456789012345678).

Customization Options

The following options only applies to the Discord Server.

  • Compact Layout: Makes the widget smaller.

  • Second Style: If the server has a banner image, the widget will use this as a background.

Roblox

A custom widget that allows you to showcase your Roblox profile, including your avatar, username, and stats like friends and followers. This widget is perfect for sharing your Roblox identity.

Supported Types

  • Roblox Profile: Display your Roblox avatar, username, and profile information.

Example: https://www.roblox.com/users/97484723/profile

How to Get Your Roblox User ID

Your Roblox User ID is a unique identifier for your account. Here's how you can find it:

  1. Through Your Profile URL:

    • Go to your Roblox profile on www.roblox.com.

    • Look at the URL. Your User ID is the number in the URL after /users/.
      Example:
      https://www.roblox.com/users/123456789/profile
      In this case, 123456789 is your User ID.

  2. From the Mobile App:

    • Open the Roblox app and go to your profile.

    • Tap the Share button and copy the link to your profile. The User ID will be part of the URL.

Spotify

The Spotify widget allows you to share your favorite albums, playlists, and tracks directly on your profile. Visitors can listen to your curated music selection without leaving the page.

Supported Types

  1. Track: Share a single track.

  2. Album: Embed an entire album.

  3. Playlist: Showcase a custom playlist with multiple tracks.

Track Example: https://open.spotify.com/track/4uLU6hMCjMI75M1A2tKUQC
Album Example: https://open.spotify.com/album/1ATL5GLyefJaxhQzSPVrLX
Playlist Example: https://open.spotify.com/playlist/37i9dQZF1DXcBWIGoYBM5M

How to Get Your Spotify Embed Link

  1. Open Spotify (Web or App):
    Go to the track, album, or playlist you want to share.

  2. Click on the Three Dots (⋮) Menu:
    For tracks, albums, and playlists, you will find the menu next to the title.

  3. Select "Share" > "Copy Link":
    You can paste this directly into the input field.

© 2025 slat.cc. All rights reserved. Product by slat.