HTML Code Editor
CREATED: MAY 11, 2016 | LAST UPDATED: MAY 11, 2016 | BOOKMARK | COPY URL
This is an advanced editor which is useful for developers and designers to fine tune creative elements, debug, test and preview the output as they design. You can paste EDM content or type, as the content is typed, the preview window in the right will be populated.
For ease of use the HTML is colour coded. When you select an area of your email on the preview side, you'll be taken to that part of the code exactly on the code side. The same is true if you click on the code side – you will be taken to the part of the HTML which the code refers to. Any changes will be shown in real time, so if you edit the code all changes will be dynamically reflected in the preview side and vice versa.
HTML code editor definitions:
Fields (Highlight mode): Select the Fields button [ ] in the top menu to activate highlight mode. Only the HTML merge fields will be visible, this enables the user to easily check what merge fields are in the content.
How to build an email using HTML code editor:
- Go to Campaigns tab in the top menu
- Click button
- Complete the Details tab (this must be done before you can proceed)
- Click Content and Design tab
- Click the HTML code editor
- Edit content by entering HTML code in the left window of the split screen, while you can preview the visual in the right side of the screen.
- Once you're done with editing just select Save and Close from the top right.
The bar in the middle allows you to toggle the space if you'd rather have more of one side than the other showing.
How to insert dynamic content in HTML Code Editor:
- Highlight the content on the preview screen that you would like to be dynamic
- Put your cursor in the corresponding position in the HTML screen
- Select the icon with the right hand arrow from the top menu; select your dynamic criteria from the popup menu. Criteria can be based on any field within the database.
- To test your personalisation or dynamic content, you can use the merge field preview functionality.
How to view the Merge Field Preview:
- In the email code insert a field or dynamic content e.g. FirstName
- Click the down arrow button in green panel in top menu
- A search box and merge field will be displayed
- To test the results of your personalisation or dynamic content, enter the email address or the relevant identifier field of the test contact in the Search. If Contact is found, the merge field will be populated with the data of the test recipient in the preview panel. In this example the Firstname.
- Click Save and Close button top right when you have finished editing