Embedding Apps

Embed NativeBridge virtual devices directly into your own websites and products using iframes. Perfect for product demos, documentation, support portals, and interactive showcases.

Finding Your Embed Link

Get your embed link in just a few clicks:

Navigate to Your Apps

Go to your Apps Dashboard or App Builds page

Click Share

Select the Share button under the app or build you want to embed

Copy Embed Link

Choose “Embed” from the share options to get your iframe-ready link

Test parameters on your App Page first, then switch the URL from /app/ to /embed/ for iframe usage.

Basic Embedding

Add your app to any website with a simple iframe:

<iframe
  src="https://nativebridge.io/embed/{appId}?theme=light"
  width="400px"
  height="642px"
  title="Your App Name - Powered By NativeBridge"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen>
</iframe>

Live Example

Here’s a real embedded app using NativeBridge:

<iframe
  src="https://nativebridge.io/embed/VpJE?theme=light"
  width="400px"
  height="642px"
  title="Your Mobile App - Powered By NativeBridge"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen>
</iframe>

Embedding Options

Advanced Embedding options are only available with Starter, Growth and Custom plans.

Responsive Design

Make your embedded app responsive to different screen sizes:

<div style="position: relative; padding-bottom: 160.5%; height: 0;">
  <iframe
    src="https://nativebridge.io/embed/{appId}?theme=light"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    title="Your App Name - Powered By NativeBridge"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerpolicy="strict-origin-when-cross-origin"
    allowfullscreen>
  </iframe>
</div>

Custom Device Frame

Add device frames for a more realistic appearance:

<iframe
  src="https://nativebridge.io/embed/{appId}?device=iphone14pro&deviceColor=black&theme=light"
  width="430px"
  height="932px"
  title="Your App Name - Powered By NativeBridge"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen>
</iframe>

Autoplay Demo

Start your app automatically when the page loads:

<iframe
  src="https://nativebridge.io/embed/{appId}?autoplay=true&launchUrl=home&theme=light"
  width="400px"
  height="642px"
  title="Your App Name - Powered By NativeBridge"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen>
</iframe>

Advanced Configurations

With Query Parameters

Customize the embedded experience with query parameters:

<iframe
  src="https://nativebridge.io/embed/{appId}?device=pixel7&osVersion=13&scale=75&centered=true&theme=light"
  width="500px"
  height="800px"
  title="Your App Name - Powered By NativeBridge"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen>
</iframe>

Popular Parameters for Embedding

Parameter	Description	Example
`theme`	Set light or dark theme	`theme=light`
`device`	Set specific device model	`device=iphone15`
`osVersion`	Choose OS version	`osVersion=17.0`
`scale`	Adjust device size (25-100)	`scale=75`
`centered`	Center device in frame	`centered=true`
`deviceColor`	Device frame color	`deviceColor=white`
`hideControls`	Hide device controls	`hideControls=true`
`language`	Set device language	`language=es`
`autoplay`	Start app automatically	`autoplay=true`

Use Cases

Product Demos

Embed interactive demos on your landing page to showcase features without downloads

Documentation

Add live app examples directly in your docs for hands-on learning

Support Portal

Let customers reproduce issues in an embedded app for better support

Marketing Sites

Create engaging product tours with embedded interactive experiences

Training Materials

Include live app instances in training content for practical learning

Blog Posts

Enhance articles with embedded app demos for better engagement

Embedding in Different Platforms

WordPress

Add to your WordPress site using the Custom HTML block:

<!-- Add this to a Custom HTML block -->
<div class="nativebridge-embed">
  <iframe
    src="https://nativebridge.io/embed/{appId}?theme=light"
    width="400px"
    height="642px"
    title="Your App Name - Powered By NativeBridge"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerpolicy="strict-origin-when-cross-origin"
    allowfullscreen>
  </iframe>
</div>

React

Embed in your React application:

function AppDemo() {
  return (
    <iframe
      src="https://nativebridge.io/embed/{appId}?theme=light"
      width="400"
      height="642"
      title="Your App Name - Powered By NativeBridge"
      frameBorder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      referrerPolicy="strict-origin-when-cross-origin"
      allowFullScreen
    />
  );
}

Security & Permissions

Content Security Policy

If your site uses CSP headers, add NativeBridge to your allowed frame sources:

Content-Security-Policy: frame-src https://nativebridge.io https://*.nativebridge.io;

Sandbox Attributes

For additional security, you can add sandbox attributes (note: this may limit some functionality):

<iframe
  src="https://nativebridge.io/embed/{appId}?theme=light"
  width="400px"
  height="642px"
  title="Your App Name - Powered By NativeBridge"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals"
  allowfullscreen>
</iframe>

Best Practices

Performance
User Experience
Accessibility

Lazy Load: Load iframes only when visible
Optimize Size: Use appropriate dimensions for your use case
Cache: Leverage browser caching for repeat visitors
CDN: Ensure your page uses a CDN for faster loading

Troubleshooting

Embed not loading

Check if your embed URL is correct
Verify app permissions allow public embedding
Ensure no browser extensions are blocking iframes
Check browser console for CSP errors

Display issues

Verify iframe dimensions match device size
Check if scale parameter is set appropriately
Ensure parent container has sufficient space
Test in different browsers

Performance problems

Implement lazy loading for multiple embeds
Reduce number of embeds per page
Use smaller device scale when possible
Enable browser caching

Interaction limitations

Some features may require full App Page access
Check if permissions are properly configured
Verify query parameters are correctly formatted
Test on actual App Page first

API Integration

Control embedded apps programmatically:

// Dynamically create and configure embedded app
function embedApp(containerId, appId, options = {}) {
  const container = document.getElementById(containerId);
  const iframe = document.createElement('iframe');

  // Build URL with parameters
  const params = new URLSearchParams(options);
  iframe.src = `https://nativebridge.io/embed/${appId}?${params}`;

  // Set iframe attributes
  iframe.width = options.width || '400';
  iframe.height = options.height || '642';
  iframe.title = options.title || 'App Demo - Powered By NativeBridge';
  iframe.frameBorder = '0';
  iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
  iframe.referrerPolicy = 'strict-origin-when-cross-origin';
  iframe.allowFullscreen = true;

  container.appendChild(iframe);
}

// Usage
embedApp('demo-container', 'VpJE', {
  theme: 'light',
  device: 'iphone14pro',
  scale: 75,
  centered: true,
  autoplay: true,
  title: 'Your Mobile App - Powered By NativeBridge'
});

Getting Started

Platform

Testing

API

Embedding Apps

Embedding Apps

Finding Your Embed Link

Basic Embedding

Live Example

Embedding Options

Responsive Design

Custom Device Frame

Autoplay Demo

Advanced Configurations

With Query Parameters

Popular Parameters for Embedding

Use Cases

Product Demos

Documentation

Support Portal

Marketing Sites

Training Materials

Blog Posts

Embedding in Different Platforms

WordPress

React

Security & Permissions

Content Security Policy

Sandbox Attributes

Best Practices

Troubleshooting

API Integration

Next Steps

App Permissions

API Reference

Getting Started

Platform

Testing

API

​Embedding Apps

​Finding Your Embed Link

​Basic Embedding

​Live Example

​Embedding Options

​Responsive Design

​Custom Device Frame

​Autoplay Demo

​Advanced Configurations

​With Query Parameters

​Popular Parameters for Embedding

​Use Cases

Product Demos

Documentation

Support Portal

Marketing Sites

Training Materials

Blog Posts

​Embedding in Different Platforms

​WordPress

​React

​Security & Permissions

​Content Security Policy

​Sandbox Attributes

​Best Practices

​Troubleshooting

​API Integration

​Next Steps

App Permissions

API Reference

Embedding Apps

Finding Your Embed Link

Basic Embedding

Live Example

Embedding Options

Responsive Design

Custom Device Frame

Autoplay Demo

Advanced Configurations

With Query Parameters

Popular Parameters for Embedding

Use Cases

Embedding in Different Platforms

WordPress

React

Security & Permissions

Content Security Policy

Sandbox Attributes

Best Practices

Troubleshooting

API Integration

Next Steps