# Integration Guide

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

- **URL**: https://orshot.com/docs/orshot-embed/integration

---

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>
```### 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```jsx
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```vue
<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:```
?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:```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:```jsx
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:```
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:```jsx
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:```
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.