In our project, third party service are sending confirmation email to customers. Email will contain both static content(Header, Logo, Footer) and dynamic content(customer details which will render from DB).
The requirement is, through AEM we have provide static content to third party service through REST call, then they will include dynamic content in between static content. For this I am authoring Header, Logo & Footer in AEM pages and giving that page URL to third party. The reason why I am going for HTML other than JSON is, I need control the look & fell, CSS & JS from AEM side.
But issue is CSS & Images are not loading in emails, reason is email will allow only inline or internal CSS and inline images. Is there any other option can I export my AEM content in HTML format to thirdy party.
Selectors will work but problem is, AEM compiler adding some extra div’s and styles tags are moving to under body tag from head while maintaining the order of HTML for the components in parsys. For example if I use the below page URL though some HTML parsers, some extra div’s are adding and styles are moving to body tag, please check the below screeshots of my email & view source of my email screenshot.
That would be it difficult as the third arty might not be able to read the CSS as the CORS might block it . I will check around if there is any better solution. Meanwhile lets see if some one has a better option
First option is email as you mentioned - copy the contents of style.css and embed it in the head tag under<style>..... </style>
you may create a new template or use a selector based approach or some logic to achieve this embedded styles in head for emails vs external css for web. I've implemented a similar use case in past and it worked fine.
Other option is "Page Exporter" which is different than normal "Package Exporter" You may go through the link. Using this option would not require you to "email" anymore but simply share the pages in exported zip file.
Yes, that's correct we need to give as inline, but how can I do for existing components which are using clientlibs? I want to use those existing component and create email template structure and that content should expose to third party in HTML format to send email.
SlingRequestProcessor is giving CSS & JS in external way as shown in below screenshot, do we have any API's that will read external CSS and convert to inline. For example, in components CSS will be in some external file under clientlibs folder, while rendering that component I need to read that external CSS and applied to corresponding div's in HTML.