Exposing Experience Fragments in AEM for Consistent Multichannel Experience

Exposing Experience Fragments in AEM for Consistent Multichannel Experience

In today’s digital landscape, delivering a seamless and consistent user experience across multiple channels and websites is crucial for businesses aiming to engage their audience effectively. For example, Using experience fragments across different channels to maintain the same header and footer look and feel is a common practice in web development and content management systems Adobe Experience Manager (AEM) offers a powerful solution for managing and delivering content across various platforms, and one of its key features, Experience Fragments, can play an important role in achieving this goal.

What Are Experience Fragments?

Experience Fragments in Adobe Experience Manager are reusable content blocks or components that encapsulate a portion of a web page’s content and presentation. They are designed to be used across different channels, websites, or even different projects, helping maintain a consistent look and feel throughout the digital ecosystem.

Advantages of Using Experience Fragments

  1. Consistency: The most significant advantage of using Experience Fragments is that they ensure a consistent brand identity, design, and messaging across various digital touchpoints. When you update an Experience Fragment, it automatically reflects those changes across all instances where it’s used.
  2. Efficiency: Experience Fragments streamline content management by enabling content creators to edit a single source of content and distribute it to multiple channels, reducing the effort and time required to maintain consistency.
  3. Flexibility: Experience Fragments are highly customizable, allowing you to adapt content for specific channels or audiences while still preserving the core brand identity and design.

Exposing Experience Fragments in AEM (JSON)

Exposing Experience Fragments in Adobe Experience Manager (AEM) for a consistent multichannel experience involves using AEM’s APIs to fetch and display these fragments on different channels or websites. Below, steps are provided with a high-level overview, along with example code snippets for exposing Experience Fragments.

Step 1: Create an Experience Fragment in AEM. Let’s assume we have an Experience Fragment named “Header XF.” or “Footer XF.”

Step 2: Create a custom AEM Servlet to expose the Experience Fragment (XF) as JSON data. This allows other channels or websites to fetch the fragment data programmatically.

import org.json.JSONObject;

import javax.servlet.Servlet;

@SlingServlet(paths = "/api/xf/header-xf", methods = "GET")
public class MyFragmentServlet extends SlingSafeMethodsServlet {
    protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws IOException {
  try {
      // Fetch the XF content
     ResourceResolver resourceResolver = request.getResourceResolver();
     Resource fragmentResource = resourceResolver.getResource("/content/experience-fragments/header-xf");

   // Convert the Experience Fragment content to JSON
  JSONObject fragmentJson = convertToJSON(fragmentResource);

   // Set the response content type

  // Write the JSON data to the response
 } catch (Exception e) {
response.getWriter().write("Error fetching Experience Fragment: " + e.getMessage());

private JSONObject convertToJSON(Resource fragmentResource) {
    // Convert the Experience Fragment content to JSON
   // You can customize this part based on your specific content structure
  JSONObject fragmentJson = new JSONObject();
  // Populate fragmentJson with content data

return fragmentJson;

In the code above, we created a custom servlet that listens to requests at /api/xf/header-xf and returns the content of the “Header XF” Experience Fragment as JSON. Same can be done from Footer XF.

Step 3: Fetch the Experience Fragment on Other Channels

Now, on other channels or websites, you can use HTTP requests to fetch the exposed Experience Fragment data:

// Example using JavaScript to fetch the Experience Fragment data
   .then(response => response.json())
   .then(data => {
        // Use the fetched data to render the Experience Fragment on your channel or website
     .catch(error => {
         console.error('Error fetching Experience Fragment:', error);

In this JavaScript example, we use the fetch API to make a GET request to the AEM servlet we created earlier. Once the data is retrieved, you can use the renderXF function to display it on your channel or website as needed.

Exposing Experience Fragments in AEM (HTML)

Using JAVA

import org.slf4j.Logger;import org.slf4j.LoggerFactory;

import javax.servlet.Servlet;
resourceTypes = "your-project/experience-fragment/resource/type", // Replace with the correct resource type               selectors = "HTML",
   extensions = "HTML",
   methods = "GET"
public class ExportExperienceFragmentServlet extends SlingSafeMethodsServlet {
private static final Logger log = LoggerFactory.getLogger(ExportExperienceFragmentServlet.class);

protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws IOException {
      try {
         // Fetch the Experience Fragment resource based on the request
         // Replace "your/project/experience-fragment/resource/type" with the actual resource type of your Experience Fragment
         Resource experienceFragmentResource = request.getResource();
         // Generate HTML representation of the Experience Fragment
         String htmlContent = generateHtmlFromExperienceFragment(experienceFragmentResource);

         // Set response content type to HTML
         // Write the HTML content to the response
        } catch (Exception e) {
         log.error("Error exporting Experience Fragment as HTML: {}", e.getMessage(), e);
         response.getWriter().write("Error exporting Experience Fragment as HTML: " + e.getMessage());
private String generateHtmlFromExperienceFragment(Resource experienceFragmentResource) {
         // Implement logic to generate HTML representation of the Experience Fragment
        // You can use the Sightly/HTL templating language or any other method to render the fragment as HTML
       // Here's a simplified example:
        StringBuilder htmlBuilder = new StringBuilder();
        htmlBuilder.append("<div class=\"experience-fragment\">");
        // Add content from the Experience Fragment's components
        ValueMap properties = experienceFragmentResource.getValueMap();
        String title = properties.get("jcr:title", String.class);
        String description = properties.get("jcr:description", String.class);


        return htmlBuilder.toString();

Make sure to adapt this code to your specific Experience Fragment structure and HTML rendering requirements. Additionally, handle errors and security considerations according to your AEM project’s needs.

USING JavaScript

  <title>Fetching Experience Fragment HTML</title>
  <script src=""></script>
  <div id="experience-fragment-container">        
  <!-- Experience Fragment content will be inserted here -->    

 $(document).ready(function () {            
 // Define the URL of your custom servlet            
 const xfUrl = '/content/yourproject/header-xf.html'; // Replace with the actual servlet URL

     // Make an AJAX request to fetch the HTML            
     url: xfUrl,                
     method: 'GET',                
     dataType: 'html',                
     success: function (htmlContent) {                    
       // Insert the fetched HTML into the container                    
       error: function (xhr, status, error) {
       console.error('Error fetching Experience Fragment HTML:', error);    

This code demonstrates how to use jQuery AJAX to fetch the HTML representation of an XF from AEM and display it on a web page.

Provide Access to CSS and JavaScript:

  • Ensure that the CSS and JavaScript files are accessible by external websites. This might involve configuring your AEM server or CDN to serve these assets to external domains.

Set Up Cross-Origin Policies:

  • If your different websites are hosted on separate domains or subdomains, you may need to configure Cross-Origin Resource Sharing (CORS) policies to allow them to access resources from the central repository. This ensures that the header and footer fragments can be loaded in different websites without security restrictions.

By following this blog, you can expose an Experience Fragment in form of HTML or JSON from AEM along with its associated CSS and JavaScript for use on other websites to maintain control and consistency.

Written and curated by: Digvijay Singh Tomar, Lead Digital Architect – AEM. You can follow him on Linkedin.

To Top

Pin It on Pinterest

Share This