Help Center

Adding video, audio, surveys and links

Adding Video ūüé•

Videos are a great way to add rich and dynamic content to your prototypes. Marvel lets you embed videos directly from YouTube or Vimeo to bring your prototypes to life.

How to embed a video:

  1. Hover over any image in your project and click edit
  2. Once the Editor opens, click and drag anywhere on the image to draw a hotspot. The video will fit the size of your hotspot.
  3. In the image selector pop up, select Link to URL or embed
  4. Click the drop down and select Embed
  5. Paste your embed code from YouTube or Vimeo and hit save
  6. Close the pop up and click Play to see your video

Where to find the embed code on YouTube:

Go to any video on YouTube

  1. Click Share
  2. Click Embed
  3. Copy the embed code

You can click Show More to access additional options such as removing the player controls.

Where to find the embed code on Vimeo:

Go to any video on Vimeo

  1. Click Share
  2. Copy the embed code
You can click Show Options to access additional options such as looping the video and labels. 
 
Note - when copying from YouTube and Vimeo, the entire embed code should be copied, so it should look like this when it's pasted into Marvel:
 iframe.png


Adding Audio ūüé∂

Audio embeds are a great way to add rich and dynamic sound and music to your prototypes. Marvel lets you embed videos directly from Soundcloud or Spotify to bring your prototypes to life.

How to embed audio:

  1. Hover over any image in your project and click edit
  2. Once the editor opens, click and drag anywhere on the image to draw a hotspot.
  3. In the image selector pop up, select Link to URL or embed
  4. Click the drop down and select Embed
  5. Paste your embed code from Spotify or Soundcloud and hit save
  6. Close the pop up and click Play to hear your audio

Need some help with finding the embed code on Soundcloud or Spotify?

How to find the your embed code on Soundcloud

  1. Select any song
  2. Click the share icon
  3. Select Embed
  4. Copy the embed code

You can access additional features by clicking More options

How to find the your embed code on Spotify

  1. Select any song
  2. Right click on any song
  3. Click Copy Embed Code

Note - when copying from Soundcloud and Spotify, the entire embed code should be copied, so it should look like this when it's pasted into Marvel:

iframe_spotify.png

Adding Maps ūüóļ

How to embed a Google Map:

  1. Select any image in your project and click edit
  2. Once the editor opens, click and drag anywhere on the image to draw a hotspot. The map will fit the size of your hotspot.
  3. In the image selector pop up, select Link to URL or embed
  4. Click the drop down and select Embed
  5. Paste your embed code from Google Maps and hit save
  6. Close the pop up and click Play to see your map

How to find your embed code on Google Maps

  1. Type in a location and hit enter
  2. Once located, click Share on the left panel
  3. Click Embed map

Note - when copying from Google maps, the entire embed code should be copied, so it should look like this when it's pasted into Marvel: 

iframe_google_map.png

Note: embeds that require an internet source will not work when used within an offline download.


Linking to email addresses ūüíĆ

You can trigger a new email to open by linking your hotspot to an email address. It's a great way to get feedback or create a realistic contact interaction.

How to link a hotspot to an email address:

  1. Select any image in your project and click edit
  2. Once the editor opens, click and drag anywhere on the image to draw a hotspot
  3. In the Edit menu which pops up at the bottom, select Link to URL or Embed 
  4. Select Email from the drop down menu
  5. Enter the email address and click Save
  6. Hit the play button to see this in action 


Linking to external sites, surveys and content ūüėĽ

Marvel has a great feature which enables you to link a Hotspot to any external website. This can be used to link to your own website or portfolio for a user to find out more about your project or even as a way for your client to view their real website in progress. 

To create an external hotspot:

  1. Hover over any thumbnail in your project and click edit
  2. Drag your mouse to draw a Hotspot on your image
  3. Select the Link to URL or embed option in the pop-up and enter the URL, then hit save. That's it!

This opens up some interesting possibilities. Here's a few examples for inspiration:

  • Gather feedback at the end of your prototype by linking to a questionnaire on¬†Typeform or¬†Survey Monkey. Great for remote user testing or validating ideas.
  • Open a file such as a PDF, video or MP3 on your own server or somewhere on the web
  • Link to YouTube, App Store, SoundCloud, Amazon items¬†or any piece of online content
  • Open another Marvel prototype you've made!
 
Was this article helpful?
9 out of 12 found this helpful

Articles in this section

See more

    Still have a question?

    Submit a help request