Proteside Proteside badge
Display the optional static badge that shows customers your checkout is monitored.
The Proteside badge is an optional snippet of static HTML that you paste anywhere on your checkout (for example, in the footer). It shows customers that the page is monitored and links to your store's public verification page.
The badge is independent of the SDK: it has no JavaScript, makes no image requests and doesn't depend on the installation snippet. The SDK doesn't display any badge automatically.
Get the badge
Open the store settings
In the dashboard, go to Settings → Store, Proteside seal section.
Check the verification page
Under Verification page, open your store's link (https://safe.proteside.com/ followed by the store's
identifier) and confirm it loads. Use Copy link if you want to share the address somewhere else.
Copy the snippet
Click Copy on the code block, below the Seal preview.
Paste it into the checkout
Paste the snippet where you want the badge to appear on the page, then publish.
The snippet
The badge is a link with inline styles and the Proteside shield as an SVG. The shield drawing is abbreviated below; copy the full snippet from the dashboard.
<!-- Proteside Security Badge -->
<a href="https://safe.proteside.com/my-store" target="_blank" rel="noopener noreferrer"
aria-label="Protected by Proteside — click to verify" title="Protected by Proteside"
style="display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 8px;background:#0D1117;border:1px solid rgba(45,140,240,.30);border-radius:9px;box-shadow:0 2px 10px rgba(0,0,0,.45);text-decoration:none;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;">
<span style="width:6px;height:6px;border-radius:50%;background:#3FB950;flex-shrink:0;"></span>
<svg width="16" height="20" viewBox="…" xmlns="http://www.w3.org/2000/svg"><!-- shield --></svg>
<span style="font-size:11px;font-weight:700;color:#E6EDF3;letter-spacing:.10em;text-transform:uppercase;line-height:1;white-space:nowrap;">Proteside</span>
</a>- The accessible text (
aria-labelandtitle) comes out in the language you use the dashboard in (Portuguese, Spanish or English). If your store serves customers in another language, adjust these two attributes. - The badge has fixed dark colors.
Badge pinned to a corner of the screen
To pin the badge to the bottom-right corner, add this at the start of the <a> tag's style attribute:
position:fixed;bottom:0;right:0;z-index:2147483647;margin:16px;A pinned badge with a high z-index sits on top of other elements. Avoid placing it over the payment fields: the
SDK alerts on positioned elements that cover sensitive fields.
CSP
Because it uses style="…" attributes, the badge needs style-src 'unsafe-inline' or style-src-attr 'unsafe-inline'
in your Content Security Policy. It doesn't need img-src, because the shield is an inline SVG. See
Content Security Policy and headers.