Embed an interactive mobile app demo on your website

A live demo is useful when a visitor needs to try a flow: browse a catalog, complete onboarding, or explore a feature described in your docs. Decide what the visitor should accomplish before choosing where to put the player. A short instruction next to the demo gives them somewhere to start.

Prepare the app for visitors

Use an iOS simulator .app, an Android .apk, or for a Roku channel the sideload .zip. Open it on a live device from Devices first and check the flow you want to demonstrate. If your organization still has the Atlas sample, you can use it to learn the embed workflow before preparing your own demo app.

For React Native or Expo, include JavaScript in the build so visitors do not depend on Metro running on your laptop. Confirm that the app opens with your development server stopped and can reach the backend it needs. Provide suitable demo data and a usable sign-in path if the app requires an account.

For build preparation, follow the Expo preview guide or the APK walkthrough.

Create an embed key

Open Sharing, click Share an app and choose Embed on a website. Select the app and name the embed after its purpose, such as “Product page demo.”

Add the domains where you will place the iframe. These entries match hostnames:

Entry	Allows
example.com	The apex domain only.
www.example.com	That specific subdomain.
*.example.com	Subdomains, but not the apex domain itself.

Add both the apex and the appropriate subdomains when you need both. On Team, allowed domains are required and the organization’s keys can cover one base domain; its subdomains count toward that same domain. Business also allows an empty list. The embedding documentation explains the matching rules and plan limits.

Choose a device model if your demo depends on a particular screen size. Set a maximum session duration and concurrent-session limit if the demo should have its own limits alongside your plan’s allowance. Click Create and copy the generated snippet.

Add the iframe to your page

Use the actual embed URL copied from Settings in place of the example below. This HTML gives a phone demo a bounded width and a flexible height:

<iframe
  id="mobile-app-demo"
  src="https://vibeview.io/embed/YOUR_EMBED_KEY"
  title="Try our mobile app"
  width="380"
  height="820"
  loading="lazy"
  style="display: block; width: 100%; max-width: 380px; height: 820px; max-height: 85vh; border: 0;"
></iframe>

Put it in the part of your site that accepts custom HTML or iframe embeds. If your content management system removes the iframe, use its supported embed component or custom-code area. Check the page at both phone and desktop widths so the player does not obscure the surrounding instructions.

Do not add a restrictive iframe sandbox or referrer policy without checking the complete demo flow. Domain allowlisting relies on the referring page’s domain; a page that suppresses that information may be refused even when its hostname is on your list.

Embedding a TV app or Roku channel

A key for an Apple TV, Android TV or Roku app gets a landscape snippet sized for a TV screen instead of a phone. Use the one Settings gives you, or start from this:

<iframe
  id="tv-app-demo"
  src="https://vibeview.io/embed/YOUR_EMBED_KEY"
  title="Try our TV app"
  loading="lazy"
  style="display: block; width: 100%; max-width: 960px; aspect-ratio: 16 / 9; border: 0;"
  allow="clipboard-write"
></iframe>

TV apps are driven by focus, not taps. On a computer, visitors use the arrow keys to move, Enter to select and Esc to go back, and on Roku, typing goes straight into a focused on-screen keyboard. The embed only hears keys while it has keyboard focus, so if a visitor clicks elsewhere on your page the device shows a Click to use your keyboard prompt; one click hands focus back. On a phone or tablet, which has no keyboard, a small remote appears under the TV instead. Tell visitors this in a line next to the player, for example “Click the TV, then use your arrow keys.”

A Roku channel plays on a physical Roku, and every visitor gets a fresh copy of it: the player shows Opening app… until the channel is installed and open, then the visitor has it to themselves. As with every embed, visitors stay inside your app, so Home and system navigation are blocked. If the Roku is busy, the visitor waits in the queue and starts automatically. To send a channel to one person instead of putting it on a page, a Roku share link is simpler and works on every plan.

Check the visitor experience

Load the page from an allowed domain in a separate browser window. Click Tap to Start, wait for the app to appear, and complete the advertised flow. Check that the controls are usable at the iframe size you chose.

When a matching device is busy, a visitor can wait in a queue. The session starts when capacity becomes available. Streaming time counts toward your organization’s allowance, and a duration limit can end the demo while someone is using it. Set expectations in the surrounding copy if the flow is long.

For example, “Explore a destination and find the trip-planning action” is a clearer invitation for an Atlas-style travel app than “Try everything.” Use an equally specific task for your product.

Observe whether visitors start the demo

The iframe emits page events. This optional listener logs when a session starts and checks both the sender’s origin and the particular iframe before accepting the event:

<script>
  const demoFrame = document.getElementById('mobile-app-demo');

  window.addEventListener('message', (event) => {
    if (event.origin !== 'https://vibeview.io') return;
    if (!demoFrame || event.source !== demoFrame.contentWindow) return;
    if (event.data?.source !== 'vibeview-embed') return;
    if (event.data.version !== 1) return;
    if (event.data.type !== 'session:started') return;

    console.log('Mobile demo session started');
  });
</script>

Place the script after the iframe. You can connect that handler to your site’s analytics to measure demo starts. A session-start event does not establish that the visitor completed a flow or became a customer; measure those outcomes separately. See embed page events for queue, end, and error events.

Maintain the demo

Recheck the embedded flow when you change the app or its backend. Edit the key to change its app, domains, device options, or session limits without replacing the iframe on every page. Revoke the key when the demo should stop working; revocation is permanent.

If you only need to send one reviewer a URL, an app share link is a simpler starting point. For a demo visitors should discover while reading your website, the embed keeps the app beside the explanation. Check current pricing for the plan and streaming allowance that fit your expected usage.

Frequently asked questions

Can I embed a Roku channel or a TV app? Yes. Apple TV, Android TV and Roku apps get a landscape, TV-sized snippet, and visitors drive them with the arrow keys or an on-screen remote. A Roku channel runs on a physical Roku, with a fresh copy for every visitor.

Do visitors need a VibeView account? No. There is no sign-in step: the visitor clicks Tap to Start and the app runs in the iframe. If a device is busy they wait in a short queue and start automatically.

Which plans include embedding? Team and Business. On Team the key must list allowed domains and the organization’s keys cover one base domain including its subdomains; Business allows unlimited domains or an empty list. Free and Solo accounts can prepare and test the build but not create an embed key.

Can I embed the same app on several sites? On Business, yes: add each domain to the key, or create one key per site to give each its own limits. On Team, all keys share a single base domain.

Does an embedded demo use my streaming minutes? Yes. Every visitor session counts toward your organization’s monthly allowance, and overage draws on usage credit at the per-minute rate on the pricing page. The key’s own duration and concurrency limits are the way to keep that predictable.

Is it an iframe or a JavaScript SDK? An iframe. You paste one snippet; there is nothing to install or build into your site. The iframe posts page events (session started, queued, ended, error) that you can listen for, as shown above.

Try it on your own build

Embedding needs a Team or Business plan, but everything before that step is free: upload the build, run the demo flow on a live device from Devices and send a share link to a colleague on the free tier, which takes no card and includes 30 streaming minutes a month. When the flow holds up, create the embed key and put it on the page.