We\u2019ve put together the most common uses of embeds with dozens of examples to inspire you. Let\u2019s go!<\/p>\n
- \n\t\t\t
- \n\t\t\t\t
![\"Orange](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/01\/Blog-header-NEW-Copy-3.png\")
\n\t\t\t<\/dt><\/dl>
\n\t\t<\/div>\n\nShowcasing your product\/feature<\/h2>\n
The most popular way to use prototype embeds is within product marketing initatives such as websites or feature pages. This works especially well with products that can\u2019t easily be previewed by an existing or potential user.<\/p>\n
Some examples include products that require lengthly integration by a developer, legal verification, physical hardware, or based in app stores. Embedding a prototype to click through can often be faster and more effective than written descriptions or videos.<\/p>\n
This gives the user an interactive experience of moving through screens, using features and getting a deeper understanding of how the product works.<\/p>\n
Great for:<\/strong><\/p>\n
- \n
- Marketing products or features on any website or blog post<\/li>\n
- Showcasing products without having to create videos<\/li>\n
- Showcasing products that require lengthly sales processes or sign off before using<\/li>\n
- Showcasing products that require physical hardware to function such as smart home devices<\/li>\n
- Showcasing products that require technical integration prior to using or trialling<\/li>\n
- Sales enablement or pre-sales strategies<\/li>\n<\/ul>\n
Examples:<\/strong><\/p>\n
- \n
- Orange uses a Marvel prototype on their marketing site<\/a> to demonstrate how users can use an app to activate their physical smart home device<\/li>\n
- Cochlear uses a prototype<\/a> on their website to demonstrate how their app works with their hearing aid product<\/li>\n
- UBS uses links to prototypes on their marketing site<\/a> to demonstrate their e-banking, mobile banking and several other products (not strictly an embed but a great example of this theme)<\/li>\n<\/ul>\n
- \n\t\t\t
- \n\t\t\t\t
![\"Beaconstak\"](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/01\/Blog-header-NEW-Copy-4.png\")
\n\t\t\t<\/dt><\/dl>
\n\t\t<\/div>\n\nSupport docs, education and knowledge bases<\/h2>\n
Including embedded prototypes within your support docs and knowledge bases is a great way to give users the experience of using a particular feature without having to sign up, sign in, purchase or download your product.<\/p>\n
If you've already designed and prototyped a feature in Marvel during the product design and development process, it means you have everything you need to quickly grab the embed code and add it to a page.<\/p>\n
Great for:<\/strong><\/p>\n
- \n
- Tutorials and step-by-step guides<\/li>\n
- Deep dives into specific features<\/li>\n<\/ul>\n
Examples:<\/strong><\/p>\n
- \n
- Duo uses embeds in their step-by-step demos on how to use different parts of their product<\/a><\/li>\n
- On-demand delivery app Alfonsino uses Marvel embeds in their support docs<\/a> to teach their drivers how to make a delivery<\/li>\n
- Proximity marketing provider Beaconstac uses Marvel embeds to educate potential customers on how their beacon hardware and app work together<\/a><\/li>\n
- Home and business security provider Alarm.com<\/a> uses a Marvel embed showing how their security system works with the Apple Watch<\/a><\/li>\n
- Payfit, a payroll platform, uses M<\/a>arvel embeds on their website<\/a> to demo how their product works<\/li>\n
- Yandex Taxi uses embeds on their website to teach new drivers how to buy shifts<\/a><\/li>\n<\/ul>\n
- \n\t\t\t
- \n\t\t\t\t
![\"Marvel](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/01\/Blog-header-NEW-Copy-2-2.png\")
\n\t\t\t<\/dt><\/dl>
\n\t\t<\/div>\n\nPre-launch pages and testing MVPs<\/h2>\n
This is one we love to see! If your product, feature or idea is still at the idea or design stage then testing it in public using a prototype embed can be a great way to validate it without spending time or money on development. It can even be used to attract investors.<\/p>\n
Once it's live, you can easily promote it via paid ads, social media or email marketing<\/a> to drive traffic and collect feedback. We recommend reading the inspiring story on how Buffer used an MVP to get their first paying customer<\/a> to get some ideas.<\/p>\n
Just drop your embed code into any HTML site, or use a popular website builder<\/a> like Wix<\/a>, Squarespace or Weebly.<\/p>\n
Great for:<\/strong><\/p>\n
- \n
- Generating demand pre-launch<\/li>\n
- Gathering feedback at the sketch or design stage<\/li>\n
- Collect users email addresses prior to launch (easily done via Mailchimp<\/a>, Typeform<\/a> or JotForm<\/a> embeds)<\/li>\n
- Attract collaborators, investors and advocates<\/li>\n
- Build your audience and community<\/li>\n<\/ul>\n
Examples<\/strong><\/p>\n
- \n
- Runpal is a great example of using embeds on landing pages to build your email list and audience of potential users. The website promotes the core features of the app and displays a Marvel embed<\/a> to give you a teaser of how the app works, alongside with the ability to sign up to a mailing list to be kept up to date with developments. There\u2019s also a section for interested investors.<\/li>\n
- My Bookings is an app that can find venues to book for events. Whilst the app does not exist, the landing page uses an embedded prototype<\/a>, enabling them to gather feedback.<\/li>\n
- Honest Weather is an app that gives you a more practical report on the weather. Whilst the app doesn\u2019t exist yet, the Marvel embed on the landing page<\/a> helps showcase how it works and also promotes the creator.<\/li>\n
- House Rack is an app that helps you find billiard tournments to join. The landing page features a Marvel embed<\/a> at the top with an email capture form.<\/li>\n<\/ul>\n
- \n\t\t\t
- \n\t\t\t\t
![\"Behance](\"https:\/\/marvelapp.com\/wp-content\/uploads\/2021\/01\/Blog-header-NEW-Copy-2.png\")
\n\t\t\t<\/dt><\/dl>
\n\t\t<\/div>\n\nCase studies and portfolios<\/h2>\n
One of the most popular ways to use prototype embeds is within case studies and portfolios. This is particular useful for designers, freelancers, agencies and development studios who want to demonstrate how their projects work as well as the rationale behind its creation.<\/p>\n
Embeds work on WordPress, Behance, Wix, Medium and pretty much every portfolio builder service.<\/p>\n
Great for:<\/strong><\/p>\n
- \n
- Show your work as micro-features or entire flows<\/li>\n
- Embed low-fidelity prototypes and sketches to show your process<\/li>\n<\/ul>\n
Examples:<\/strong><\/p>\n
- \n
- A mobile app case study on Behance featuring a Marvel prototype<\/a><\/li>\n
- Another mobile app case study on Behance but witha cat so we had to include it<\/a><\/li>\n
- A dating app case study on Behance<\/a><\/li>\n
- A portfolio website featuring a Marvel prototype<\/a> in the Work section<\/li>\n
- A case study for a redesign of Houzz<\/a><\/li>\n
- A case study featuring a low-fidelity prototype<\/a><\/li>\n<\/ul>\n
And there you have it! Hopefully this inspires you to start embedding your prototypes, well, pretty much anywhere! It\u2019s just a few clicks to get started, click \u2018Share\u2019 then \u2018Embed\u2019 on any prototype project in your account.<\/p>\n
Check out our help article<\/a> to get started.<\/p>\n
<\/h2>\n","protected":false},"excerpt":{"rendered":"
Did you know that once you\u2019ve created a prototype in Marvel, you can embed it on any HTML web page or blog including WordPress, Medium, Wix, Squarespace and even Behance? Since we launched prototype embeds, we\u2019ve seen them pop up everywhere, in almost every use-case from product marketing and sales to education. From Papa Johns to Duo and PWC, thousands… Read More ￫<\/a><\/p>\n","protected":false},"author":282,"featured_media":20975,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[429],"tags":[],"class_list":["post-20968","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-tips-and-tricks"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n
- Another mobile app case study on Behance but witha cat so we had to include it<\/a><\/li>\n
- A mobile app case study on Behance featuring a Marvel prototype<\/a><\/li>\n
- My Bookings is an app that can find venues to book for events. Whilst the app does not exist, the landing page uses an embedded prototype<\/a>, enabling them to gather feedback.<\/li>\n
- On-demand delivery app Alfonsino uses Marvel embeds in their support docs<\/a> to teach their drivers how to make a delivery<\/li>\n
- Duo uses embeds in their step-by-step demos on how to use different parts of their product<\/a><\/li>\n
- Cochlear uses a prototype<\/a> on their website to demonstrate how their app works with their hearing aid product<\/li>\n
- Orange uses a Marvel prototype on their marketing site<\/a> to demonstrate how users can use an app to activate their physical smart home device<\/li>\n