not able to change html for embed component

[AliSyed1]

I am not able to change html for embed component with has supertype of embed/v1/embed core component. I am able to change diaog , model , design dialog , but not able to change the html of the component.

Please provide a solution why my html changes are not taking place. I am trying to change context from html to js for the component by modifying the HTL.

[AliSyed1]

My main Intention is to integrate marketo into AEM using code snippet they provided.

[AmitVishwakarma · Accepted solution]

Hi @AliSyed1 ,

Try below solution:

1. Ensure Correct File and Folder Structure

Your custom component should be structured like this:

/apps/<your-project>/components/embed/
│
├── embed.html                => Your custom HTL here
├── _cq_dialog/.content.xml   => Optional, if you're customizing dialog
├── _cq_design_dialog/.content.xml => Optional, if you're customizing design dialog
└── .content.xml              => Must declare sling:resourceSuperType

2. Check .content.xml for Correct Supertype

Ensure your component is inheriting from the core Embed component:

<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="Custom Embed"
    sling:resourceSuperType="core/wcm/components/embed/v1/embed"
    componentGroup="your-project-group"/>

3. HTL File Must Be Named embed.html

This is a common issue make sure the file name matches the folder name:

/embed/embed.html

4. Clear Dispatcher Cache and Rebuild the Component

Changes might not reflect due to dispatcher caching or OSGi bundle cache.

  - Clear dispatcher cache (if you're using one)

  - Rebuild and redeploy your bundle (if Sling Models or backend changes)

  - Touch the component or page (i.e., use CRXDE to update the jcr:lastModified)

5. Component Must Use Your Custom Resource Type

Ensure your page or template is using your custom component's resource type, not the core one.

You can confirm in CRXDE by checking the resource type:

/apps/<your-project>/components/embed

If the page is still using:

core/wcm/components/embed/v1/embed

then your HTML won’t be picked up.

6. Add Custom Marketo Embed Code in Your HTL

Here’s an example of custom embed.html that replaces the default rendering:

<!-- /apps/your-project/components/embed/embed.html -->
<sly data-sly-use.model="com.adobe.cq.wcm.core.components.models.Embed" />

<!-- Replace this with your Marketo snippet -->
<div class="marketo-embed">
  <script src="//your-marketo-code.js"></script>
</div>

7. If Using Editable Templates: Check Policy

If your component is used via an editable template, make sure the template policy allows your custom component, not the core one.

Regards,
Amit

[AliSyed1]

@AmitVishwakarma  Very Thanks , It is due to file name. You are right it is common mistake. 

Thanks a lot,

Syed Ali

[giuseppebag]

hi, 

To modify the HTML/HTL of a proxied Embed Core Component, you must ensure your custom component’s structure and inheritance are correctly configured. 

Your custom component must fully proxy the core component with the correct resource type and hierarchy.

/apps/<your-project>/components/embed
└─ embed.html (your custom HTL)
└─ _cq_dialog/.content.xml (if customizing the dialog)
└─ _cq_design_dialog/.content.xml (if customizing design dialog)
└─ .content.xml (with sling:resourceSuperType="core/wcm/components/embed/v1/embed")

File: .content.xml:

<?xml version="1.0" encoding="UTF-8"?>
<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="Custom Embed"
          sling:resourceSuperType="core/wcm/components/embed/v1/embed"
          componentGroup="<your-group>"/>

Override the HTL correctly, ie ensure your HTL file is named embed.html, matching the component folder name.

[AliSyed1]

Yeah @giuseppebag  , I followed exactly same , still changes are not reflecting in component.