Adobe Experience Manager - Embed an Outgrow content piece on an AEM content page

Adobe Experience Manager (AEM) is a comprehensive content management solution for building websites, mobile apps, and forms. And it makes it easy to manage your marketing content and assets. Build lifetime value - deliver digital experiences over the lifetime of your customer that build brand loyalty and drive demand. This document will help you learn more, about how you can embed your Outgrow content on your AEM content page.

Method 1: Embedding your Outgrow Content on your AEM content page using Live Outgrow URL

The first method that you can use to embed your Outgrow content in your AEM content page, is using the Live Outgrow Content URL or using a CNAME URL. Using this method you can embed your Outgrow content in a customized iframe without adding any additional embed code. Here are the steps that you need to follow in case you would like to opt for this method:

A. Login to your Outgrow dashboard, and open the respective content piece in Build mode.

B. Navigate to the Configure tab and from under General Settings, you can copy the Live Content URL. In case you have configured CNAME in your Outgrow account where you can choose the Live Content URL.

C. In the next step, you need to open your AEM content page in edit mode. Once the content page is opened in edit mode, you need to add a new Functional Component, by using the Component browser. You can add a new component on the page by using the component browser and dragging the required component to the required position on the page.

D. The Functional Component that we need to use in this case is the External Component. The External Application Integration Component (External) enables you to embed external applications into your AEM page using an iframe. You need to specify the below-mentioned properties to use this component:

1. Target application: Here you need to specify the URL of your Outgrow content piece. For example, in this case, we will specify the URL as https://democo.outgrow.us/AEM-Test-Calculator.
2. Pass parameters: You can check this box, in case you want to pass parameters to the application when required.
3. Width and Height: Using this property you can specify the iframe dimensions.

📘
IMPORTANT NOTE
For reference purposes, here you can see how using External Component, an external application is integrated into the paragraph system of an AEM page.

Method 2: Adding your Outgrow Content on your AEM content page using Outgrow Embed Code

The second method that you can use to embed your Outgrow content in your AEM content page, is using the Outgrow Embed Code. Using this method you can embed your Outgrow content using Custom Embed Code available in Outgrow. Here are the steps that you need to follow in case you would like to opt for this method:

A. Login to your Outgrow dashboard, and open the respective content piece in Build mode.

B. In the next step, navigate to the Configure tab and go to Embed On A Webpage sub-tab. Under this sub-tab, choose the Custom Embed option. You can click on Copy to copy the custom embed code.

C. Once you have copied the embed code from your Outgrow dashboard, you need to open your AEM page in edit mode. Now, to embed Outgrow content using a custom iframe code, you need to use Embed Component. The Embed Component is AEM's Core Component, which allows you to define selected external content to be embedded within an AEM content page. In addition, there is an option to define free-form HTML to be embedded as well.

D. Now, you can modify the component's properties using the Configure Dialog. The Configure Dialog allows the content author to define the external resource to be embedded on the page. First, choose which type of resource should be embedded:

D. 1. **URL:** The simplest embed is the URL. Simply paste the Live Content URL of your Outgrow content, in the URL field. In the ID field, you can specify the ID that can be used to control the unique identifier of the component in the HTML and in the Data Layer.

📘
IMPORTANT NOTE
The component will attempt to access the resource and if it can be rendered by one of the processors, it will display a confirmation message below the URL field. If not, the field will be marked in error.

D. 2. **HTML: You can add free-form HTML to your page using the Embed Component. This embed code can be copied from the Embed On A Webpage** section under the Configure tab in Outgrow.

📘
IMPORTANT NOTE
Any unsafe tags such as scripts will be filtered from the entered HTML and will not be rendered on the resulting page.

In case you have any questions or concerns, please feel free to reach out to us at [email protected], and we will be happy to address your concerns.