How do I add Orshot Embed to my app?

Enable the embed, allowlist your domains, and drop in the iframe or SDK component.

Updated Jun 17, 2026

Learn how to integrate Orshot Embed into your application with practical examples and best practices.

Quick Start#

1. Get Your Embed Code#

After configuring your embed settings, copy the generated embed HTML:

HTML

<iframe src="https://orshot.com/embeds/abc123def" title="Orshot Embed" allow="clipboard-write" style="width: 100%; height: 600px; border: none; border-radius: 8px;"></iframe>

Grab it from the Embed Code tab in your embed settings — it gives you the basic snippet, plus variants that open a specific template or language:

The Embed Code tab in the Orshot Embed dashboard — copy-ready iframe snippets for the default embed, opening with a template, and setting a language

2. Add to Your App#

Paste the embed code where you want the design interface to appear:

HTML

<div class="design-editor">
  <iframe
    src="https://orshot.com/embeds/abc123def"
    title="Orshot Embed"
    allow="clipboard-write"
    style="width: 100%; height: 600px; border: none; border-radius: 8px;"
  ></iframe>
</div>

3. Style the Container#

Make sure your embed has proper dimensions:

CSS

.design-editor {
  width: 100%;
  min-height: 600px;
  max-height: 80vh;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

Framework Examples#

React/Next.js#

JavaScript

export function DesignEditor({ templateId }) {
  const embedUrl = templateId
    ? `https://orshot.com/embeds/abc123def?templateId=${templateId}`
    : `https://orshot.com/embeds/abc123def`;

  return (
    <div className="w-full h-[600px] rounded-lg overflow-hidden">
      <iframe src={embedUrl} title="Orshot Embed" allow="clipboard-write" className="w-full h-full border-none" />
    </div>
  );
}

Vue.js#

<template>
  <div class="design-editor">
    <iframe :src="embedUrl" title="Orshot Embed" allow="clipboard-write" class="w-full h-full border-none"></iframe>
  </div>
</template>

<script>
export default {
  props: ["templateId"],
  computed: {
    embedUrl() {
      const base = "https://orshot.com/embeds/abc123def";
      return this.templateId ? `${base}?templateId=${this.templateId}` : base;
    },
  },
};
</script>

Angular#

TypeScript

import { Component, Input } from "@angular/core";

@Component({
  selector: "app-design-editor",
  template: `
    <div class="design-editor">
      <iframe [src]="embedUrl" title="Orshot Embed" allow="clipboard-write" class="w-full h-full border-none"></iframe>
    </div>
  `,
})
export class DesignEditorComponent {
  @Input() templateId?: string;

  get embedUrl() {
    const base = "https://orshot.com/embeds/abc123def";
    return this.templateId ? `${base}?templateId=${this.templateId}` : base;
  }
}

URL Parameters#

templateId#

Open with a specific template:

JavaScript

?templateId=123

lang#

Override the default embed language:

JavaScript

?lang=spanish

Available languages: english, portuguese, spanish, french

Combined Parameters#

Use multiple parameters together:

JavaScript

?templateId=123&lang=french

Responsive Design#

Make your embed work on all screen sizes:

CSS

.design-editor {
  width: 100%;
  height: 70vh;
  min-height: 500px;
  max-height: 800px;
}

@media (max-width: 768px) {
  .design-editor {
    height: 60vh;
    min-height: 400px;
  }
}

@media (max-width: 480px) {
  .design-editor {
    height: 50vh;
    min-height: 350px;
  }
}

Error Handling#

Domain Restrictions#

If users see a domain error, check your allowed domains list:

JavaScript

// Add your domains in embed settings
const allowedDomains = [
  "https://yourapp.com",
  "https://staging.yourapp.com",
  "http://localhost:3000", // for development
];

Loading States#

Show a loading indicator while the embed loads:

JavaScript

function DesignEditor() {
  const [isLoading, setIsLoading] = useState(true);

  return (
    <div className="relative">
      {isLoading && (
        <div className="absolute inset-0 flex items-center justify-center bg-gray-50 rounded-lg">
          <div className="text-gray-500">Loading design editor...</div>
        </div>
      )}
      <iframe
        src="https://orshot.com/embeds/abc123def"
        title="Orshot Embed"
        allow="clipboard-write"
        onLoad={() => setIsLoading(false)}
        className="w-full h-[600px] border-none rounded-lg"
      />
    </div>
  );
}

Security Best Practices#

Content Security Policy#

Add the embed domain to your CSP:

JavaScript

Content-Security-Policy: frame-src 'self' https://orshot.com;

Domain Validation#

Always configure allowed domains in your embed settings. Never leave this empty in production.

HTTPS Only#

Always use HTTPS URLs for production embeds.

Performance Tips#

Lazy Loading#

Load embeds only when needed:

JavaScript

import { useState, useRef, useEffect } from "react";

function LazyDesignEditor() {
  const [shouldLoad, setShouldLoad] = useState(false);
  const containerRef = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setShouldLoad(true);
        observer.disconnect();
      }
    });

    if (containerRef.current) {
      observer.observe(containerRef.current);
    }

    return () => observer.disconnect();
  }, []);

  return (
    <div ref={containerRef} className="h-[600px]">
      {shouldLoad ? (
        <iframe src="https://orshot.com/embeds/abc123def" title="Orshot Embed" allow="clipboard-write" style={{width: '100%', height: '100%', border: 'none'}} />
      ) : (
        <div className="flex items-center justify-center h-full bg-gray-50">
          <div>Click to load design editor</div>
        </div>
      )}
    </div>
  );
}

Preloading#

For better user experience, preload the embed:

HTML

<link rel="preload" href="https://orshot.com/embeds/abc123def" as="document" />

Common Issues#

Embed Not Loading#

Check if embed is enabled in settings
Verify the embed ID is correct
Ensure your domain is in the allowed list

Permission Errors#

Check workspace permissions
Verify user roles and access
Review embed configuration settings

Styling Issues#

Ensure proper container dimensions
Check for CSS conflicts
Verify responsive breakpoints

Testing#

Development#

Use localhost in your allowed domains:

JavaScript

http://localhost:3000
http://localhost:8080

Staging#

Test with your staging domain before production:

JavaScript

https://staging.yourapp.com

Production#

Always test the full user flow in your production environment before launch.

←

What is Orshot Embed?

How do I authenticate the embed with JWT?

→

Was this page helpful?

Ready to automate?

Start rendering images, PDFs and videos from your templates in under 2 minutes. Free plan, no credit card.

Get your API key

Image, PDF and video generation via API
Visual editor with AI and smart layouts
Zapier, Make, MCP and 50+ integrations
White-label embed for your own app
30 free credits — no credit card required