Embed a drawing pad on your page

Try it here

This is exactly what your readers will see.

Copy the snippet

<iframe src="https://sketchnn.lp-data.cloud/embed" title="SketchNN: draw a doodle and let the AI guess it"
  loading="lazy" style="width: 100%; max-width: 480px; height: 600px; border: 0;"></iframe>

1. Open the page where the pad should go, in its HTML view. Most site builders call this an HTML, code or embed block.
2. Paste the snippet where the pad should appear and publish.
3. Open the published page and press Try drawing once to check it.

The pad fills the width of your column, up to 480 pixels, and is 600 pixels tall, which fits on a phone. You can change the width; keep the height at 600 pixels or more so nothing is cut off.

Keep the link back

Under the pad is the link Made with SketchNN — try the full drawing companion, which opens SketchNN in a new tab. It is the one condition for embedding: keep it visible, so do not crop the frame, cover the link or hide it with styles.

What your readers download, and what stays on their device

• Nothing of the model loads with your page. When a reader presses Try drawing, their browser downloads it from SketchNN, about 13 MB, and the pad says so before they press.
• Browsers keep a separate copy for each site a frame appears on, so a reader downloads it again on your site even if they have used SketchNN before. After that, their browser usually reuses it.
• The model runs on the reader's device. Their drawing is never sent to a server: not to SketchNN and not to you.
• SketchNN counts visits to its pages, the pad included. It has no accounts and records nothing that is drawn.
• Inside a frame on another site, the model runs on a single processor thread, so guesses can take a little longer than in the full app.

If your platform does not allow iframes

Some newsletters and site builders remove iframes. Link to the app instead:

<a href="https://sketchnn.lp-data.cloud/">Draw a doodle with SketchNN, an AI drawing companion that runs in your browser</a>

For developers

• If you add a sandbox attribute, the pad needs allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox: scripts and its own origin to load and run the model, popups for the link back.
• The pad is served with Cross-Origin-Resource-Policy: cross-origin, so it also loads in pages that send Cross-Origin-Embedder-Policy: require-corp.