Embed an XF(Experience Fragment) into a non AEM page

[SVAshwinkumar]

We have multiple experience fragments built on AEM. We want to embed this XF in the form of HTML into another web page that is hosted outside AEM.

I'm opposed to using Iframe( I tried it and it works fine) due to multiple reasons. Im looking for an alternative suggestion to consider.

[sherinregi]

Hi @SVAshwinkumar 

Another way to do it is, you can include a js file on your external system which we will use to fetch the html experience fragment

fetch("/content/experience-fragments/global/us/en/xx/default/xx/master.html"+ ".rewrite.html")

This will help you to get the entire html and use the XF rewriter available to make sure you get the absolute js and css files. Keep the placeholder div's on the webpage outside aem eg: <div id="xfplaceholder"></div> and add the content on here.

Also you can refer to the below blog on a little different approach but consuming XF without and iframe

https://medium.com/exadel-digital-marketing-technology-practice/aem-experience-fragments-consuming-o...

Hope it helps!

[SVAshwinkumar]

Hi @sherinregi ,

Thanks for your response. While I get the gist of the approach, I still need answers to following questions.

 Can we configure AEM to rewrite with absolute links somehow? or Is it up to us to rewrite links in the js file hosted on our external system?

Please elaborate further on the approach suggested. A working example if any would really help.

Ashwin

[sherinregi · Accepted solution]

@SVAshwinkumar 

You can let AEM do the rewriting and get the absolute paths. In the example URL i provided i have added the selector .rewrite which basically does the rewriting .

Please follow the below link , this is something we have referred . The rewriter config and the java file is something you can reuse based on your need and get the rewritten html 

https://gist.github.com/Surajkamdi/cc4860dc393bb264d7bff20b1aaa8c3e