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 or an Android .apk. Run it in the sandbox 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 Settings → Embeds and click New embed key. Name it after its purpose, such as “Product page demo,” then select the app.

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 Starter, allowed domains are required and the organization’s keys can cover one base domain; its subdomains count toward that same domain. Pro 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.

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

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? Starter and Pro. On Starter the key must list allowed domains and the organization’s keys cover one base domain including its subdomains; Pro allows unlimited domains or an empty list. Free and Dev accounts can prepare and test the build but not create an embed key.

Can I embed the same app on several sites? On Pro, yes: add each domain to the key, or create one key per site to give each its own limits. On Starter, 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 Starter or Pro plan, but everything before that step is free: upload the build, run the demo flow in the sandbox 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.