Configuration

Configure your embed to match your app's needs and branding. All settings are managed from your workspace embed page.

Getting Started#

1. Navigate to your workspace settings
2. Go to the Embed section
3. Toggle Enable Embed to activate
4. Configure your settings and click Save

Basic Settings#

Enable Embed#

Turn on embed functionality to get your unique embed code. When disabled, existing embeds will stop working.

Show Studio Templates#

Allow users to access templates from your workspace. Disable if you want users to start from scratch only.

Allow Template Operations#

Control what users can do with templates:

• Delete Templates: Let users remove templates they created
• Rename Templates: Allow changing template names
• Multipage Designs: Enable carousel/slideshow templates
• Import Template via JSON: Allow users to import templates using JSON data

Allow Downloads#

Let users download their designs directly from the embed. When enabled, users can export templates as PNG, JPEG, WEBP, PDF, or HTML. Disable if you want to handle exports through your own application using Events.

Enable Events#

Send real-time events to your parent page via postMessage when users interact with the embed. Events are fired for:

• Template creates and updates
• Downloads in any format
• Content requests from your app

See Events for detailed usage and code examples.

Language Settings#

Default Language#

Set the interface language for your embed. Choose from available languages including English, Spanish, French, and more.

Allow Language Change#

Let users switch languages themselves, or lock it to your default choice.

Branding & Customization#

Embed Title#

Replace the default workspace name with your brand name in the embed interface.

Custom Icon#

Upload your logo (square format, minimum 128x128px) to replace the default Orshot icon.

Accent Color#

Choose a color that matches your brand. This affects buttons, highlights, and interactive elements throughout the embed.

Security & Domains#

Allowed Domains#

Protect your embed by specifying which domains can use it:

https://yourapp.com
https://staging.yourapp.com
http://localhost:3000

Only these domains will be able to load your embed. Leave empty to allow any domain (not recommended for production).

Webhooks#

Webhook URL#

Get notified when users create or update templates:

https://yourapp.com/api/studio-webhook

Your endpoint will receive POST requests with template data whenever users:

• Create new templates (template.create)
• Update existing templates (template.update)

Example Webhook Handler#

export async function POST(request) {
  try {
    const body = await request.json();
    const { event_type, template_id, user_data } = body;

    console.log("Event:", event_type);
    console.log("Template ID:", template_id);

    // Process the webhook data
    // Save to your database, send notifications, etc.

    return Response.json({ success: true });
  } catch (error) {
    return Response.json({ error: error.message }, { status: 500 });
  }
}

Embed Codes#

Once configured, you'll get embed codes for different use cases:

Default Embed#

Opens with an empty workspace:

<embed
  src="https://orshot.com/embeds/your-id"
  style="width: 100%; height: 100%; min-height: 500px; border-radius: 8px;"
/>

Template-Specific Embed#

Opens with a specific template loaded:

<embed
  src="https://orshot.com/embeds/your-id?templateId=123"
  style="width: 100%; height: 100%; min-height: 500px; border-radius: 8px;"
/>

With Language Parameter#

Set a specific language (overrides default):

<embed
  src="https://orshot.com/embeds/your-id?templateId=123&lang=spanish"
  style="width: 100%; height: 100%; min-height: 500px; border-radius: 8px;"
/>

Testing Your Configuration#

Use the live preview to test your settings before going live. The preview shows exactly how users will see your embed with current settings applied.

Permissions Summary#

Best Practices#

• Test First: Always test your embed in a staging environment
• Secure Domains: Always specify allowed domains for production
• Brand Consistently: Use your brand colors and logo for seamless integration
• Monitor Webhooks: Set up proper error handling for webhook endpoints
• Update Regularly: Keep your embed settings updated as your app evolves