Email Campaigns – Advanced HTML Code Editor

Overview

TractionNext is presenting the new advanced HTML Code Editor that is easy to use. It supports advanced features including, autocomplete, syntax validation, semantic code and real time preview.

How to use this new advanced HTML Code Editor?

The HTML code editor has been used to create templates in Campaigns, Forms, Templates, Landing pages and Competitions. These templates can be saved.

Login to the TractionNext website.

• Navigate to the Campaign module on the top menu.
• Click on the ‘Create Email’ button on the top left corner.

Setup

Fill the details tab/page and move to content and design tab/page. Refer below image…

Click on HTML Code Editor.

It opens a popup window like below…

Start typing your code in the left pane / window and you can see the instant / real time preview in the right pane / window.

Alternatively, if you have already designed HTML, just paste in the left pane / window and get the real time preview.

Click on ‘Save’ button to save the changes.

Click on ‘Close’ button to close the popup window.

HTML code editor also provides you several tools that can be used while designing HTML.

Let’s see them.

It is used to insert the contact field into your HTML. Click on it displays a popup, from where required ‘fields’ can be selected. Refer below image…

It is used to insert the form into your HTML. Click on it displays a popup, from where required ‘form’ can be selected. Refer below image…

Once you select the form, It displays a form link appears in preview.

It is used to insert the landing page into your HTML. Click on it displays a popup, from where required ‘landing page’ can be selected. Refer below image…

Once you select the landing page, It displays a landing page link appears in preview.

It is used to insert the Pass into your HTML. Click on it displays a popup, from where required ‘Pass’ can be selected. Refer below image…

Once you select the Pass, It displays a Pass link appears in preview.

It is used to insert the Dynamic Content into your HTML. Showing dynamically the entire sections of content within your email making it more relevant and appealing to subscribers.

Click on it displays a popup, from where required ‘Dynamic content’ criteria(s) can be created and added. Refer below image…

It is used to insert the RSS content into your HTML. Click on it displays a popup, Enter the required details and click on ‘Insert’ button to add then into the HTML. Refer below image.

It is used to insert the Abandoned cart into your HTML (if using ecommerce integration). Abandoned cart will help your business to get those customers who stopped the purchase on your site due to some reason in the past. You can remind them that they left some unpurchased items in their cart that increases your chances of selling.

Click on it displays a popup, Select the required details and click on ‘Insert’ button to add then into the HTML. Refer below image…

It is used to personalize the email content and also help to apply the dynamic content into your HTML.

Click on it displays a popup, Enter the required details and click on ‘Search’ button. If the entered value is related then it will be added. Refer below image and preview…

Here the email address applied dynamically.

It is used to insert the image into your HTML. Click on it displays file manager popup, double click on image file name the image added into the HTML. Refer below image…

It is used to display the inserted fields into your HTML. Click on it displays the inserted fields into the HTML. Refer below image…

Note: Any dynamic content that are added to the HTML will display more brighten than other fields.

It is used to display the entire HTML contents of your HTML.

It is used to display the entire HELP contents for your HTML Editor. Refer below image…

It is used to track the links used into your HTML. Click on it to view all the links. Refer the below image…

It has several columns such as…

URL: displays the links used in the HTML.

Track: It helps to tracks the links when checked. When you launch a campaign and if someone clicked on this link, you will get count that how many times it has been clicked and who are the user who clicked. These data are available in Sent report and Hotspot. By default, all the links are checked.

Tracking name: if you have more links used in HTML, you can assign a friendly name for your ease.

Highlight: It helps you to highlight one of your links among several. At a time, only one link can be highlighted.

Click on it to see the Desktop view of your HTML.

Click on it to view the mobile preview of your HTML. It means how it will display in the mobile devices when you launch the campaign. Refer the below image…

Click on it to view your HTML in a new popup window.

It is used to send test email to yourself before launching the campaign. Mostly used for testing purpose.

Click on it displays a popup window. Refer below image…

You can add multiple recipients to send the test email. 

Note: Above was the details for the campaign module. The same way this editor can be used in Forms, Templates, Landing pages and Competitions.