Integration Docs

Add the editor to
any website in minutes.

Three ways to embed Darkroom — pick the one that fits how your site is built. No framework required, no build step needed.

1
HTML Snippet
Easiest
▼

Paste two lines into your page's HTML — that's it. Works in any website builder (Squarespace, Webflow, Wix, Wordpress, etc.) or a hand-coded site.

Paste into your HTML 
<!-- Step 1: Put this where you want the editor to appear -->
<div id="darkroom"></div>

<!-- Step 2: Paste this script tag anywhere after Step 1 -->
<script
  src="https://confidewebdesign.com/darkroom-embed.js"
  data-container="darkroom"
  data-height="700px"
  data-radius="16px"></script>

📐 Want it taller or shorter? Change data-height. Use 100vh for full-screen.

2
Direct Iframe
Simple
▼

If you already know how to embed an iframe, you can point it straight at the Darkroom app URL. Good for page builders with an "embed URL" field.

Direct iframe 
<iframe
  src="https://confidewebdesign.com/darkroom.html"
  width="100%"
  height="700"
  style="border:none;border-radius:16px;display:block;"
  allow="clipboard-write"
></iframe>

Or just share this URL directly with your customer — they can open it in any browser:

Standalone URL 
https://confidewebdesign.com/darkroom.html
3
Script Tag (Developer)
Developer
▼

For developers who want more control — load the script in your <head> and manually call the container in your JS. Useful when you're dynamically inserting the editor into a SPA or CMS.

In your <head> 
<script
  src="https://confidewebdesign.com/darkroom-embed.js"
  data-container="my-editor-container"
  data-height="80vh"
  data-radius="12px"
  defer></script>
In your HTML body 
<div id="my-editor-container"></div>

Customisation Options

Add these as data-* attributes to the <script> tag.

Attribute Default Description
data-container "darkroom" The id of the div to place the editor inside.
data-width "100%" Width of the editor. Accepts any CSS value: 100%, 800px, etc.
data-height "700px" Height of the editor. Try 100vh for full-screen, or a fixed pixel value.
data-radius "12px" Border radius of the editor frame. Use 0 to remove rounding.
data-label "Darkroom" Text shown below the loading spinner while the editor initialises.

Common Questions

Answers to things people usually ask before going live.

Will Darkroom work on mobile? ▼
Yes. The editor is fully touch-aware — all sliders, the crop tool, and the toolbar are designed for both mobile and desktop.
Do I need to install anything? ▼
No. The embed is a single script tag. There's no npm package to install, no build step, and no dependencies your page needs to load separately.
Where does the user's photo go? ▼
Nowhere. Everything happens locally in the user's browser. Photos are never uploaded to any server — they're processed on-device and exported straight to the user's device.
Can I change the height after the page loads? ▼
Yes — the container div is just a normal element. You can resize it with CSS or JavaScript at any time and the iframe will follow.
Will it slow down my page? ▼
The embed script is tiny and the iframe uses loading="lazy", so it won't block your page from loading. The editor itself only initialises when it scrolls into view.
Something isn't working — how do I get help? ▼
Open your browser's developer console (F12 → Console tab) and check for any red error messages. Copy those and send them over — that's usually all we need to figure it out fast.