HTML Environment - Mobile Demos

Create a Clickable Mobile Phone Demo Using an Image

This article walks through how to turn a static image into an interactive, mobile‑styled screen inside a demo. You’ll add an image as a screen, apply custom HTML/CSS to make it look like a mobile phone, and then layer hotspots on top so the image is fully clickable.

---

Use case

This approach is useful when you want to:

• Simulate a mobile app or mobile web experience
• Showcase mobile flows that aren’t easily captured live
• Create lightweight, clickable demos using images

---

Step 1: Add your image as a screen

1. Upload or add your image to your demo as a screen.
2. Make sure the image represents the full mobile viewport (portrait orientation works best).

You’ll reference this image later in your HTML.

---

Step 2: Add the HTML

Use the following HTML to render your image as a mobile screen. Replace your-image.jpg with your image source.

<img
  class="iphone-frame"
  src="your-image.jpg"
  alt="Mobile screen"
  reprise_id="vnde-2b47cd202a044fd9973dd4566e533540"
/>

Tip: The reprise_id attribute ensures the image can be targeted correctly inside the demo editor.

---

Step 3: Add the CSS

This CSS creates a realistic mobile phone frame and centers it on a white background.

/* Make entire page white */
body {
  margin: 0;
  padding: 0;
  background: white;
  min-height: 100vh;
  width: 100%;
}

/* Full screen white container */
.iphone-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100vw;
  background: white;
  padding: 40px 20px;
  box-sizing: border-box;
}

/* iPhone frame styling (portrait) */
.iphone-frame {
  width: 375px;
  height: 812px;
  border: 12px solid #1A1A1A;
  border-radius: 47px;
  box-shadow:
    0 0 0 3px #333,
    0 20px 40px rgba(0,0,0,0.4),
    0 0 0 1px rgba(255,255,255,0.1) inset;
  background: black;
  object-fit: cover;
  object-position: center;
  display: block;
}

---

Step 4: (Optional) Add JavaScript for automatic framing

If you’re working with multiple images and want to automatically wrap them in a mobile frame, you can use the JavaScript below.

document.addEventListener('DOMContentLoaded', function() {
  const images = document.querySelectorAll('img');

  images.forEach((img, index) => {
    if (index % 2 === 0) {
      createVerticalIPhone(img);
    }
  });
});

function createVerticalIPhone(img) {
  const container = document.createElement('div');
  container.style.cssText = `
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #F5F5F5;
    padding: 40px 20px;
    box-sizing: border-box;
  `;

  img.parentNode.insertBefore(container, img);
  container.appendChild(img);

  img.style.cssText = `
    width: 375px !important;
    height: 812px !important;
    border: 12px solid #1A1A1A;
    border-radius: 47px;
    box-shadow:
      0 0 0 3px #333,
      0 20px 40px rgba(0,0,0,0.4),
      0 0 0 1px rgba(255,255,255,0.1) inset,
      inset 0 1px 0 rgba(255,255,255,0.2);
    object-fit: cover;
    object-position: center;
    background: black;
    display: block;
  `;
}

---

Step 5: Add hotspots

Once your image is styled as a mobile screen:

1. Use hotspots or clickable overlays in the editor.
2. Position them on top of the image where users would normally tap.
3. Link each hotspot to the next screen, action, or guide step.

This makes the static image behave like a real, interactive mobile experience.

---

Best practices

• Use high‑resolution images sized for mobile (375 × 812 is ideal).
• Keep tap targets large enough for realistic mobile interaction.
• Test your demo on smaller screens to ensure spacing feels natural.

---

You now have a clickable, mobile‑styled screen built from a single image—perfect for lightweight mobile demos and prototypes.