This page provides you with information on how to add a block that can handle custom HTML code in your block-based email template. This solution enables you to dynamically insert custom HTML code into your email campaigns without the need to change the block in the template.
Creating the block
First, we recommend checking the maximum width of the content that can be inserted in the custom HTML block.
In the following example, the maximum width of the custom HTML content inserted should not exceed 600px to avoid distortion or dislocation of the other content.
The code to be used:
<tr>
<td align="center" e-editable="contentA_1"><span e-token="cust_esl" token-template="%22%3C%25=%20script%20%25%3E%22" token-content="%7B%22script%22:%22%3Cdiv%3E%3C/div%3E%22%7D" token-meta="%7B%7D" style="background-color: #6597cf; border-radius: .3em; box-shadow: 0 0 0 0.2em #6597cf; color: #fff;" class="cbNonEditable" data-mce-style="background-color: #6597cf; border-radius: .3em; box-shadow: 0 0 0 0.2em #6597cf; color: #fff;" contenteditable="false">Custom HTML</span>
</td>
</tr>Example for Option 1
In this example, the #body# placeholder is placed between an opened and closed <table> tag.
The code to be used:
<div e-editable="contentA_1">
<span e-token="cust_esl" token-template="%22%3C%25=%20script%20%25%3E%22" token-content="%7B%22script%22:%22%3Cdiv%3E%3C/div%3E%22%7D" token-meta="%7B%7D" style="background-color: #6597cf; border-radius: .3em; box-shadow: 0 0 0 0.2em #6597cf; color: #fff;" class="cbNonEditable" data-mce-style="background-color: #6597cf; border-radius: .3em; box-shadow: 0 0 0 0.2em #6597cf; color: #fff;" contenteditable="false">Custom HTML</span>
</div>Example for Option 2
In this example, the #body# placeholder is placed between an opened and closed <div> tag.
- Select the Blocks tab and click Create New Block button.
- Enter the name of the new block in the blocks title field. For example: Custom HTML Block.
- Paste the earlier copied code into the code field.
- Click Save.
- Update existing campaigns for the newly created block to appear in the block library.
Adding CSS in the email template style
In case you would like to add CSS in the template's <head> part you can do it in two options:
- In the template's Style Editor tab.
Note, styles may be set inline on targeted items (tags, classes, IDs, etc.)
- In the Frame Editor tab create an additional
<style>block.
The code added here (in the "Style" part or the in the "Frame" of your template) will be sent in all campaigns, regardless of whether the Custom HTML block is used or not.
We recommend setting inline-styles on tags or, if possible, adding the <style> block directly in the custom HTML instead of adding them as a fixed part to the template.
Update existing campaigns for the changes to take effect.
How to use the Custom HTML Block
- Drag and drop the Custom HTML block into your email campaign. Notice that it contains a blue item.
- Click the blue item. Click the Insert Emarsys Scripting Language snippet button in the Editing Tool.
- Optionally, you can rename the snippet in the appearing dialogue box.
- Replace the existing code in the field with the custom HTML code you would like to use.
By default, the custom HTML code only contains an opened and closed<div>tag.
- Click OK then Save, if the ESL code passed the code validation.
You can check the email campaign via testmail, campaign preview or see the preview of the email campaign by clicking the eye icon, or via the archive link of a campaign.