The patch designer, native on your site.

One script tag, one custom element — no iframe, no nested scrolls, no styling boundary. Inherits your theme, fires native DOM events for analytics, and ships in under 200 KB gzipped.

Get your client key Read installation guide

Paste this. You’re live.

Drop the snippet anywhere inside your page. The custom element auto-sizes to its container and the loader script handles all dependencies. Your client key ships in your dashboard the moment you sign up.

Drop-in snippet

<!-- PatchDesign.AI SDK -->
<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 -->

Works on every modern browser No build step required Self-host friendly

Live preview

This is the SDK rendering, right now.

Same component, same bundle your partners receive. Try a prompt below.

Inspect the bundle →

Setting up your patch designer

Why partners moved off iframes.

The iframe loader is still supported as a fallback. For everything else, the SDK wins on speed, styling, and analytics fidelity.

SDK (web component)Iframe loader (fallback)

Page weightSingle ~170 KB gzipped JS file, lazy-loadedIframe loads its own ~600 KB bundle inside a sandbox

Render speedRenders inline with the page — no iframe bootExtra navigation, separate JS context, slower paint

StylingInherits page theme; CSS vars + brand-color attributeHard boundary; cannot be styled by the host page

AnalyticsNative CustomEvents on window — drop-in for GA4 / PixelSame events, dispatched via postMessage bridge

MobileAuto-sizes to viewport; no nested-scroll quirksFixed iframe height; double-scroll on small screens

Renders in milliseconds

No iframe boot, no second JS context. The component mounts inline and the bundle is lazy-loaded the moment your page idles.

Brand it like a native widget

Pass brand-color, theme, and starter prompts as attributes. CSS variables let you skin everything down to button radii.

Works everywhere modern

Chrome 89+, Safari 14+, Firefox, Edge. The web-component standard is built into every evergreen browser — no polyfills.

Ship the designer to your customers today.

Sign up takes about a minute. Your dashboard returns a snippet that already has your client key filled in — paste, save, done.