AEM Experience Fragments: Consuming Outside AEM
You can push an Experience Fragment (XF) to an endpoint by using, for example, the 3rd party’s API (e.g. Facebook / Pinterest). A 3rd party can also pull an XF from AEM. Every XF has a unique URL that can be embedded/used. Embedding an HTML XF can be achieved by using an <iframe> or with web components.
Currently, AEM supports HTML ootb (for Adobe Target HTML and JSON offers are supported) but you can implement any format (e.g. image, json, etc.). In addition, you can use the “plain” selector to get just HTML. You can configure the “Experience Fragments HTML rendering output processor” to render specific tags, attributes, and classes:
- Go to http://localhost:4502/system/console/configMgr
- Find “Experience Fragments HTML rendering output processor”
There’s another way to consume an XF on an external page. We can implement a servlet which grabs all the necessary libs (js, css, fonts, etc.) as well as as the XF content and puts them into your page.
Code example:
A simple servlet which scavenges XF content, the needed js, css and wraps them into a json object.
A custom js lib which consumes json provided by the servlet and renders it:
.content.xml:
index.js
After that we can easily put an XF in an external page:
Originally published at https://exadel.com on July 30, 2020.
