Highlighted

Embedding an XD prototype in a live website

Community Beginner ,
Jul 24, 2019

Copy link to clipboard

Copied

I want to create a clickable XD (mobile) prototype that the general public can access as a "product demo" on our live website.  All of the documentation I've read concerns internal prototypes to stakeholders and reviewers and I'm familiar with doing that - but now, I want to be able to share my prototype with anyone at my website.

Can anyone share a link with me so I can see what the user-experience is for this at a live website?  For example, if I place a "See the demo" button on my website, will the XD prototype open inside a new browser window or lightbox modal on top of that website page when someone clicks that button, if I embed the prototype  code?  Can the user still see hotspot hints and can I disable commenting?  Is this buggy on some browsers?  (looks like that may be the case, given this post   https://helpx.adobe.com/xd/kb/issue-view-web-prototypes.html)

My goal is to show customers how the product will work (via a clickable demo) and then once they're done with the demo, I will ask them to go to a surveymonkey page to get their feedback on product features.

Any suggestions for better ways to do this would be most welcomed.  Thank you!

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

mask207  wrote

if I place a "See the demo" button on my website, will the XD prototype open inside a new browser window or lightbox modal when someone clicks that button?

No.  Embedding an XD prototype into a web page is similar to embedding an <iframe> with a YoutTube video inside.   A modal window (if there is one)  would come directly from your site's code, not the code inside XD.   You would need to add the necessary  scripts to your site and a JS function to the trigger  button.   Methods vary depending on which  scripts you use and what kind of site you have (Wix, WordPress, Squarespace, other...).

Views

4.9K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Embedding an XD prototype in a live website

Community Beginner ,
Jul 24, 2019

Copy link to clipboard

Copied

I want to create a clickable XD (mobile) prototype that the general public can access as a "product demo" on our live website.  All of the documentation I've read concerns internal prototypes to stakeholders and reviewers and I'm familiar with doing that - but now, I want to be able to share my prototype with anyone at my website.

Can anyone share a link with me so I can see what the user-experience is for this at a live website?  For example, if I place a "See the demo" button on my website, will the XD prototype open inside a new browser window or lightbox modal on top of that website page when someone clicks that button, if I embed the prototype  code?  Can the user still see hotspot hints and can I disable commenting?  Is this buggy on some browsers?  (looks like that may be the case, given this post   https://helpx.adobe.com/xd/kb/issue-view-web-prototypes.html)

My goal is to show customers how the product will work (via a clickable demo) and then once they're done with the demo, I will ask them to go to a surveymonkey page to get their feedback on product features.

Any suggestions for better ways to do this would be most welcomed.  Thank you!

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

mask207  wrote

if I place a "See the demo" button on my website, will the XD prototype open inside a new browser window or lightbox modal when someone clicks that button?

No.  Embedding an XD prototype into a web page is similar to embedding an <iframe> with a YoutTube video inside.   A modal window (if there is one)  would come directly from your site's code, not the code inside XD.   You would need to add the necessary  scripts to your site and a JS function to the trigger  button.   Methods vary depending on which  scripts you use and what kind of site you have (Wix, WordPress, Squarespace, other...).

Views

4.9K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 24, 2019 0
Adobe Community Professional ,
Jul 24, 2019

Copy link to clipboard

Copied

mask207  wrote

if I place a "See the demo" button on my website, will the XD prototype open inside a new browser window or lightbox modal when someone clicks that button?

No.  Embedding an XD prototype into a web page is similar to embedding an <iframe> with a YoutTube video inside.   A modal window (if there is one)  would come directly from your site's code, not the code inside XD.   You would need to add the necessary  scripts to your site and a JS function to the trigger  button.   Methods vary depending on which  scripts you use and what kind of site you have (Wix, WordPress, Squarespace, other...).

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 24, 2019 2
Community Beginner ,
Feb 16, 2020

Copy link to clipboard

Copied

There no longer seems to be  an embed option in Adobe XD when you go to  share?

I woudl also like to embed Adobe XD in an iframe in my live website to build prototypes right in the real live website.
I already do with with just images but it would be great to embed a working prototyple in the context of my real produtct. 
However when I attempt this (which I can do for most other websites) it tells me that Adobe.com have refused the connection. 

Is there a way around this. 
Does anyone have the old embed code for Adobe XD?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 16, 2020 0
Community Beginner ,
Feb 18, 2020

Copy link to clipboard

Copied

Just found out you can still embed them using the embed code - it is in the dropdown at the bottom of the share panel after you have created  public link. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 18, 2020 1