Skip to main content

How can I put a screenshot or a live website into the Device Mockup widget?

Use Link, Upload, or Website in Content so the screen inside the frame shows the right kind of media for your use case.

Written by Karan Bhakuni


How can I put a screenshot or a live website into the Device Mockup widget?

Open the Device Mockup widget and go to the Content tab. Under Content Source, pick one of three options. Each one is best for a different situation.

1) Link (image URL)

  1. Select Link.

  2. Paste a public Image URL (a direct link to a .png, .jpg, or similar file).

Best for: Marketing shots, Figma or design exports already hosted on a URL, or any static screenshot you do not need to upload again.

2) Upload

  1. Select Upload.

  2. Click the upload area and choose an image from your computer.

Best for: Your own captures when you want the file stored for the widget (after a successful upload, the widget uses that image for the screen).

Note: Upload requires the app’s upload feature to be available. If upload is not available, you will see an error when you try.

3) Website

  1. Select Website.

  2. Enter a full Website URL (include https://).

Best for: Showing a real page inside the device when embedding is allowed (see the note in the editor: many sites block being shown inside iframes).

Device frame (phone, tablet, laptop, browser)

In the same Content tab, under Device → Type, choose Phone, Tablet, Laptop, or Browser. That changes the frame shape around your content, not the URL or image by itself.

Quick rule of thumb

  • Need a guaranteed visual? Use Link or Upload with a screenshot.

  • Need a live page and your site allows it? Use Website.

Did this answer your question?