Installation Guide

Embed the designer - capture leads instantly

One iframe snippet is all it takes. Add the AI patch designer to any website in under 5 minutes - no backend code, no API keys in your frontend, no dependencies.

Get my client key →View Plans

Get your client key - instant

Sign up at /signup with your company name, website, and email. You'll get a client key immediately - a short string like mfr-acmepatches-a3f9 - plus a dashboard magic-link sent to your inbox.

Your client key is how the embed tool identifies your account, routes leads to your email, and applies your branding. Keep it private - don't post it publicly or commit it to a public GitHub repo.

Add the embed snippet

Choose your platform below and paste the snippet into your site.

✨

No key to replace. After signup, your dashboard shows a ready-to-paste snippet with your client key already filled in - just copy and paste it into your site. The examples below show the generic shape so you can see what to expect.

Where to paste on Any HTML Site: Paste the snippet anywhere inside your <body> - works on static sites, landing pages, and any custom-built site.

Code

<!-- PatchDesign.AI SDK - native web component, branded, event-emitting -->
<script src="https://patchdesign.ai/sdk/patch-designer.sdk.latest.js" defer></script>
<patch-designer
  client-key="YOUR_CLIENT_KEY"
  theme="auto"
  width="100%"
></patch-designer>
<!-- end PatchDesign.AI SDK -->

Why the script loader? It auto-resizes the embed to its content (no fixed height to guess), applies your branding as soon as the page loads, and fires DOM events you can hook into for Google Analytics, Meta Pixel, or any other tracker. See the "Analytics integration" section below.

Receive leads by email

When a visitor completes a design and clicks "Get My Free Quote," you receive an email within seconds - no dashboard to check, no integration required. Here's exactly what a real lead email looks like:

From: PatchDesign.AI <[email protected]>

To: [email protected]

Subject: New Patch Design Lead - Sarah Johnson

Today at 2:14 PM

New Lead from PatchDesign.AI

A visitor on yourpatchcompany.com just requested a quote

Name	Sarah Johnson
Email	[email protected]
Phone	(555) 482-9301
AI Prompt	"Soccer team patch for Riverside FC, 3-inch round, navy and gold, with a soccer ball and lightning bolt, 150 pieces"
Patch Type	Embroidered
Estimated Qty	150 units

riverside_fc_patch_design.png

Attached - production-ready AI-generated design (1024×1024 px)

Reply to Sarah →

You are receiving this because you have an active PatchDesign.AI embed on yourpatchcompany.com. Manage your account at patchdesign.ai.

The attached PNG is the AI-generated design exactly as the customer saw it - ready to send straight to production or use as a starting point for your quote. Hit reply and you're directly in the customer's inbox.

Customize your branding

Every plan - Free, Starter, Pro, Scale - includes full branding customization. The embedded tool displays your logo, uses your brand's accent color, and can be fully white-labeled with no PatchDesign.AI mentions. Send us your logo (PNG with transparent background, minimum 200px wide) and your primary hex color code when you sign up.

All plans share the same features - the only difference is the monthly design quota. See plans → or start free →.

Your Logo

Replaces the PatchDesign.AI wordmark in the tool header

Accent Color

Buttons, links, and accents use your brand color

Priority Support & SLA

2-hour response, direct Slack channel with the team, white-glove onboarding

Remove All Branding

Full white-label - no PatchDesign.AI mention anywhere in the tool

Go-live checklist

Run through these before announcing the tool to your customers:

Upload your logo + accent color in the dashboard so every embed is on-brand
Submit a test design and confirm the lead email lands in your inbox (check spam first time)
Add a dedicated "Custom Patches" or "Design Your Patch" page to your main site navigation, and link to the designer from custom-work, team-order, and bulk-pricing product pages
Check your dashboard - views, generations, and quote submits appear live within ~30 seconds Open dashboard →

OPTIONAL

Analytics integration

The script-loader install fires three DOM events you can forward to GA4, Meta Pixel, HubSpot, or any other analytics platform. Drop this next to your other tracking code (works with GTM too):

Code

// Paste this in your site's global JS (or Google Tag Manager)
window.addEventListener('patchdesign:view', () => {
  // embed loaded - count a page impression
  gtag?.('event', 'patch_designer_view')
})

window.addEventListener('patchdesign:generation', (e) => {
  // AI design generated - strong engagement signal
  gtag?.('event', 'patch_designer_generation', e.detail)
})

window.addEventListener('patchdesign:quote_submitted', (e) => {
  // Lead captured - conversion event
  gtag?.('event', 'generate_lead', { value: e.detail?.estimatedPrice, currency: 'USD' })
  fbq?.('track', 'Lead')
})

Not using the script loader? The same events are also sent via window.postMessage from the iframe - listen on message events and filter by event.data.type.startsWith('patchdesign:').

Troubleshooting

The iframe shows a blank page or error.+

Make sure you pasted the personalized snippet from your dashboard (it has your client key already filled in) rather than the generic example shown on this page. If you're still seeing an error, confirm your domain is on the allowlist we set up for your account - email us if you need to add a new domain.

The tool loads but I'm not receiving lead emails.+

Check your spam folder first. If leads aren't arriving, confirm the email address on your account is correct by replying to your welcome email. Leads are sent within seconds of a visitor submitting the quote form.

The tool appears too short / content is cut off.+

Increase the iframe height attribute. We recommend 700px for desktop; for pages where mobile is primary, 800px works better. The tool is responsive inside the iframe.

My site uses a Content Security Policy (CSP).+

Add frame-src https://patchdesign.ai to your CSP header to allow the iframe. Also add img-src https://patchdesign.ai if images inside the tool are blocked.

I want to track conversions in Google Analytics / Meta Pixel.+

The script-loader install fires DOM CustomEvents on window: patchdesign:view (embed loaded), patchdesign:generation (AI design created), and patchdesign:quote_submitted (lead captured). Add a one-line listener - see the "Analytics integration" section above the troubleshooting header.

Can I see my stats?+

Yes - visit the dashboard at patchdesign.ai/dashboard. You'll see views, generations, quote submissions, and every lead, refreshed live. Sign in with the email on your account; no password, just a one-click magic link.

Ready to add the designer to your site?

Get my client key →Dashboard