You can add a “Made with Replit” Badge in your public Replit App. It will link back to your App’s cover page so that visitors can learn more about your creations.

​
Adding the badge

You can add a Badge to any Replit App with an index page. Any website created with the official HTML template will have this Badge added by default.

  1. Go to your Replit App’s file browser and find index.html
  2. Add the following code before the closing </body> tag:
<script
  src="https://replit.com/public/js/replit-badge-v2.js"
  theme="dark"
  position="bottom-right"
></script>

​
Testing your badge

  1. Run your Replit App, then select Open in a new tab
  2. Your Badge should appear in the lower right. This is what visitors to your page would see
  3. Select your Badge to get back to the Replit App’s cover page

​
Changing the color theme

You can change the color of your Badge by replacing theme="blue" with any color including dark, light, red, orange, yellow, lime, green, teal, blue, blurple, purple, magenta, and pink.

<script
  src="https://replit.com/public/js/replit-badge-v2.js"
  theme="pink"
  position="bottom-right"
></script>

​
Changing the position

You can change the position of your Badge by adding a position attribute with a value of top-left, top-right, bottom-left, or bottom-right. If the position isn’t changing, check the console for more information—you may have specified an invalid position.

<script
  src="https://replit.com/public/js/replit-badge-v2.js"
  theme="dark"
  position="top-left"
></script>

​
Removing the badge

If the Badge was already a part of your template and you would like to remove it, simply delete the script from index.html:

<!-- Delete this -->
<script src="https://replit.com/public/js/replit-badge-v2.js"></script>

​
Advanced: custom badges

If the default configurations aren’t enough for you, you can create your own custom badges with standard HTML and CSS.

Badges are hosted on https://replit.com/badge, meaning you can embed an image to further style your badges with CSS. This also means you can embed badges in your GitHub repositories and other Markdown files!

<style>
  #replitBadge {
    position: fixed;
    bottom: 0;
    left: 0;
  }
</style>

<Frame>
  <img
    src="https://replit.com/badge?theme=light"
    id="replitBadge"
    alt="Replit Badge"
  />
</Frame>

You can also supply additional options not available in the script. For example, you can set the caption (maximum limit of 30 characters):

https://replit.com/badge?caption=Amazing%20Badges

Or even switch the Badge variant to something smaller:

https://replit.com/badge?caption=Amazing%20Badges&variant=small

​
Advanced: embedding into Markdown

You can showcase your Replit Badge by embedding it into your repository README. The following Markdown snippet combines a link and image, allowing you to redirect users directly to your Replit App:

[![Try with Replit Badge](https://replit.com/badge?caption=Try%20with%20Replit)](https://replit.com/)

Try selecting this:

Please let us know in the Community what you think of this feature. Replit App on!