Resources & Snippets · May 2026

30 Free Trust Snippets for Your Checkout, Thank You Page, and Email

Ten designs for the order page, ten for the thank-you page, ten for the confirmation email. Copy the code, customize the look, or feed it to Claude.ai to match your brand.

ResourcesSnippets6 min read

TL;DR

Three customer-facing moments deserve a visible trust signal: the live checkout page, the thank-you confirmation page, and the order email. This article gives you 30 free, ready-to-customize snippets, ten for each surface. Copy the code, drop into your page or template, or paste into Claude.ai with the prompt above each section to restyle the snippet to your brand in one shot.

Why show protection at every step

Picture this: a customer is about to click Place Order. The card details are filled in. The shipping address is right. And then their thumb hesitates, because nothing on the page tells them this checkout is safe. The merchant has all the protection in the world. The customer can not see it. Trust at checkout is the difference between a completed order and a dropped cart at the very last step.

Evidora records the checkout interaction the moment it happens, retains the rendered page exactly as the consumer saw it, and produces a tamper-evident record on demand. That protection is invisible by default. The snippets in this article make it visible, on the three surfaces where the customer is most likely to look for reassurance: the live checkout page, the post-purchase thank-you page, and the order confirmation email.

Each section below gives you ten visual variants and one Claude.ai prompt. Copy a snippet, edit it directly, or hand it to Claude with the prompt template and let it rebrand the design to match your site. The goal is not to use Evidora’s exact look. The goal is to make the protection signal feel like a native part of your customer journey.

Section 1: Order page (pre-purchase)

The order page is the highest-leverage moment in the funnel. The customer has chosen, decided, and is about to commit. These snippets are deliberately not clickable, because the order has not been placed yet. The purpose is a credible, calm signal that this checkout is secured and recorded. Keep it small. Keep it factual. Place it near the Place Order button.

⚡ Claude.ai prompt Paste a snippet plus this prompt into Claude

Hey Claude, take this exact checkout protection snippet and rebuild it to feel
like a native part of my checkout page. My site uses [describe colors,
typography, and overall vibe in 1 or 2 sentences]. The placement is
pre-purchase, so it should reinforce trust and security without being clickable.
Keep the messaging concise and reassuring. Match my form and button styling.
Return one self-contained HTML block, with inline styles, that I can paste
directly above my Place Order button.

[Paste the snippet HTML here.]

01Inline trust strip

Secure checkout · Protected by Evidora.io

View HTML

<div style="background:#F0F4FF;border:1px solid #D6DEFB;border-radius:8px;padding:10px 14px;display:inline-flex;align-items:center;gap:10px;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;color:#1A1A2E;font-size:14px;">
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4353FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3z"/></svg>
  <span><strong style="font-weight:700;color:#1A1A2E;">Secure checkout</strong> · Protected by Evidora.io</span>
</div>

02Tiny text crumb

Protected by Evidora.io

View HTML

<span style="font-family:-apple-system,'Segoe UI',Roboto,sans-serif;color:#767DAC;font-size:12px;letter-spacing:0.4px;display:inline-flex;align-items:center;gap:6px;">
  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#767DAC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3z"/></svg>
  Protected by Evidora.io
</span>

03Trust badge tile

Protected checkout

Evidora.io

View HTML

<div style="background:#ffffff;border:1px solid #E2E5F0;border-radius:10px;padding:14px 16px;text-align:center;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;width:148px;">
  <div style="width:38px;height:38px;border-radius:50%;background:#4353FF;display:inline-flex;align-items:center;justify-content:center;margin-bottom:8px;">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3z"/><path d="m9 12 2 2 4-4"/></svg>
  </div>
  <div style="font-weight:700;font-size:11px;letter-spacing:1.2px;color:#1A1A2E;text-transform:uppercase;">Protected checkout</div>
  <div style="font-size:11px;color:#767DAC;margin-top:4px;">Evidora.io</div>
</div>

04Lock pill with live dot

Encrypted | Recorded | Live

View HTML

<div style="background:#ffffff;border:1px solid #E2E5F0;border-radius:999px;padding:8px 16px;display:inline-flex;align-items:center;gap:10px;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;font-size:13px;color:#1A1A2E;">
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4353FF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
  <span style="font-weight:600;">Encrypted</span>
  <span style="color:#E2E5F0;">|</span>
  <span style="font-weight:600;">Recorded</span>
  <span style="color:#E2E5F0;">|</span>
  <span style="display:inline-flex;align-items:center;gap:5px;font-weight:600;"><span style="width:7px;height:7px;background:#16A34A;border-radius:50%;display:inline-block;"></span>Live</span>
</div>

05Two-line vertical panel

Secure Checkout

Recorded and protected by Evidora.io

View HTML

<div style="text-align:center;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;max-width:200px;">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4353FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom:6px;"><path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3z"/><path d="m9 12 2 2 4-4"/></svg>
  <div style="font-weight:800;font-size:14px;color:#1A1A2E;">Secure Checkout</div>
  <div style="font-size:12px;color:#767DAC;margin-top:2px;">Recorded and protected by Evidora.io</div>
</div>

06Dark mode pill

Secure· Protected by Evidora.io

View HTML

<div style="background:#1A1A2E;color:#ffffff;border-radius:999px;padding:8px 16px;display:inline-flex;align-items:center;gap:8px;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;font-size:13px;">
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#F5A416" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3z"/></svg>
  <span style="font-weight:700;">Secure</span><span style="opacity:0.65;">· Protected by Evidora.io</span>
</div>

07Bordered wrapper label

Protected · Evidora.io

Card number

•••• •••• •••• 4242

View HTML

<div style="position:relative;border:1px dashed #B8BEDC;border-radius:10px;padding:18px 18px 14px;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;">
  <div style="position:absolute;top:-9px;right:14px;background:#ffffff;padding:0 8px;font-family:'Segoe UI',Roboto,sans-serif;font-weight:700;font-size:10px;letter-spacing:1.6px;color:#4353FF;text-transform:uppercase;">Protected · Evidora.io</div>
  <!-- your payment fields here -->
</div>

08Recording-live indicator

Securely recording your checkout · Evidora.io

View HTML

<div style="background:#FFFAF0;border:1px solid #F7D69A;border-radius:8px;padding:9px 14px;display:inline-flex;align-items:center;gap:10px;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;font-size:13px;color:#1A1A2E;">
  <span style="position:relative;display:inline-flex;width:10px;height:10px;align-items:center;justify-content:center;">
    <span style="width:8px;height:8px;background:#F5A416;border-radius:50%;display:inline-block;box-shadow:0 0 0 4px rgba(245,164,22,0.25);"></span>
  </span>
  <span><strong style="font-weight:700;">Securely recording</strong> your checkout · Evidora.io</span>
</div>

09Footer-style full-width strip

This checkout is protected · Recording is tamper-evident · Evidora.io

View HTML

<div style="background:#F8F9FC;border-top:1px solid #E2E5F0;border-bottom:1px solid #E2E5F0;padding:10px 16px;width:100%;text-align:center;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;font-size:12px;color:#767DAC;">
  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#4353FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:6px;"><path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3z"/></svg>
  This checkout is protected · Recording is tamper-evident · Evidora.io
</div>

10Trust icon row

Secured by Evidora.io

View HTML

<div style="display:inline-flex;flex-direction:column;align-items:center;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;">
  <div style="display:inline-flex;align-items:center;gap:14px;color:#4353FF;">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3z"/></svg>
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
  </div>
  <div style="font-weight:700;font-size:11px;letter-spacing:1.4px;color:#767DAC;margin-top:6px;text-transform:uppercase;">Secured by Evidora.io</div>
</div>

Section 2: Thank-you page (post-purchase)

Once the order is placed, the customer’s first instinct is to confirm the transaction was real and recorded. The thank-you page is where that reassurance should live, paired with a View My Order link so the customer can return to the saved order record at any time. These ten variants run from the reference card style on through compact banners, badges, and full-width footer bands.

⚡ Claude.ai prompt Paste a snippet plus this prompt into Claude

Hey Claude, take this exact thank-you-page protection card and reconfigure it
for my brand. My post-purchase page uses [describe colors, typography,
and overall voice in 1 or 2 sentences]. The customer just paid, so this
should feel celebratory and reassuring without being loud. Keep the "View My
Order" button linked to {{ORDER_RECORD_URL}} (I will inject the real URL
server-side). Match the visual weight of the rest of my order-confirmation
page so it does not look like a third-party widget. Return one clean,
self-contained HTML block I can drop under my order summary.

[Paste the snippet HTML here.]

11Reference protected card

Your Order Is Protected

A verified recording of your checkout was captured at the time of purchase. You can review exactly what you ordered, agreed to, and confirmed at any time.

View My Order

Protected by Evidora.io

View HTML

<div style="background:#EEF0FF;border:1px solid #D6DEFB;border-radius:12px;padding:22px;text-align:center;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;max-width:480px;">
  <div style="width:44px;height:44px;border-radius:50%;background:#4353FF;display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px;">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3z"/></svg>
  </div>
  <div style="font-weight:800;font-size:16px;color:#1A1A2E;">Your Order Is Protected</div>
  <p style="font-size:13px;color:#1F1F32;margin:8px 0 14px;line-height:1.5;">A verified recording of your checkout was captured at the time of purchase. You can review exactly what you ordered, agreed to, and confirmed at any time.</p>
  <a href="{{ORDER_RECORD_URL}}" style="background:#4353FF;color:#ffffff;text-decoration:none;font-weight:700;padding:10px 20px;border-radius:8px;font-size:13px;display:inline-block;">View My Order</a>
  <div style="font-size:11px;color:#767DAC;margin-top:12px;">Protected by Evidora.io</div>
</div>

12Dark navy hero card

Your Order Is Protected

A tamper-evident record of your checkout was captured. View it whenever you need to.

View My Order

View HTML

<div style="background:linear-gradient(135deg,#1A1A2E 0%,#2A2050 100%);color:#ffffff;border-radius:12px;padding:22px;text-align:center;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;max-width:480px;">
  <div style="width:44px;height:44px;border-radius:50%;background:rgba(245,164,22,0.20);display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px;">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#F5A416" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3z"/></svg>
  </div>
  <div style="font-weight:800;font-size:16px;">Your Order Is Protected</div>
  <p style="font-size:13px;color:#B8BEDC;margin:8px 0 14px;line-height:1.5;">A tamper-evident record of your checkout was captured. View it whenever you need to.</p>
  <a href="{{ORDER_RECORD_URL}}" style="background:#F5A416;color:#ffffff;text-decoration:none;font-weight:800;padding:10px 22px;border-radius:8px;font-size:13px;display:inline-block;">View My Order</a>
</div>

13Compact horizontal banner

Order #1024 is protected

Verified record by Evidora.io

View My Order →

View HTML

<div style="background:#F0F4FF;border:1px solid #D6DEFB;border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:12px;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;">
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#4353FF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3z"/><path d="m9 12 2 2 4-4"/></svg>
  <div style="flex:1;">
    <div style="font-weight:700;font-size:13px;color:#1A1A2E;">Order #{{ORDER_ID}} is protected</div>
    <div style="font-size:11px;color:#767DAC;">Verified record by Evidora.io</div>
  </div>
  <a href="{{ORDER_RECORD_URL}}" style="color:#4353FF;text-decoration:none;font-weight:700;font-size:12px;background:#ffffff;border:1px solid #4353FF;padding:6px 12px;border-radius:6px;">View My Order &rarr;</a>
</div>

14Bordered minimal

✓ Order recorded and protected

A tamper-evident record of your checkout is on file.

View My Order →

View HTML

<div style="border:1px solid #D6DEFB;border-radius:8px;padding:14px 16px;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;">
  <div style="font-weight:700;font-size:13px;color:#1A1A2E;margin-bottom:4px;">&#10003; Order recorded and protected</div>
  <div style="font-size:12px;color:#767DAC;margin-bottom:8px;">A tamper-evident record of your checkout is on file.</div>
  <a href="{{ORDER_RECORD_URL}}" style="font-weight:700;font-size:12px;color:#4353FF;text-decoration:underline;">View My Order &rarr;</a>
</div>

15Stamp badge

Protected

View My Order

EVIDORA.IO

View HTML

<div style="text-align:center;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;">
  <div style="display:inline-block;border:2px solid #4353FF;color:#4353FF;border-radius:50%;width:78px;height:78px;line-height:78px;font-weight:800;font-size:11px;letter-spacing:2.4px;text-transform:uppercase;">Protected</div>
  <div style="margin-top:8px;"><a href="{{ORDER_RECORD_URL}}" style="background:#4353FF;color:#ffffff;text-decoration:none;font-weight:700;padding:8px 18px;border-radius:6px;font-size:12px;display:inline-block;">View My Order</a></div>
  <div style="font-size:10px;color:#767DAC;margin-top:8px;letter-spacing:0.8px;">EVIDORA.IO</div>
</div>

16Split panel

Order Protected

Tamper-evident record on file.

View My Order

View HTML

<div style="border:1px solid #E2E5F0;border-radius:10px;display:flex;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;overflow:hidden;">
  <div style="flex:1;padding:14px 16px;background:#ffffff;">
    <div style="font-weight:800;font-size:13px;color:#1A1A2E;">Order Protected</div>
    <div style="font-size:11px;color:#767DAC;line-height:1.5;">Tamper-evident record on file.</div>
  </div>
  <a href="{{ORDER_RECORD_URL}}" style="background:#4353FF;color:#ffffff;text-decoration:none;font-weight:700;font-size:12px;padding:0 18px;display:inline-flex;align-items:center;">View My Order</a>
</div>

17Check celebration

Order placed and protected

A verified record is saved to your account.

View My Order →

View HTML

<div style="text-align:center;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;">
  <div style="width:48px;height:48px;border-radius:50%;background:#16A34A;display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px;">
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 12 4 4 8-8"/></svg>
  </div>
  <div style="font-weight:800;font-size:16px;color:#1A1A2E;">Order placed and protected</div>
  <div style="font-size:12px;color:#767DAC;margin:6px 0 10px;">A verified record is saved to your account.</div>
  <a href="{{ORDER_RECORD_URL}}" style="font-weight:700;font-size:12px;color:#4353FF;text-decoration:underline;">View My Order &rarr;</a>
</div>

18Gradient hero card

Order Protected

Your checkout is saved as a verified record.

View My Order

View HTML

<div style="background:linear-gradient(135deg,#4353FF 0%,#7986FF 100%);color:#ffffff;border-radius:12px;padding:22px;text-align:center;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;max-width:480px;">
  <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom:8px;"><path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3z"/><path d="m9 12 2 2 4-4"/></svg>
  <div style="font-weight:800;font-size:16px;">Order Protected</div>
  <p style="font-size:13px;opacity:0.9;margin:6px 0 14px;line-height:1.5;">Your checkout is saved as a verified record.</p>
  <a href="{{ORDER_RECORD_URL}}" style="background:#F5A416;color:#ffffff;text-decoration:none;font-weight:800;padding:9px 22px;border-radius:6px;font-size:13px;display:inline-block;">View My Order</a>
</div>

19Inline mini-row

✓ This order has a verified record on file. View →

View HTML

<div style="padding:8px 0;border-top:1px solid #E2E5F0;border-bottom:1px solid #E2E5F0;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;font-size:13px;display:flex;align-items:center;gap:8px;color:#1A1A2E;">
  <span style="color:#16A34A;font-weight:700;">&#10003;</span>
  <span>This order has a verified record on file.</span>
  <a href="{{ORDER_RECORD_URL}}" style="margin-left:auto;color:#4353FF;text-decoration:none;font-weight:700;">View &rarr;</a>
</div>

20Footer band (full-width)

This order has a tamper-evident record. View it any time at View My Order →

View HTML

<div style="background:#1A1A2E;color:#ffffff;padding:12px 16px;display:flex;align-items:center;gap:10px;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;font-size:12px;">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#F5A416" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3z"/></svg>
  <span>This order has a tamper-evident record. View it any time at <a href="{{ORDER_RECORD_URL}}" style="color:#F5A416;text-decoration:underline;">View My Order &rarr;</a></span>
</div>

Section 3: Email confirmation

Transactional email is the one channel where modern CSS does not work. Gmail, Outlook, and Apple Mail render reliably only when the markup is table-based with inline styles. The ten snippets in this section are all email-safe. Each renders the same way in the major clients, includes a clickable View My Order button, and gives the recipient a calm, credible signal that their order is on file.

Note on icons: The shield icons below are inline SVG, which renders in Apple Mail, Outlook.com web, Gmail mobile, Yahoo Mail, iOS and Android mail, and Thunderbird. If you need to support Outlook desktop 2007–2019 specifically, swap the inline SVG for a hosted PNG (recommended dimensions: 24×24 or 44×44) and reference it with a standard <img> tag.

⚡ Claude.ai prompt Paste a snippet plus this prompt into Claude

Hey Claude, take this exact email confirmation protection block and rebuild it
for my transactional email template. My brand colors are [list]. My tone
is [describe in 1 sentence]. Keep the layout table-based with inline styles
only, no flexbox, no grid, no external CSS, so it renders correctly in Gmail,
Outlook, Apple Mail, and the major mobile mail clients. Replace the View My
Order button href with {{ORDER_RECORD_URL}}. Keep the markup compact enough
that the block clips cleanly into my existing order email. Return one
self-contained, email-safe HTML block.

[Paste the snippet HTML here.]

21Top banner (above order)

Your order is protected. View My Order →

View HTML

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background:#EEF0FF;border:1px solid #D6DEFB;border-radius:8px;font-family:Arial,Helvetica,sans-serif;">
  <tr><td style="padding:14px 18px;color:#1A1A2E;">
    <table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr>
      <td style="vertical-align:middle;padding-right:10px;"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#4353FF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3z"/><path d="m9 12 2 2 4-4"/></svg></td>
      <td style="vertical-align:middle;"><strong style="font-size:14px;color:#1A1A2E;">Your order is protected.</strong> <a href="{{ORDER_RECORD_URL}}" style="color:#4353FF;text-decoration:underline;font-size:13px;">View My Order &rarr;</a></td>
    </tr></table>
  </td></tr>
</table>

22Inline below totals

✓ Order recorded. A verified record of your checkout is on file. View My Order

View HTML

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="font-family:Arial,Helvetica,sans-serif;border-top:1px solid #E2E5F0;margin-top:8px;">
  <tr><td style="padding:12px 0;text-align:center;font-size:12px;color:#767DAC;">
    <strong style="color:#1A1A2E;font-size:13px;">&#10003; Order recorded.</strong> A verified record of your checkout is on file. <a href="{{ORDER_RECORD_URL}}" style="color:#4353FF;text-decoration:underline;">View My Order</a>
  </td></tr>
</table>

23Sidebar callout

Order Summary
Items, totals, address…

🔒 Protected

Verified record on file

View My Order

View HTML

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="font-family:Arial,Helvetica,sans-serif;">
  <tr>
    <td valign="top" style="padding-right:10px;font-size:13px;color:#1A1A2E;">
      <!-- your order summary table here -->
    </td>
    <td valign="top" width="160" style="background:#F8F9FC;border:1px solid #E2E5F0;border-radius:8px;padding:12px;text-align:center;">
      <div style="font-weight:700;font-size:12px;color:#1A1A2E;">&#128274; Protected</div>
      <div style="font-size:11px;color:#767DAC;margin:4px 0 8px;">Verified record on file</div>
      <a href="{{ORDER_RECORD_URL}}" style="font-size:11px;color:#4353FF;text-decoration:underline;font-weight:700;">View My Order</a>
    </td>
  </tr>
</table>

24Footer seal

🛡️ Order Protected by Evidora.io · View record

View HTML

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="font-family:Arial,Helvetica,sans-serif;">
  <tr><td style="padding:18px 0 8px;text-align:center;font-size:11px;color:#767DAC;letter-spacing:0.4px;">
    &#128737;&#65039; Order Protected by Evidora.io · <a href="{{ORDER_RECORD_URL}}" style="color:#767DAC;text-decoration:underline;">View record</a>
  </td></tr>
</table>

25Bordered hero box

Your Order Is Protected

A verified recording of your checkout is on file. Review it any time.

View My Order

View HTML

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="font-family:Arial,Helvetica,sans-serif;background:#EEF0FF;border:1px solid #D6DEFB;border-radius:10px;">
  <tr><td style="padding:22px;text-align:center;">
    <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#4353FF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="display:block;margin:0 auto 8px;"><path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3z"/><path d="m9 12 2 2 4-4"/></svg>
    <div style="font-weight:800;font-size:16px;color:#1A1A2E;">Your Order Is Protected</div>
    <p style="font-size:13px;color:#1F1F32;margin:8px 0 14px;line-height:1.5;">A verified recording of your checkout is on file. Review it any time.</p>
    <a href="{{ORDER_RECORD_URL}}" style="background:#4353FF;color:#ffffff;text-decoration:none;font-weight:700;padding:10px 20px;border-radius:6px;font-size:13px;display:inline-block;">View My Order</a>
  </td></tr>
</table>

26Minimalist single line

✓ Your order has a verified record. View it →

View HTML

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="font-family:Arial,Helvetica,sans-serif;">
  <tr><td style="padding:10px 0;font-size:13px;color:#1A1A2E;">
    <span style="color:#16A34A;font-weight:700;">&#10003;</span> Your order has a verified record. <a href="{{ORDER_RECORD_URL}}" style="color:#4353FF;text-decoration:underline;font-weight:700;">View it &rarr;</a>
  </td></tr>
</table>

27Stripe-style two-column

Order Protected

Verified record by Evidora.io · View My Order

View HTML

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="font-family:Arial,Helvetica,sans-serif;border:1px solid #E2E5F0;border-radius:10px;">
  <tr>
    <td valign="middle" width="56" style="padding:18px;background:#F8F9FC;border-right:1px solid #E2E5F0;text-align:center;">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4353FF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="display:block;margin:0 auto;"><path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3z"/><path d="m9 12 2 2 4-4"/></svg>
    </td>
    <td valign="middle" style="padding:14px 18px;">
      <div style="font-weight:700;font-size:13px;color:#1A1A2E;">Order Protected</div>
      <div style="font-size:12px;color:#767DAC;line-height:1.5;">Verified record by Evidora.io · <a href="{{ORDER_RECORD_URL}}" style="color:#4353FF;text-decoration:underline;font-weight:700;">View My Order</a></div>
    </td>
  </tr>
</table>

28Solid color band

Your order is protected. A verified record is on file. View My Order →

View HTML

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="font-family:Arial,Helvetica,sans-serif;background:#4353FF;color:#ffffff;border-radius:8px;">
  <tr><td style="padding:14px 18px;font-size:13px;">
    <strong style="font-weight:800;font-size:14px;">Your order is protected.</strong>
    <span style="opacity:0.85;">A verified record is on file.</span>
    <a href="{{ORDER_RECORD_URL}}" style="color:#F5A416;text-decoration:underline;font-weight:800;margin-left:6px;">View My Order &rarr;</a>
  </td></tr>
</table>

29Ribbon-style stamp

Protected

View My Order

View HTML

<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="left">
  <tr>
    <td style="background:#F5A416;color:#ffffff;padding:6px 12px 6px 14px;font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;border-radius:4px 0 0 4px;font-family:Arial,Helvetica,sans-serif;">Protected</td>
    <td style="background:#1A1A2E;color:#ffffff;padding:6px 14px 6px 12px;font-size:11px;letter-spacing:0.6px;border-radius:0 4px 4px 0;font-family:Arial,Helvetica,sans-serif;"><a href="{{ORDER_RECORD_URL}}" style="color:#ffffff;text-decoration:underline;">View My Order</a></td>
  </tr>
</table>

30Receipt-style framed

Order Receipt

✅ Protected · Verified record on file

Evidora.io · View My Order

View HTML

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="font-family:'Courier New',Courier,monospace;background:#FFFDF7;border:1px dashed #C8C2B0;border-radius:6px;">
  <tr><td style="padding:16px 18px;">
    <div style="font-size:11px;letter-spacing:1.2px;color:#767DAC;text-transform:uppercase;">Order Receipt</div>
    <div style="font-size:13px;color:#1A1A2E;margin:6px 0;">&#9989; Protected · Verified record on file</div>
    <div style="border-top:1px dashed #C8C2B0;margin:8px 0;"></div>
    <div style="font-size:12px;color:#1A1A2E;"><strong>Evidora.io</strong> · <a href="{{ORDER_RECORD_URL}}" style="color:#4353FF;text-decoration:underline;font-family:Arial,Helvetica,sans-serif;">View My Order</a></div>
  </td></tr>
</table>

The Missing Piece

Most merchants treat the order page, the thank-you page, and the email confirmation as three separate design surfaces, owned by three separate teams. The customer experiences them as one journey. A consistent trust signal across all three is the difference between a transaction that feels generic and a transaction that feels recorded. Pick one design language from these snippets, adapt it once, and reuse it across the three surfaces so the customer sees the same protection cue from cart to inbox.

Frequently asked questions

Are these snippets free to use?

Yes. Every snippet on this page is free for any Evidora customer to copy, paste, and adapt. You can use the HTML as-is, drop it into Claude.ai with the prompts above to restyle it to your brand, or use it as a visual reference for your own designer.

Why show a protection badge on the checkout page before payment?

Trust at checkout is the single highest-leverage moment in the cart flow. A small, credible signal that the page is being securely recorded reduces last-step abandonment and reinforces that the merchant takes the transaction seriously. The order-page snippets are intentionally not clickable, because the order has not been placed yet.

Why does the thank-you page need its own snippet?

Once the order is placed, the customer’s first instinct is to look for confirmation that the transaction was real and safe. A visible protected-record card on the thank-you page, with a link to view the saved order record, lowers post-purchase anxiety and gives the customer a reason to return to verify their order rather than calling support.

Why do the email snippets look different from the web ones?

Transactional email clients (Gmail, Outlook, Apple Mail, mobile mail apps) do not support modern CSS layout. They render reliably only with table-based markup and inline styles. The email-section snippets are written to those constraints so they render the same way in every major client.

How do I customize a snippet for my brand?

Two options. First, click Copy code on any snippet, paste it into your page or email, and edit the inline styles directly. Second, copy the snippet, paste it into Claude.ai with the prompt template at the top of the section, and ask Claude to restyle it to match your brand colors, typography, and voice. Either path is fine. The Claude.ai path is faster when you want a holistic rebrand of the snippet.

Do I need to link the View My Order button to anything specific?

Yes. The link should point to the Evidora-hosted record URL for that specific order, which Evidora generates for every captured interaction. In the snippets, that destination is shown as a placeholder; replace it with your server-side templated URL (often something like the customer’s order summary page on the merchant site, or the Evidora record link if you choose to expose it directly).

Show your customers their order is protected

Evidora captures court-ready evidence of every checkout interaction. One line of code. Retain what matters, expire what does not, and give every customer a visible record of their order.

See how it works →

Honest Checkout Page Security