Integration Guide

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.

On this page