Embed

Embed CoachProAI 360° on your website

Drop a single iframe into any page on coachproai.com (or any other site). Fully isolated — your mega menu, header, footer, and other tools won't conflict.

Customize

Show "Powered by" badgeThemeAccent color (hex)Height (px)

https://your-app.lovable.app/embedOpen

1. HTML / Webflow / Wix / Shopify

Paste this into any HTML block, custom code embed, or page builder.

<div style="max-width:1200px;margin:0 auto;">
  <iframe
    src="https://your-app.lovable.app/embed"
    width="100%"
    height="780"
    style="border:none;border-radius:16px;display:block;"
    allow="fullscreen; display-capture; clipboard-write"
    loading="lazy"
    title="CoachProAI 360° Studio">
  </iframe>
</div>

2. Responsive (recommended)

Adjusts height on mobile for a better fit. Best for coachproai.com.

<style>
  .cpa-360-wrap { position: relative; max-width: 1200px; margin: 0 auto; }
  .cpa-360-wrap iframe {
    width: 100%;
    height: 780px;
    border: 0;
    border-radius: 16px;
    display: block;
  }
  @media (max-width: 640px) {
    .cpa-360-wrap iframe { height: 620px; }
  }
</style>
<div class="cpa-360-wrap">
  <iframe
    src="https://your-app.lovable.app/embed"
    allow="fullscreen; display-capture; clipboard-write"
    loading="lazy"
    title="CoachProAI 360° Studio"></iframe>
</div>

3. WordPress (with HTML shortcode plugin)

If your theme strips raw iframes, install a plugin like 'Insert HTML Snippet' or use the Custom HTML block.

[html]
<div style="max-width:1200px;margin:0 auto;">
  <iframe
    src="https://your-app.lovable.app/embed"
    width="100%"
    height="780"
    style="border:none;border-radius:16px;display:block;"
    allow="fullscreen; display-capture; clipboard-write"
    loading="lazy"
    title="CoachProAI 360° Studio">
  </iframe>
</div>
[/html]

Will it conflict with my mega menu or other tools?

No. The embed runs inside an iframe, which is a fully isolated browser context. Your site's CSS, JavaScript, jQuery, mega menu, other 360° viewers, analytics scripts, and page-builder styles cannot reach into the iframe — and the iframe cannot reach out into your page. The watermark, recording, and MP4 download all happen securely inside the iframe.

Mega menu CSS/JS — safe
Other 360° / video tools on same page — safe
Tailwind / Bootstrap / theme styles — safe
Recording uses the iframe's own canvas — no parent permissions needed
MP4 saves directly to the user's Downloads folder

URL parameters

Parameter	Values	Description
logo	0 / 1	Show or hide bottom badge
theme	dark / light	UI color scheme
accent	hex color	Brand accent (e.g. ff6a00)