<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" version="2.0">
  <channel>
    <title>topic Re: How to include Static HTML in an AEM component. in Adobe Experience Manager Questions</title>
    <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-include-static-html-in-an-aem-component/m-p/462815#M133598</link>
    <description>&lt;P&gt;Hi&amp;nbsp;&lt;LI-USER uid="17511878"&gt;&lt;/LI-USER&gt;&amp;nbsp;,&lt;/P&gt;
&lt;P&gt;I would use &lt;EM&gt;data-sly-include&lt;/EM&gt;&lt;/P&gt;
&lt;P&gt;&lt;CODE&gt;data-sly-include&lt;/CODE&gt;&lt;SPAN&gt;&amp;nbsp;&lt;/SPAN&gt;replaces the content of the host element with the markup generated by the indicated HTML template file (HTL, JSP, ESP etc.) when it is processed by its corresponding template engine. The rendering context of the included file will not include the current HTL context (that of the including file); Consequently, for inclusion of HTL files, the current&lt;SPAN&gt;&amp;nbsp;&lt;/SPAN&gt;&lt;CODE&gt;data-sly-use&lt;/CODE&gt;&lt;SPAN&gt;&amp;nbsp;&lt;/SPAN&gt;would have to be repeated in the included file (In such a case it is usually better to use&lt;SPAN&gt;&amp;nbsp;&lt;/SPAN&gt;&lt;CODE&gt;data-sly-template&lt;/CODE&gt;&lt;SPAN&gt;&amp;nbsp;&lt;/SPAN&gt;and&lt;SPAN&gt;&amp;nbsp;&lt;/SPAN&gt;&lt;CODE&gt;data-sly-call&lt;/CODE&gt;)&lt;/P&gt;
&lt;P&gt;A simple include:&lt;/P&gt;
&lt;DIV class="code-toolbar"&gt;
&lt;PRE class="language-xml" tabindex="0"&gt;&lt;CODE&gt;&amp;lt;section data-sly-include="path/to/template.html"&amp;gt;&amp;lt;/section&amp;gt;
&lt;/CODE&gt;&lt;/PRE&gt;
&lt;/DIV&gt;
&lt;P&gt;JSPs can be included the same way:&lt;/P&gt;
&lt;DIV class="code-toolbar"&gt;
&lt;PRE class="language-xml" tabindex="0"&gt;&lt;CODE&gt;&amp;lt;section data-sly-include="path/to/template.jsp"&amp;gt;&amp;lt;/section&amp;gt;
&lt;/CODE&gt;&lt;/PRE&gt;
&lt;/DIV&gt;
&lt;P&gt;Options let you manipulate the path of the file:&lt;/P&gt;
&lt;DIV class="code-toolbar"&gt;
&lt;PRE class="language-xml" tabindex="0"&gt;&lt;CODE&gt;&amp;lt;section data-sly-include="${ @ file='path/to/template.html'}"&amp;gt;&amp;lt;/section&amp;gt;
&amp;lt;section data-sly-include="${'template.html' @ prependPath='my/path'}"&amp;gt;&amp;lt;/section&amp;gt;
&amp;lt;section data-sly-include="${'my/path' @ appendPath='template.html'}"&amp;gt;&amp;lt;/section&amp;gt;
&lt;/CODE&gt;&lt;/PRE&gt;
&lt;/DIV&gt;
&lt;P&gt;You can also change the WCM mode:&lt;/P&gt;
&lt;DIV class="code-toolbar"&gt;
&lt;PRE class="language-xml" tabindex="0"&gt;&lt;CODE&gt;&amp;lt;section data-sly-include="${'template.html' @ wcmmode='disabled'}"&amp;gt;&amp;lt;/section&amp;gt;&lt;/CODE&gt;&lt;/PRE&gt;
&lt;P&gt;Hope that helps!&lt;/P&gt;
&lt;P&gt;Regards,&lt;/P&gt;
&lt;P&gt;Santosh&lt;/P&gt;
&lt;/DIV&gt;</description>
    <pubDate>Wed, 27 Jul 2022 00:13:47 GMT</pubDate>
    <dc:creator>SantoshSai</dc:creator>
    <dc:date>2022-07-27T00:13:47Z</dc:date>
    <item>
      <title>How to include Static HTML in an AEM component.</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-include-static-html-in-an-aem-component/m-p/462795#M133591</link>
      <description>&lt;P&gt;How do to include static HTML page in a component. The page can be within AEM site context or as an asset .html file&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;P&gt;Thanks&lt;/P&gt;
&lt;P&gt;Ani&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;</description>
      <pubDate>Tue, 26 Jul 2022 19:18:46 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-include-static-html-in-an-aem-component/m-p/462795#M133591</guid>
      <dc:creator>ajoshi84</dc:creator>
      <dc:date>2022-07-26T19:18:46Z</dc:date>
    </item>
    <item>
      <title>Re: How to include Static HTML in an AEM component.</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-include-static-html-in-an-aem-component/m-p/462797#M133592</link>
      <description>&lt;P&gt;hi&amp;nbsp;&lt;LI-USER uid="17511878"&gt;&lt;/LI-USER&gt;&amp;nbsp;&lt;/P&gt;
&lt;P&gt;you can create a raw html component / free form html component&amp;nbsp; to display the static html in it. Component's dialog will have a text area to place the html, along with hardcoded styles and js.&lt;/P&gt;</description>
      <pubDate>Tue, 26 Jul 2022 20:13:48 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-include-static-html-in-an-aem-component/m-p/462797#M133592</guid>
      <dc:creator>Ganthimathi</dc:creator>
      <dc:date>2022-07-26T20:13:48Z</dc:date>
    </item>
    <item>
      <title>Re: How to include Static HTML in an AEM component.</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-include-static-html-in-an-aem-component/m-p/462815#M133598</link>
      <description>&lt;P&gt;Hi&amp;nbsp;&lt;LI-USER uid="17511878"&gt;&lt;/LI-USER&gt;&amp;nbsp;,&lt;/P&gt;
&lt;P&gt;I would use &lt;EM&gt;data-sly-include&lt;/EM&gt;&lt;/P&gt;
&lt;P&gt;&lt;CODE&gt;data-sly-include&lt;/CODE&gt;&lt;SPAN&gt;&amp;nbsp;&lt;/SPAN&gt;replaces the content of the host element with the markup generated by the indicated HTML template file (HTL, JSP, ESP etc.) when it is processed by its corresponding template engine. The rendering context of the included file will not include the current HTL context (that of the including file); Consequently, for inclusion of HTL files, the current&lt;SPAN&gt;&amp;nbsp;&lt;/SPAN&gt;&lt;CODE&gt;data-sly-use&lt;/CODE&gt;&lt;SPAN&gt;&amp;nbsp;&lt;/SPAN&gt;would have to be repeated in the included file (In such a case it is usually better to use&lt;SPAN&gt;&amp;nbsp;&lt;/SPAN&gt;&lt;CODE&gt;data-sly-template&lt;/CODE&gt;&lt;SPAN&gt;&amp;nbsp;&lt;/SPAN&gt;and&lt;SPAN&gt;&amp;nbsp;&lt;/SPAN&gt;&lt;CODE&gt;data-sly-call&lt;/CODE&gt;)&lt;/P&gt;
&lt;P&gt;A simple include:&lt;/P&gt;
&lt;DIV class="code-toolbar"&gt;
&lt;PRE class="language-xml" tabindex="0"&gt;&lt;CODE&gt;&amp;lt;section data-sly-include="path/to/template.html"&amp;gt;&amp;lt;/section&amp;gt;
&lt;/CODE&gt;&lt;/PRE&gt;
&lt;/DIV&gt;
&lt;P&gt;JSPs can be included the same way:&lt;/P&gt;
&lt;DIV class="code-toolbar"&gt;
&lt;PRE class="language-xml" tabindex="0"&gt;&lt;CODE&gt;&amp;lt;section data-sly-include="path/to/template.jsp"&amp;gt;&amp;lt;/section&amp;gt;
&lt;/CODE&gt;&lt;/PRE&gt;
&lt;/DIV&gt;
&lt;P&gt;Options let you manipulate the path of the file:&lt;/P&gt;
&lt;DIV class="code-toolbar"&gt;
&lt;PRE class="language-xml" tabindex="0"&gt;&lt;CODE&gt;&amp;lt;section data-sly-include="${ @ file='path/to/template.html'}"&amp;gt;&amp;lt;/section&amp;gt;
&amp;lt;section data-sly-include="${'template.html' @ prependPath='my/path'}"&amp;gt;&amp;lt;/section&amp;gt;
&amp;lt;section data-sly-include="${'my/path' @ appendPath='template.html'}"&amp;gt;&amp;lt;/section&amp;gt;
&lt;/CODE&gt;&lt;/PRE&gt;
&lt;/DIV&gt;
&lt;P&gt;You can also change the WCM mode:&lt;/P&gt;
&lt;DIV class="code-toolbar"&gt;
&lt;PRE class="language-xml" tabindex="0"&gt;&lt;CODE&gt;&amp;lt;section data-sly-include="${'template.html' @ wcmmode='disabled'}"&amp;gt;&amp;lt;/section&amp;gt;&lt;/CODE&gt;&lt;/PRE&gt;
&lt;P&gt;Hope that helps!&lt;/P&gt;
&lt;P&gt;Regards,&lt;/P&gt;
&lt;P&gt;Santosh&lt;/P&gt;
&lt;/DIV&gt;</description>
      <pubDate>Wed, 27 Jul 2022 00:13:47 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-include-static-html-in-an-aem-component/m-p/462815#M133598</guid>
      <dc:creator>SantoshSai</dc:creator>
      <dc:date>2022-07-27T00:13:47Z</dc:date>
    </item>
    <item>
      <title>Re: How to include Static HTML in an AEM component.</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-include-static-html-in-an-aem-component/m-p/462820#M133600</link>
      <description>&lt;P&gt;- To include an &lt;STRONG&gt;HTML file&lt;/STRONG&gt; in a component, use &lt;A href="https://experienceleague.adobe.com/docs/experience-manager-htl/using/htl/block-statements.html?lang=en#include" target="_self"&gt;&lt;STRONG&gt;data-sly-include&lt;/STRONG&gt;&lt;/A&gt;:&lt;/P&gt;
&lt;P&gt;&lt;span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Screen Shot 2022-07-27 at 10.25.50 am.png" style="width: 999px;"&gt;&lt;img src="https://experienceleaguecommunities.adobe.com/t5/image/serverpage/image-id/43543i47F37016070F76F0/image-size/large/is-moderation-mode/true?v=v2&amp;amp;px=999" role="button" title="Screen Shot 2022-07-27 at 10.25.50 am.png" alt="Screen Shot 2022-07-27 at 10.25.50 am.png" /&gt;&lt;/span&gt;&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;P&gt;- To include a cq:page in a component, use &lt;A href="https://experienceleague.adobe.com/docs/experience-manager-htl/using/htl/block-statements.html?lang=en#resource" target="_self"&gt;&lt;STRONG&gt;data-sly-resource&lt;/STRONG&gt;&lt;/A&gt;:&lt;/P&gt;
&lt;P&gt;&lt;span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Screen Shot 2022-07-27 at 10.32.08 am.png" style="width: 999px;"&gt;&lt;img src="https://experienceleaguecommunities.adobe.com/t5/image/serverpage/image-id/43544i6CDB873699E74E03/image-size/large/is-moderation-mode/true?v=v2&amp;amp;px=999" role="button" title="Screen Shot 2022-07-27 at 10.32.08 am.png" alt="Screen Shot 2022-07-27 at 10.32.08 am.png" /&gt;&lt;/span&gt;&lt;/P&gt;</description>
      <pubDate>Wed, 27 Jul 2022 00:34:16 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-include-static-html-in-an-aem-component/m-p/462820#M133600</guid>
      <dc:creator>Nikhil_Verma</dc:creator>
      <dc:date>2022-07-27T00:34:16Z</dc:date>
    </item>
    <item>
      <title>Re: How to include Static HTML in an AEM component.</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-include-static-html-in-an-aem-component/m-p/462864#M133619</link>
      <description>&lt;P&gt;In this scenario, what if author want to upload a complete HTML structure with its related js/css in AEM?&amp;nbsp;&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;P&gt;Thanks&lt;/P&gt;
&lt;P&gt;Anika&lt;/P&gt;</description>
      <pubDate>Wed, 27 Jul 2022 06:33:11 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-include-static-html-in-an-aem-component/m-p/462864#M133619</guid>
      <dc:creator>anika_agarwal</dc:creator>
      <dc:date>2022-07-27T06:33:11Z</dc:date>
    </item>
    <item>
      <title>Re: How to include Static HTML in an AEM component.</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-include-static-html-in-an-aem-component/m-p/462976#M133651</link>
      <description>&lt;P&gt;Hi,&lt;/P&gt;
&lt;P&gt;You can use embed component for core component to include HTML in your page&amp;nbsp;&lt;/P&gt;
&lt;P&gt;&lt;A href="https://www.aemcomponents.dev/content/core-components-examples/library/core-content/embed.html" target="_blank"&gt;https://www.aemcomponents.dev/content/core-components-examples/library/core-content/embed.html&lt;/A&gt;&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;P&gt;You must not upload include css or js directly. CSS and JS should be part of clientlibs.&lt;/P&gt;</description>
      <pubDate>Wed, 27 Jul 2022 16:44:52 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-include-static-html-in-an-aem-component/m-p/462976#M133651</guid>
      <dc:creator>arunpatidar</dc:creator>
      <dc:date>2022-07-27T16:44:52Z</dc:date>
    </item>
    <item>
      <title>Re: How to include Static HTML in an AEM component.</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-include-static-html-in-an-aem-component/m-p/463053#M133674</link>
      <description>&lt;P&gt;If the author needs to upload JS &amp;amp; CSS, I highly suggest to reconsider the requirement as the author shouldn't be dealing with code, doesn't sound like a good practice.&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;
&lt;P&gt;However, technically you can do this using the&amp;nbsp;&lt;SPAN&gt;&lt;A href="https://www.aemcomponents.dev/content/core-components-examples/library/core-content/embed.html" target="_self"&gt;embed core component&lt;/A&gt;, as &lt;LI-USER uid="6786635"&gt;&lt;/LI-USER&gt;&amp;nbsp;mentioned, which allows the author to put in HTML and even JS/CSS by adding them in HTML markup itself:&lt;/SPAN&gt;&lt;/P&gt;
&lt;P&gt;&lt;SPAN&gt;&lt;span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Screen Shot 2022-07-28 at 1.42.40 pm.png" style="width: 537px;"&gt;&lt;img src="https://experienceleaguecommunities.adobe.com/t5/image/serverpage/image-id/43602i81915C5D3FA451D8/image-dimensions/537x472/is-moderation-mode/true?v=v2" width="537" height="472" role="button" title="Screen Shot 2022-07-28 at 1.42.40 pm.png" alt="Screen Shot 2022-07-28 at 1.42.40 pm.png" /&gt;&lt;/span&gt;&lt;/SPAN&gt;&lt;/P&gt;
&lt;P&gt;&lt;A href="https://experienceleague.adobe.com/docs/experience-manager-core-components/using/components/embed.html#html" target="_blank"&gt;https://experienceleague.adobe.com/docs/experience-manager-core-components/using/components/embed.html#html&lt;/A&gt;&lt;/P&gt;
&lt;P&gt;&amp;nbsp;&lt;/P&gt;</description>
      <pubDate>Thu, 28 Jul 2022 03:43:18 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-include-static-html-in-an-aem-component/m-p/463053#M133674</guid>
      <dc:creator>Nikhil_Verma</dc:creator>
      <dc:date>2022-07-28T03:43:18Z</dc:date>
    </item>
  </channel>
</rss>

