Add a ‘Made By’ badge to your Carrd sites

Adding a 'Made By' badge to your Carrd site is a small but significant step towards elevating your online presence and leaving a lasting impression on your visitors.

While Carrd offers many customisation options, this is one impactful addition it doesn’t have. This powerful extra allows you to proudly display your creative work and claim ownership of your website with a touch of professionalism. Badges can enhance your online presence, bolster your credibility, and intrigue your audience.

This blog post will show you some easy and free options to add these, whether you’re a seasoned Carrd user or just getting started.

1. Floating maker badge

I’ve used freakingmagical.com (free) to create my own ‘Made by Mark’ badge, which links to my Twitter profile. I add this to most side projects so that anyone who finds the site cold (not through my socials or links) can intantly click to find out more about me, or follow my other content.

You can see this badge live on my deckof.carrd.co site.

You could even change the colour, link and text to re-purpose the badge for other social platforms if you prefer, or change the corner of the window it appears in.

2. Corner maker badge

This version is like a tab in the corner of your website, hugging the left or right corner of the window. It can link to any website of your choice, and use an image of your choice.

You can follow my free tutorial on Notion to add one like this.

3. ‘Made with Carrd’ badge

If you want to promote the fact you’ve built a site with Carrd, or leverage your affiliate link, you can build an official-looking badge wuite easily.

I’ve adapted freakingmagical’s Made By badge (above) to create my Made with Carrd badge. I add this where I’ve built something with Carrd and want to highlight that, like other platforms do. For example on templates I’ve built, or sites where I don’t want to promote myself. You can see it live on this template demo.

If you want to use my implementation, you can copy the below code into an inline Embed element in Carrd. It doesn’t matter where it’s placed in the site, and you can change the link in the a.setAttribute line to your own affiliate link.

<script>
window.onload = () => {
const a = document.createElement('a');
a.innerHTML = '<img src="https://carrd.co/assets/docs/images/brand/png/icon-light.png" width="17px">Made with Carrd';
a.setAttribute('href', 'http://bowley.link/carrd');
Object.assign(a.style, {
'position': 'fixed',
'top': 'null',
'right': '0',
'bottom': '0',
'left': 'null',
'display': 'flex',
'align-items': 'center',
'gap': '6px',
'width': 'auto',
'padding': '0.2rem 0.35rem',
'margin': '1rem 1rem 1rem 1rem',
'border': '1px solid #555',
'line-height': '0.55rem',
'color': '#000',
'backgroundColor': '#f1f1f1',
'textDecoration': 'none',
'borderRadius': '0.3rem',
'font-size': '0.55rem',
'font-weight': 'normal',
'cursor': 'pointer',
'transition': 'all .2s ease-in-out',
'z-index': '1000',
'box-shadow': '0 4px 6px -4px rgb(0 0 0 / 0.1)',
'font-family': '-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif'
});
a.onmouseover = () => a.style.transform = 'scale(1.1)';
a.onmouseout = () => a.style.transform = 'scale(1)';
a.setAttribute('target', '_blank');
document.body.append(a);
}
</script>

Armed with these ways to implement a badge on your Carrd site, it’s time to unleash your creativity and promote yourself. Choose the method that aligns best with your design preferences and start adding that personal touch to your sites.