Expand my Community achievements bar.

Applications for the 2024-2025 Adobe Experience Manager Champion Program are open!
SOLVED

Injecting custom markup and script snippets with Sightly

Avatar

Level 4

Is there a way to include custom HTML and javascript using Sightly? I'd like to be able to target certain elements and/or locations in a page, (e.g. immediately after </head> or immediately before </body> or <footer> etc.). How could I do this using Sightly?

1 Accepted Solution

Avatar

Correct answer by
Level 8

Understood.  Just keep in mind that permissions at the component/dialog level are not supported in AEM, so restricting access to edit these components would likely require you to have these certain select people editing content elsewhere and then utilizing a reference component to achieve this in your main structure (that's if i'm understanding your statement correctly).

View solution in original post

4 Replies

Avatar

Level 8

If you're talking about HTML and JavaScript entered into a dialog, sure, although it's not really best practice to give an author that much control.

<script type="text/javascript" data-sly-test="{properties.javascript}"> ${properties.javascript @ context="unsafe"} </script> <div data-sly-test="${properties.html}"> ${properties.html @ context='html'} </div>

Avatar

Level 4

leeasling wrote...

If you're talking about HTML and JavaScript entered into a dialog, sure, although it's not really best practice to give an author that much control.

 

There are a VERY small subset of authors/web developers, that we might grant the privileges/ability to do such things, (so that they can accommodate certain dynamic requirements without having to involve core development team), but in most cases, the injection would be done by other components, (i.e. where an injection component would "update" the current page by injecting markup/javascript into the current page).

Avatar

Level 2

What is injection component. I also wanted to check if there is a way to inject HTML in AEM website page. The HTML being fetched from WebAPI, so need a way to call that API and render the response in HTML format from XML conversion within AEM page.

 

Basically, dynamically created a page within AEM

 

Also, does AEM allows custom control to be created, and how it is possible?

Avatar

Correct answer by
Level 8

Understood.  Just keep in mind that permissions at the component/dialog level are not supported in AEM, so restricting access to edit these components would likely require you to have these certain select people editing content elsewhere and then utilizing a reference component to achieve this in your main structure (that's if i'm understanding your statement correctly).