How to export AEM page content to third party in HTML format

[sompalli]

Hi All,

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.

Thanks,

Harish.

[VeenaVikraman]

Are you using SlingRequestProcessor ? Take a look here Get the rendered HTML for an AEM resource, component or page - Adobe Experience Manager | AEM/CQ | A...

[Gaurav-Behl]

Using external css in HTML emails is not considered safe and majority of email clients would block that. Best option is to use inline styles, which works w/o any issues.

Check if The Page Exporter works for your use case - it would export HTML including associated libraries.

[sompalli]

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.

[sompalli]

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.

Package Exporters won't help for my requirement.

Thank you..!

[Gaurav-Behl]

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.

[VeenaVikraman]

That would be difficult as the third party 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

[VeenaVikraman]

No actually CSS should be readable from your publish right. Check with your email client if they have any option to do it

[sompalli]

Thanks for quick replies

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.

http://localhost:4502/content/sample/email-logo.email.html

Most of the email clients will remove any HTML tag which are in body tag

But If I use that specific component URL, for example, with the below URL I can able to see CSS applying to my email.

http://localhost:4502/content/sample/email-logo/jcr:content/root/testa.email.html

All the styles are under head tag here, that’s why CSS applying to email.

I want to create structure with different existing component in same page and while parsing i want to use single URL instead of multiple.

Please share your suggestions/comments.

[kailas_nadhu282 · Accepted solution]

https://github.com/Netcentric/aemmjml Take a look at this. This is what we used for our Emails.