How to embed another website to Adobe Portfolio

[Dikkane]

Hello Adobe Community, 

I need some help with embed codes on Adobe Portfolio. Currently, I am trying to embed another website's page into my Portfolio site, using the embed feature. However, I keep receiving an error message that states "This embed code is not valid". 

Here is the code I am using: 

<iframe src="https://ninfa.io/exhibition/@TheCryptGallery/Futureshape-360-Exhibition---The-Crypt-Gallery-X-Ninfa-..." frameborder="0" scrolling="yes" width="800" height="1500"></iframe>

Could you please let me know what I am doing wrong? Also, if this code is not supported, is there anything else I could do to work around this problem? (other than taking a screenshot of the site and linking to that webpage). 

Thank you in advance for any support. 

[Nancy OShea · Accepted solution]

[Moderator moved from Coding Corner to Creative Cloud Services.]

Not possible to embed URLs, sorry.  Adobe Portfolio permits embedded <iframe> code from a limited number of sites -- namely YouTube, Vimeo, Adobe XD, SoundCloud, Adobe Express Spark and a few others.  See below for more details.

https://help.myportfolio.com/hc/articles/360036483773-Embed-module

More Portfolio links:

=============
- FAQ & Knowledgebase - https://help.myportfolio.com/hc/
- Contact Portfolio Support - https://help.myportfolio.com/hc/requests/new?ticket_form_id=177168

[Mark Waldo]

I just tried to embed code from Adobe Express into an Adobe Portfolio page using it's own embed feature to generate the code and over and over again and Adobe Portfolio rejected it. 

I could not include the code Adobe Express gave me to embed in this post so have included screen shots instead.

Thanks for any help with this.

[Nancy OShea]

Again and as stated on August 11, 2022, Adobe Portfolio ONLY supports embed codes containing an <iframe>.  See below for more details on which embed codes are accepted by Portfolio.

https://help.myportfolio.com/hc/articles/360036483773-Embed-module

Hope that helps.

=========
More Portfolio links:
- FAQ & Knowledgebase - https://help.myportfolio.com/hc/
- Contact Portfolio Support - https://help.myportfolio.com/hc/requests/new?ticket_form_id=177168

[Mark Waldo]

Thanks. What seems impossible to me is that Adobe Express (originally Spark) is generating embed codethat doesn't work, when as Spark, it apparently did. So I was hoping for some insight that I could use to get out of the problem. Essentiall, is some way to get Express to export the properly formed code for Portfolio ... like it used to when branded as Spark.

[Nancy OShea]

Ask this question in the Adobe Express (formerly called Spark Page) community.  Tell them Portfolio only supports <iframe> embed codes and that's what you need.

https://community.adobe.com/t5/adobe-express/ct-p/ct-adobe-express

[Mark Waldo]

Awesome. Appreciate it.

[Mark Waldo]

Posted at https://community.adobe.com/t5/adobe-express-discussions/adobe-portfolio-only-supports-lt-iframe-gt-...

[Snoep]

Hi Nancy, Adobe Portfolio stopped supporting external links (by button and bu embedding). Do you know why that is? It was working perfectly before.

[Nancy OShea]

@Snoep,

I'm not aware of any changes.  Did you enter https:// prefix with your URL?

External links are working fine on my Portfolio sites.

https://nancyoshea.myportfolio.com/

[Snoep]

Thank you very much for your reply. I embed google presentations in Adobe Portfolio to get a 'diashow effect'. Until a few weeks ago that was a perfect match. Now all the external links on the embedded google presentation stopped working. The internal links, in the googlepresentaion itself do work correctly as usual. I contacted google, and they explained it was an Adobe issue. Here is an example of one of the sites.. The underlined text stopped working, (all the links are still correct within the google presentation).On this one is an example how it used to work:  https://agnietsnoep.com/about. As you can see by clicking on the red arrow there, the internal link of the google presentation is still working: https://agnietsnoep.com/

[Nancy OShea]

Embeded <iframes> have a number of drawbacks.

This is a technical issue.  Reach out to Adobe Portfolio Support at the link below.

- FAQ & Knowledgebase - https://help.myportfolio.com/hc/
- Contact Portfolio Support - https://help.myportfolio.com/hc/requests/new?ticket_form_id=177168

[RosieDee3000]

I believe I found a solution! ...or at least the closest option available.

By creating an embed link via Codepen, you can integrate fully working web prototypes.

Link available here: https://blog.codepen.io/documentation/embedded-pens/

Just to note, it's imperfect:

The embed will include a frame from CodePen. (showing the HTML/RESULTS tabs on top & the screen scale on the bottom)

You'll also need to adjust the width & height within the embed code for it to fit properly.

If you're okay with that, then you'll be good to go. Hope this helps!

[Nancy OShea]

I've never tested CodePen embeds in Portfolio.  So I can't say for if they work or don't work.  If you're going to attempt it, make sure to use the Portfolio Embed Module with an <iframe>; not a script.

Keep in mind that <iframes> pose other unwanted problems, especially with interactive content. Best use case is for "Showing" static pages that don't "Do" anything.  Keep it simple. 🙂

[RosieDee3000]

Yes! I tested it & although it takes some tinkering, it works.

Perhaps embedding working sites could be integrated into the Adobe Portfolio interface someday?

Seems "Simple" enough to achieve... 😉

[Nancy OShea]

How websites work has nothing to do with Portfolio and everything to do with modern web standards, security and browser compliance. My advice is to read Mozilla Developer's Network for more insights.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

[Alexandre-02]

Do you need a codepen pro membership for this to be possible?

[RosieDee3000]

Nope! Just a regular Codepen account is needed.

And follow the instructions for generating an embed link: 

https://blog.codepen.io/documentation/embedded-pens/

hope this helps 🙂