Add a Replit Badge to your app
Add, customize, and embed a Replit Badge in your Replit App to showcase your project and link back to your cover page.
The Replit Badge allows you to showcase that you built your app on Replit. When added to your Replit App, it links back to your App’s cover page so visitors can learn more about your creations.
Features
The Replit Badge enhances your app with official Replit branding while providing easy navigation back to your project.
- Simple integration: Add the badge to any app with a single line of code
- Customizable appearance: Choose from multiple themes and positions
- Flexible implementation: Use the script tag or custom HTML/CSS options
- Markdown support: Embed badges in your GitHub repository and other Markdown files
Usage
Adding the badge
You can add a Badge to any Replit App with an index page. Websites created with the official HTML template have this Badge added by default.
-
Locate your index.html file
Go to your Replit App’s file browser and findindex.html -
Add the badge script
Add the following code before the closing</body>tag:
Testing your badge
-
Run your app
Run your Replit App, then select Open in a new tab -
View the badge
Your Badge should appear in the lower right corner. This is what visitors to your page will see. -
Test the link
Select your Badge to verify it links back to the Replit App’s cover page
Customizing your badge
Changing the color theme
Changing the color theme
You can change the color of your Badge by modifying the theme attribute with any of these colors: dark, light, red, orange, yellow, lime, green, teal, blue, blurple, purple, magenta, or pink.
Changing the position
Changing the position
You can change the position of your Badge by modifying the position attribute with one of these values: top-left, top-right, bottom-left, or bottom-right.
If the position isn’t changing, check the browser console for more information—you may have specified an invalid position.
Removing the badge
Removing the badge
If the Badge was added by default and you want to remove it, delete the script from index.html:
Advanced options
Creating custom badges
Creating custom badges
If the default configurations don’t meet your needs, you can create custom badges with standard HTML and CSS.
Badges are hosted on https://replit.com/badge, allowing you to embed them as images and further style them with CSS.
You can also use additional options not available in the script:
Custom caption (maximum 30 characters):
Smaller variant:
Embedding in Markdown
Embedding in Markdown
Share your feedback about this feature in the Community!