Powered by Outstand Badge

Add a "Powered by Outstand" badge to your site. Copy-paste HTML or a one-line script tag, in three variants and both light and dark themes, served from our CDN.

If you like Outstand, you can show a Powered by Outstand badge on your site. It is entirely optional - there is no discount, no plan requirement, and nothing changes about your account either way. It just links back to us, and we appreciate it.

Everything is served from static.outstand.so. There is nothing to install and no API key involved.

Preview the badges

Each badge is shown below on the kind of background it is designed for. Pick the one you like, then grab it with the HTML snippet (use the file name) or the script tag (use the data-variant). Click any file name to open the raw SVG.

Standard - for dark sites

data-variant="standard"

badge-dark.svg - 181x34

Standard - for light sites

data-variant="standard"

badge-light.svg - 181x34

Pill - for dark sites (its outline pulses)

data-variant="pill"

pill-dark.svg - 155x30

Pill - for light sites

data-variant="pill"

pill-light.svg - 155x30

Footer - for dark sites

data-variant="footer"

Script tag only (it is text, not an image)

Footer - for light sites

data-variant="footer"

Script tag only (it is text, not an image)

The previews above load the real SVGs from static.outstand.so. If they do not appear, the badge assets have not been published to the CDN yet.

Pick an embed method

There are two ways to add the badge. Use the HTML snippet unless you have a reason not to.

	HTML snippet	Script tag
Works without JavaScript	Yes	No
Affected by your site's CSS	Yes - it is an ordinary link on your page	No - it renders inside a shadow root
Hover effect	No	Yes
Best for	Static sites, templates, footers	React/Vue/SPA, or when your CSS is aggressive

The HTML snippet is a plain <a> in your page, so your own stylesheet applies to it. If you have broad global rules (for example img { width: 100% }), either scope them away from the badge or use the script tag, which is immune to them.

HTML snippet

Paste this wherever you want the badge. Swap badge-dark.svg for the variant you want from the table further down.

<a
	href="https://www.outstand.so/?utm_source=badge&utm_medium=referral&utm_campaign=powered-by"
	target="_blank"
	rel="noopener"
>
	<img
		src="https://static.outstand.so/badge/v1/badge-dark.svg"
		alt="Powered by Outstand"
		width="181"
		height="34"
		loading="lazy"
	/>
</a>

Keep the width and height attributes. They stop the badge from shifting your layout while it loads, which protects your Cumulative Layout Shift score.

Script tag

The badge is inserted immediately after the script tag, or into data-target if you provide one.

<script async src="https://static.outstand.so/badge/v1/badge.js" data-theme="dark"></script>

Into a specific element:

<div id="outstand-badge"></div>
<script
	async
	src="https://static.outstand.so/badge/v1/badge.js"
	data-theme="light"
	data-variant="pill"
	data-target="#outstand-badge"
></script>

Attributes

Attribute	Values	Default	Notes
`data-theme`	`dark`, `light`, `auto`	`dark`	Describes your site, not the badge. See below.
`data-variant`	`standard`, `pill`, `footer`	`standard`	See the variants below.
`data-target`	Any CSS selector	-	Where to render. If it matches nothing, nothing is rendered.

data-theme describes the background the badge sits on, not the badge itself. A dark site uses data-theme="dark" and gets the dark badge. This is the one thing people get backwards.

data-theme="auto" follows your visitor's operating system light/dark preference. That is only a guess at what your page looks like, so it is a convenience rather than a correct answer - if your site is always dark, say data-theme="dark" explicitly.

Variants

All three are shown in Preview the badges above.

Standard is the default: a bordered badge with the Outstand mark.

Pill is smaller and fully rounded, for tight spaces. On dark sites its outline pulses gently; this is disabled automatically for visitors who have "reduce motion" enabled.

Footer is a small inline text lockup for sitting in a footer row next to a copyright line. It is text rather than an image, so it is only available via the script tag:

<script async src="https://static.outstand.so/badge/v1/badge.js" data-theme="dark" data-variant="footer"></script>

Notes

Do not add rel="nofollow". The snippets above are what we ask for, and a followed link is the entire point. Since the badge earns you nothing, it is a normal editorial link.
Do not rehost the SVGs. Serving them from static.outstand.so means you pick up fixes automatically, and the files are cached at the edge.
The links carry UTM parameters so we can see how much traffic the badge sends. Keep them if you can; the badge works without them either way.
Want to restyle it? Please do not modify the artwork. If the badge does not fit your site, tell us and we will look at adding a variant.