Best Method for Embedding Code into AEM

A Content Management System (CMS) is used to build most websites. They range from small, personal websites to the web-presence of large-scale enterprises. The CMS that I work with most often at 3|SHARE is Adobe Experience Manager (AEM). As robust as AEM is, and as often as we can use out of the box solutions to build features, sometimes clients’ needs require building connectors or embedding code or content from elsewhere into AEM. When you or your client requires an embed, some approaches are better than others and below I’ll share the best practices we’ve developed so far.

Why embed content rather than create it in AEM?

This need arises when clients use tools outside AEM to create content that they want to repurpose to use on their website. This can include infographics, data sets and other interactive tools that may be complex to write in simple html. Whatever the reason, when this external content needs to be on the website, it will need to be embedded somehow when it isn’t built in AEM.

Can AEM handle embedded content or code out of the box?

There are two AEM components, the Embed Component and the Rich-Text Editor, that allow source-code editing or to add html code.

But, these are typically not robust enough to handle what the content manager needs. 

Also, these approaches may not consider all of the implications of inserting code into the website which can have negative ramifications like:

• Interfering with user experience of the website.
• Changing the look and feel of the website.
• Introducing security risks.

What is the best practice for embedding code into an AEM site?

We recommend that you create a custom embeddable to add to the AEM Embed Component, that is based on the code that the content creators want to embed. 

Analyze the third-party code, define parameters and rebuild it in AEM in a way that the parameters can be entered through an AEM dialog by the authors.

1. Proxy the Embed Component

Start by creating a proxy component as you would typically do for any Core Component.

For now, just the .content.xml file defining the main node should be enough, we will be adding our custom code later on as an “Embeddable” component.

Structure Example

<?xml version="1.0" encoding="UTF-8"?>
<br/>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"

    jcr:primaryType="cq:Component"

    jcr:title="Embed"

    sling:resourceSuperType="core/wcm/components/embed/v2/embed"

    componentGroup="My Project Components"/>

2. Create an Embeddable Component

It is recommended to manage the HTML code through an Embeddable component, this way the code and its output is always consistent, it is less prone to authoring errors and the code is trusted allowing all unsafe tags and attributes to be used.

Here is an guide on how to create an Embeddable component: Visit GitHub

Genia.ly Example

Here is a package you can install with an example of this approach for a Genial.ly embeddable component.
Download Package

3. Configure Policies

In order to  make the Embeddable types available for authors to use them, they need to be enabled from the Template editor using the component Policies.

TIP: If not strictly necessary, it would be recommended to disable the HTML option (check the “Disable HTML” tick-box).

See a full demo of this here using a graphic created in Genially on our YouTube channel.