Integration Guide

Step-by-step guide to integrate Orshot Embed in your application

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:

<embed src="https://orshot.com/embeds/abc123def" />

2. Add to Your App#

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

<div class="design-editor">
  <embed
    src="https://orshot.com/embeds/abc123def"
    style="width: 100%; height: 600px; border: none; border-radius: 8px;"
  />
</div>

3. Style the Container#

Make sure your embed has proper dimensions:

.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#

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">
      <embed src={embedUrl} className="w-full h-full border-none" />
    </div>
  );
}

Vue.js#

<template>
  <div class="design-editor">
    <embed :src="embedUrl" class="w-full h-full border-none" />
  </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#

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

@Component({
  selector: "app-design-editor",
  template: `
    <div class="design-editor">
      <embed [src]="embedUrl" class="w-full h-full border-none" />
    </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:

?templateId=123

lang#

Override the default embed language:

?lang=spanish

Available languages: english, portuguese, spanish, french

Combined Parameters#

Use multiple parameters together:

?templateId=123&lang=french

Responsive Design#

Make your embed work on all screen sizes:

.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:

// 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:

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>
      )}
      <embed
        src="https://orshot.com/embeds/abc123def"
        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:

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:

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 ? (
        <embed src="https://orshot.com/embeds/abc123def" />
      ) : (
        <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:

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

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:

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

Staging#

Test with your staging domain before production:

https://staging.yourapp.com

Production#

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

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
60 free renders — no credit card required