Publishing

You publish a Web Lens through My Lenses, the same portal that manages Lenses built in Lens Studio. You upload three things: the zip, a Lens icon, and a preview video.

The upload steps and asset specifications below reflect the current beta. Snap is confirming them before public release, and this page updates if they change.

Before you upload

• The zip passes every check in Platform requirements.
• You've tested a production build, served from dist/, on a phone in portrait rather than only in a desktop browser. Build your first Web Lens shows how.
• The Lens icon and preview video are ready and match the current build.

Upload

1. Sign in to My Lenses.
2. Create a new Lens and choose the Web Lens option.
3. Upload the zip.
4. Add the Lens name, icon, and preview video.
5. Submit for review.

Review

Snapchat reviews Web Lenses the same way as other Lenses, and the Lens submission guidelines apply. After approval, the Lens appears wherever Lenses do, and Snapchatters can find it by name or by scanning its Snapcode.

There's no way to open a Web Lens inside Snapchat before it passes review, and every new upload goes through review again. Plan for that loop: test each build on a phone and against a simulated inset before you submit, as described in Runtime environment, and batch changes rather than submitting one fix at a time.

Lens icon

512 × 512 PNG. Snapchat shows the icon inside the circle at the center of a Snapcode and crops the corners away. Treat the inscribed circle as the real canvas.

• Put the subject dead center, and keep everything that matters within about 80% of the circle's radius so nothing important touches the crop.
• Fill the whole square with background. No transparency and no corner vignette, because you don't control exactly where the edge lands.
• Use one clear subject, a strong silhouette, a saturated focal color, and high contrast against the Snapcode's dots.
• No text. It's unreadable at the size the icon appears.

Judge the icon at about 100 pixels wide, not at 512. Everything looks good at 512.

The icon is an advertisement for a tap, not a screenshot. It can come from any pipeline, whether an in-engine capture, a rendered still, or an illustration, as long as it represents the real game. A misleading icon converts once and then churns.

Preview video

720 × 1280, 5 seconds, H.264 video with AAC audio in an MP4 container. Encode at a constant 30 frames per second with the faststart flag, so playback begins before the file finishes downloading.

The preview plays where Snapchatters browse Lenses, and they decide in the first second or two. Show the most exciting moment your game has: a chain resolving, a power-up firing, a celebration. A clip that starts from a fresh game shows the least compelling version of your loop.

• Set up the state that makes the peak possible before you record, then record the payoff.
• Record longer than 5 seconds and trim to the best 5 around the peak.
• Show one complete cycle of the core loop. Avoid deaths and screen transitions mid-clip.
• If the game renders to a canvas and draws its HUD in the DOM, canvas.captureStream() records the canvas only. Composite the HUD in, or plan for a clean gameplay clip.

With ffmpeg, from a longer capture:

ffmpeg -i capture.webm -ss 2 -t 5 -vf "scale=720:1280,fps=30" -c:v libx264 -pix_fmt yuv420p -c:a aac -movflags +faststart preview.mp4

Check the result as a contact sheet of frames rather than by watching it once. Effects tuned for live play can compress into a white smear.

Versioning

Each upload is a new version of the Lens. Put a version in the zip filename, such as my-game-v3.zip, so you always know what's live. Regenerate the icon and preview video whenever the game's look changes, and re-zip after any source change. All three are snapshots of a moving target, and a stale icon is the most visible thing you can ship.