Emarsys is introducing a new content creation flow to Web Channel, where you can use new tools, such as Web Channel Content Blocks.
Content Blocks separates content creation from campaign creation, allowing you to design and build reusable templates that can be easily updated and styled when creating new campaigns.
For more information on Web Channel Content Blocks watch the October 2023 Product Release video:
Web Channel Content Blocks overview
To see all the available Web Channel Content Blocks, go to Content > Content Blocks. The elements you find here can be reused in multiple campaigns. You can find all the Web Channel Content Blocks in the following categories:
- Prebuilt: These Web Channel Content Blocks are available to everyone, and they cannot be modified directly. To edit them, first you have to copy them and then you can modify them as Custom Blocks.
- Branded: These Web Channel Content Blocks are created by Emarsys Services for your account. You can only see these Content Blocks, if they are created specifically for you. They cannot be modified. To edit them, first you have to copy and then you can modify them as Custom Blocks.
- Custom: These Content Blocks are created by you. You can create or modify them anytime.
Content Blocks view
You can see all your prebuilt blocks here.
Change the view of the blocks to list view or display your already deleted blocks.
Creating Web Channel Content Blocks
Click Create Block and move to the Content Block Creation page to edit your block in different tabs.
When you are creating a Content Block for Web Channel, it is recommended to use Web Channel-specific class names and properties to ensure proper event tracking for your campaigns. See, HTML Editor.
Settings
On Settings tab, you can name your block and add a short description to indicate what this Web Channel Content Block is used for.
Preview
On the right side of the page you can see the current preview of your Web Channel Content Block.
Note that the preview displays the effect of your HTML and CSS code, including the variables, but not Javascript effects. To see the effect of Javascript on the block, you have to use the Run button in the Javascript tab.
HTML
Access to the Content Blocks editor is enabled for the default user roles. For new user roles, created by you, it needs to be enabled as follows:
- At Management menu > User management page you can define user roles.
- Under Roles tab select the user role that was created by you and click the Edit (pencil) icon.
- At Permissions section > Content tab you can edit the privileges to access Campaign Blocks.
If you cannot change your user access role, then please contact your Account Owner. For more information, see User roles and permissions.
On the HTML tab, you can define the structure of your Web Channel Content Block. This is where you need to add the e-editable property to elements to make them editable on the campaign creation side. For detailed information on the e-editable attribute, click: learn more.
Simply add the property and name it:
<h1 class="wpst-title" e-editable="title">Title</h3>Elements with e-editable properties named the way will inherit content from each other, so make sure to give a unique name to each element.
The following HTML elements are supported by the e-editable property:
- Any header tags, like
<h1> - Paragraphs
<p> - Images
<img> - Divs
<div>
To add a placeholder for Emarsys Forms, we recommend adding the following code snippet:
<div data-wps-form-editable="form-content">
<div class="wpst-form-selector">
<p class="wpst-paragraph">Click here to open form toolbar!</p>
<p class="wpst-paragraph" style="line-height: 200%">Then click on
<span class="wpst-form-selector-icon">
<svg id="ac-entry-form" viewBox="0 0 34.078 37.758" width="100%" height="100%"><path fill="none" d="M24.133 11.7c-.97 0-1.754-.786-1.754-1.755V2.34H2.34v33.078h29.398v-23.72h-7.605zM8.73 31.997H6.09v-2.28h2.64v2.28zm0-4.205H6.09v-2.28h2.64v2.28zm0-4.205H6.09v-2.28h2.64v2.28zm20.56 8.41H11.41v-2.28H29.29v2.28zm0-4.205H11.41v-2.28H29.29v2.28zm0-4.205H11.41v-2.28H29.29v2.28zm-23.198-4.7v-4.94h23.2v4.94H6.09z"></path><path fill="none" d="M31.19 8.61L25.465 2.89c-.128-.127-.438-.293-.75-.402V9.36h6.874c-.108-.31-.274-.622-.4-.75z"></path><path d="M32.834 6.947L27.13 1.244C26.456.568 25.103 0 24.134 0H1.753C.786 0 0 .787 0 1.756v34.248c0 .97.785 1.754 1.754 1.754h32.324V9.945c0-.968-.567-2.322-1.244-2.998zm-8.115-4.46c.31.108.62.274.748.4l5.722 5.724c.13.128.293.44.402.75H24.72V2.485zM2.34 35.416V2.34h20.04v7.605c0 .97.784 1.754 1.753 1.754h7.605v23.718H2.34z"></path><path d="M11.408 29.717H29.29v2.28H11.41zM11.408 25.512H29.29v2.28H11.41zM11.408 21.307H29.29v2.28H11.41zM6.092 13.947h23.2v4.938H6.09zM6.092 29.717h2.64v2.28H6.09zM6.092 25.512h2.64v2.28H6.09zM6.092 21.307h2.64v2.28H6.09z"></path></svg>
</span>
icon to select/modify form!</p>
</div>
</div>While the HTML tab is intended for HTML content only, you can put your CSS and Javascript here too in <style> and <script> tags respectively.
Variables
You can add predefined values to your block, allowing you to easily style colors, fonts, paddings, change the layout of your blocks, or set which elements you want to show in a given campaign.
There are several variable types available for use:
- Color
- Image
- Number - Decimal
- Number - Integer
- String
- Select
Define variables that you can use in your Web Channel Content Block.
For more information on variables, see Variables.
To use a variable in your code, simply add a variable placeholder:
.wpst-logo {
width: {variables.logoWidth};
}You can use variables for HTML, CSS, and Javascript. The format is always the same: {variables.myVariable}
Styles
On the Styles tab, you can add CSS code to your Web Channel Content Block. This is where you can style your HTML elements, add breakpoints and special rules for mobile devices and for now, you can style the Web Channel overlay campaigns border.
If you are building a Content Block from scratch, we recommend checking one of the prebuilt elements to see how you can style the campaign borders in Web Channel.
Javascript
To add additional functions to your blocks, for example, button interactions, you can use Javascript.
Editing History
On this tab, you can preview and restore your previous versions.
By clicking Finish Editing, the Content Block you have just created will be available for selection in Web Channel. If you choose to Save as Draft, your changes are saved, but they will not be visible during campaign creation.
When you use a Content Block in Web Channel, the active version of the Content Block is used as campaign content. However, modifying the Content Block will have no effect on the campaign, you need to manually add the new version.
Special syntax for Web Channel
To successfully track clicks on a link in your Web Channel campaign made with the HTML editor, make sure to use the following attribute: data-wps-href
Personalisation
You can add Personalisation tokens to Web Channel campaigns by using the e-editable property and adding them directly during campaign creation. You can use the the inline pop-up or the drag and drop editor.
You also have the option to add a reference to your personalization tokens directly to the code, or even use ESL syntax, if you plan to use advanced personalization logics. All personalization capabilities are available for Web Channel, including Relational Data-based personalisation.
Only Web Channel campaigns targeting segments or included in Automation Center programs can contain personalization tokens.
New Content Blocks in Web Channel campaigns
In a Web Channel campaign, you can use any of the Content Blocks with all campaign types. This means, for example, the same Content Block can be used in an Overlay Web Channel and in an Embedded Web Channel campaign.
Creating a block-based Web Channel campaign
- To create a Block-based Web Channel Campaign, go to Web Channel > Campaigns.
- Click Create Block Based Campaign.
- Select a campaign type.
- On the Content step, you can see all the available Web Channel Content Blocks.
If a Web Channel Content Block that you have earlier created is not appearing here, make sure you have saved it by the Finish Editing button.
During campaign creation, you cannot make any structural changes to the Web Channel Content Block. You can only modify:
- the editable content,
- set the value of variables, and
- add Personalisation tokens.
To make structural changes, edit the selected Web Channel Content Block. In the case of Prebuilt and Branded Web Channel Content Blocks, you need to make a copy first.
Known limitations, future improvements
The following improvements are planned for later developments in the pilot release:
- Support for Web Channel campaigns with multiple pages.
- Built-in variables for Overlay Web Channel campaign border styling and border preview during campaign creation.