Embed an XF(Experience Fragment) into a non AEM page | Community
Skip to main content
A
Ashwin_KumarSr
September 5, 2023
Solved

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

  • September 5, 2023
  • 1 reply
  • 2034 views

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.

 

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by sherinregi-1

@ashwin_kumarsr 

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

 

 

 

 

 

1 reply

sherinregi-1
Community Advisor
sherinregi-1Community Advisor
Community Advisor
September 5, 2023

Hi @ashwin_kumarsr 

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-outside-aem-81cb5b6bdc65

 

Hope it helps!

 

 

    A
    Ashwin_KumarSrAuthor
    September 6, 2023

    Hi @sherinregi-1 ,

     

    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-1
      Community Advisor
      sherinregi-1Community AdvisorAccepted solution
      Community Advisor
      September 6, 2023

      @ashwin_kumarsr 

      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

       

       

       

       

       

        Terms & ConditionsAccessibility statement

        Loading footer...