Embed & share

Put your thank-you page on your own website or link-in-bio. Choose an inline embed or a floating thank-you button, match it to your colors, then copy ready-to-paste HTML or React.

Two ways to place it

Choose your layout

Inline embed: An iframe that lives inside your page flow, so your thank-you page sits right on your site.
Thank-you button: A floating link that opens your thank-you page in a new tab. The lightest touch for a link-in-bio.

Make it yours

Match it to your site

Set the size, corner radius, and colors so the embed feels like part of your page. Every choice is saved into the snippet as a setting on the link, so you can hand-edit it later too.

hf_bg: Page background color. Default #05070d.
hf_text: Text color.
hf_card: Card background color.
hf_grad: Gradient background on or off. 1 is on, 0 is off.
hf_cta_border: Button border thickness in pixels, from 0 to 8.
hf_cta_bg: Button background color.

Safe by design

Customizing is visual only. Colors and size never touch your money, your payouts, or your links. The embed is a sandboxed, lazy-loaded iframe, and card details always stay inside Stripe.

Copy the code

Paste it on your site

Replace your-handle with your own handle. Your exact snippet, with your colors already set, is generated for you in the Embed & share panel, so the examples below show the shape.

HTML

<!-- HayloFriend, inline thank-you page embed -->
<div style="max-width:100%;padding:12px;background:linear-gradient(180deg, #05070d, #0b0f18);color:#fafafa;border-radius:12px;overflow:hidden;">
  <iframe
    title="HayloFriend thank-you"
    src="https://haylofriend.com/embed/thank/your-handle?hf_bg=%2305070d&amp;hf_text=%23fafafa&amp;hf_card=%230b0f18&amp;hf_grad=1&amp;hf_cta_border=4&amp;hf_cta_bg=%2305060a"
    width="100%"
    height="520px"
    style="border:0;display:block;width:100%;min-height:200px;background:#0b0f18;"
    loading="lazy"
    sandbox="allow-scripts allow-forms allow-popups allow-top-navigation-by-user-activation"
    referrerpolicy="no-referrer-when-downgrade"
  ></iframe>
</div>

React

// HayloFriend, inline thank-you page embed
export function HayloThankYouEmbed() {
  return (
    <div style={{ maxWidth: "100%", padding: 12, background: "linear-gradient(180deg, #05070d, #0b0f18)", color: "#fafafa", borderRadius: 12, overflow: "hidden" }}>
      <iframe
        title="HayloFriend thank-you"
        src={"https://haylofriend.com/embed/thank/your-handle?hf_bg=%2305070d&hf_text=%23fafafa&hf_card=%230b0f18&hf_grad=1&hf_cta_border=4&hf_cta_bg=%2305060a"}
        width="100%"
        height="520px"
        style={{ border: 0, display: "block", width: "100%", minHeight: 200, background: "#0b0f18" }}
        loading="lazy"
        sandbox="allow-scripts allow-forms allow-popups allow-top-navigation-by-user-activation"
        referrerPolicy="no-referrer-when-downgrade"
      />
    </div>
  );
}

Pro tip

If the inline preview stays blank inside a strict site builder, the floating thank-you button always works, since it opens your page in a new tab instead of framing it.

Troubleshooting

My embed is blank or not working

Start with location: Haylo in-panel preview can fail for host-page policy reasons, while copied snippet may still work externally. For iframe src, use /embed/thank/:slug (not /thank/:slug). Open the embed URL directly: if it fails, fix URL/slug first. If it loads, check host-page console for CSP/frame-src/frame-ancestors/X-Frame errors. If no CSP error appears, verify URL shape, slug validity, host mismatch, or sandbox restrictions. Security doctrine: /thank/* stays unembeddable, /embed/thank/:slug is iframe-only, and do not relax global CSP blindly.

embediframecspframe-srcframe-ancestorsx-frame