Brand Badges
Use these badges on your site to show it was proudly created or hosted by Untap Web. The badge automatically inherits your website's font size, font family, and color for a seamless fit.
Designed by Badge
Embed Script
<script src="https://untapweb.com/badge.js" data-type="designed" async></script>Hosted by Badge
Embed Script
<script src="https://untapweb.com/badge.js" data-type="hosted" async></script>Built by Badge
Embed Script
<script src="https://untapweb.com/badge.js" data-type="built" async></script>Powered by Badge
Embed Script
<script src="https://untapweb.com/badge.js" data-type="powered" async></script>Pure HTML Alternative
If you prefer not to use an external script or you're building in an environment that restricts script tags (like some CMS platforms or React/Next.js directly), you can use this raw HTML snippet.
<a href="https://untapweb.com" target="_blank" rel="noopener noreferrer" style="display:inline-flex;align-items:center;gap:0.375em;font-size:inherit;color:inherit;text-decoration:none;opacity:0.7;transition:opacity 0.2s;" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.7">
<svg width="1.1em" height="1.25em" viewBox="0 0 44 50" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="flex-shrink:0;">
<line x1="7" y1="9" x2="7" y2="31" stroke="#38B2AC" stroke-width="2" stroke-linecap="round" />
<line x1="37" y1="9" x2="37" y2="31" stroke="#38B2AC" stroke-width="2" stroke-linecap="round" />
<path d="M7 31 Q7 46 22 46 Q37 46 37 31" stroke="#38B2AC" stroke-width="2" fill="none" stroke-linecap="round" />
<line x1="7" y1="20" x2="37" y2="20" stroke="#38B2AC" stroke-width="1.5" stroke-dasharray="2 5" opacity="0.4" />
<line x1="7" y1="31" x2="37" y2="9" stroke="#38B2AC" stroke-width="1" opacity="0.25" />
<circle cx="7" cy="9" r="4" fill="#38B2AC" />
<circle cx="37" cy="9" r="4" fill="#38B2AC" />
<circle cx="7" cy="20" r="2.5" fill="#38B2AC" opacity="0.5" />
<circle cx="37" cy="20" r="2.5" fill="#38B2AC" opacity="0.5" />
<circle cx="7" cy="31" r="3" fill="#38B2AC" />
<circle cx="37" cy="31" r="3" fill="#38B2AC" />
<circle cx="22" cy="46" r="4" fill="#F6AD55" />
</svg>
<span style="line-height:1;">Designed by <strong style="font-weight:700;">Untap Web</strong></span>
</a>React / Next.js Component
If you are building a React application, you can easily create a reusable component for this badge.
"use client";
import React from 'react';
export const UntapBadge = ({ type = 'Designed' }: { type?: 'Designed' | 'Hosted' | 'Built' | 'Powered' }) => {
return (
<a href="https://untapweb.com" target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: '0.375em', fontSize: 'inherit', color: 'inherit', textDecoration: 'none', opacity: 0.7, transition: 'opacity 0.2s' }} onMouseOver={(e) => e.currentTarget.style.opacity = '1'} onMouseOut={(e) => e.currentTarget.style.opacity = '0.7'}>
<svg width="1.1em" height="1.25em" viewBox="0 0 44 50" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style={{ flexShrink: 0 }}>
<line x1="7" y1="9" x2="7" y2="31" stroke="#38B2AC" strokeWidth="2" strokeLinecap="round" />
<line x1="37" y1="9" x2="37" y2="31" stroke="#38B2AC" strokeWidth="2" strokeLinecap="round" />
<path d="M7 31 Q7 46 22 46 Q37 46 37 31" stroke="#38B2AC" strokeWidth="2" fill="none" strokeLinecap="round" />
<line x1="7" y1="20" x2="37" y2="20" stroke="#38B2AC" strokeWidth="1.5" strokeDasharray="2 5" opacity="0.4" />
<line x1="7" y1="31" x2="37" y2="9" stroke="#38B2AC" strokeWidth="1" opacity="0.25" />
<circle cx="7" cy="9" r="4" fill="#38B2AC" />
<circle cx="37" cy="9" r="4" fill="#38B2AC" />
<circle cx="7" cy="20" r="2.5" fill="#38B2AC" opacity="0.5" />
<circle cx="37" cy="20" r="2.5" fill="#38B2AC" opacity="0.5" />
<circle cx="7" cy="31" r="3" fill="#38B2AC" />
<circle cx="37" cy="31" r="3" fill="#38B2AC" />
<circle cx="22" cy="46" r="4" fill="#F6AD55" />
</svg>
<span style={{ lineHeight: 1 }}>{type} by <strong style={{ fontWeight: 700 }}>Untap Web</strong></span>
</a>
);
};