Appearance
Unlayer integration
We create Newsletters using 3rd party service: Unlayer. Unlayer provides GUI drag-n-drop functionality to compose newsletters. It also creates final HTML suitable for email clients.
How it works
Unlayer provides a JavaScript that should be embedded into the page where we want to enable an editor. Technically, it creates iframe where it loads a specified template or empty page (if template not specified).
Right now we have 2 projects in Unlayer Dashboard, "IxDF" for production use and "local" for testing. We have to save the Project ID (ID of IxDF project) and Template ID in our Unlayer config file so that the template and the custom tools are accessible in newsletter.
For newsletters, we always use our custom template that contains header and footer. Like other similar tools/services, Unlayer uses a custom data structure to store templates (using JSON format) and can convert to HTML anytime. That means Unlayer doesn’t edit HTML directly. As result, if we need to store unfinished/draft newsletter, we need to store this JSON template somewhere (not HTML!). For every new Newsletter, we firstly clone basic Newsletter template stored on Unlayer dashboard and then store this clone in our DB, so our team can change it later and basic template remains the same.
Unlayer has been added to our project by our custom idf/nova-unlayer-field composer package. All the default initialization of Unalyer is done in the package.
How to make changes in Unlayer
There are 2 ways to make to changes in Unlayer. And which method to use depends upon the sort of change required to make. If we have to make changes to the built in tools like buttons and text boxes then these have to be done in the initialization of Unlayer at JS level. Possible changes here include things like default button background color. Docs for tools.
If we want to make changes to styling of the template (things like footer or body font) then these changes have to be made in the Unlayer dashboard. We can either make these changes on existing template or create a new template. But if a new template is created then keep in mind that the template ID has to be updated in the unlayer config file.