Web layers are personalized banners that can be shown on specified pages of your website to a specified audience to drive engagement and conversion. They are executed using HTML, CSS, and JavaScript. They are not pop-ups, and will not be blocked by pop-up blockers.

You can watch this video to get an overview of the basic features of web layers. Everything is covered in detail in the textual guide too.

Why you should use web layers

Web layers have multiple uses and are generally good as call-to-action solutions. Our customers tend to use them to:

• Highlight important information that can change customers' behavior, such as free shipping
• Incentivize subscription to push notifications or newsletters
• Gather information through surveys or update customer attributes
• Create peer pressure by showing how many people are buying/looking at a product.

Creating a web layer

You can create a reusable web layer template from the Asset Manager and use it in a campaign later, or as part of a campaign directly. In order to do that, go to Campaigns > Web layers > + Create new. You can start creating your web layer from scratch by selecting the "Blank template" option, or choose one of the existing templates within your project and start from there. These can be either your saved custom templates from under the or the "Project Templates", or Predefined Templates provided by Exponea. Either way, you will be able to fully customize it using the visual and HTML editors.

📘

Old predefined templates

In version 1.178 we have introduced a distinction between Project templates and Predefined templates for better centralized management of the templates created by Exponea, and a brand new set of 9 predefined web layers. Do not worry about the old templates created by us, however, you will now find all of them under your Project templates.

Setting up a web layer consists of 4 main parts, usually in this order:

1. Design
2. AB test setup
3. Settings
4. Test and evaluation
   As with most other campaigns in Exponea, you will be able to locate these tabs in the top left corner.

Design

There are two possibilities for designing your web layer:

1. Editing the parameters in the visual editor
2. Changing the code HTML/CSS/JS directly

The properties of each web layer are defined by its “parameters”. The parameters can contain things like copywriting, position, button visuals, or background color.

The less coding-savvy users can use the visual editor, where the different parameters can be easily edited by simply filling text inputs or using color pickers. To configure the look and behavior of the web layer, you can modify these parameters here.

The more technical users can choose to edit them directly within the code editor, using HTML, CSS, and JavaScript. New parameters for the visual editor are also defined within the code using template parameters. This allows you to add more parameters and create your own editable set of templates.

When working with web layers, you can seamlessly switch between the two editors. This way, you can easily create new custom web layers by defining the parameters within the code and then editing them in the visual editor (or in the code directly, if that suits you better).

📘

The JavaSript code editor also allows you to add any advanced conditions that cannot be specified using the general settings of the web layer, such as gaining information about the contents of customers' carts.

In the following section, we will go over the different parts of the visual editor that you can use to customize your web layer. The numbers will reference the parts of the screenshot above.

(1) Web layer preview
A preview of your web layer is always available next to the parameters editor region and it is updated in real-time so that you can instantly preview any changes done in the parameters editor. You can also preview the web layer and its functionality set up for a particular customer in a particular scenario using the Test tab.

(2) Switch between the code and visual editors
Using these two buttons will toggle between the code editor and the visual editor that you can see on the screenshot. This is to create a seamless workflow between adding new parameters and behavior in the code editor, and then editing and previewing them using the user-friendly visual editor.

(3) The editor region
This region will contain either the code editor interface or the visual editor. You can adjust its size by dragging the 3 dots rectangle at the edge of the region. You can define parameters categories and tooltips for each of your parameters in the code editor. These categories will then translate into collapsable windows, or "groups" of parameters in your visual parameters editor. This helps you with navigating and organizing your web layer. You can view the tooltip by simply hovering your mouse over the little i icon.

Each parameter can be edited separately and the way you do that in the visual editor will depend on the parameter. For text edits, you will be generally able to type into a text field, you can pick a color using the standard color picker or by inputting its HEX code, for other parameters you might use sliders or choose from a drop-down menu.

(4) Editor docking style
This button allows you to toggle between docking your parameters editor at the bottom (i.e. below the preview) or to the right (as it is on the screenshot). Depending on your personal workflow, the size of the web layer, or the orientation of your monitor you might prefer one or the other, thus we are giving you the option to customize it yourself!

(5) Jinja personalization
Get information from metrics, reports, or include personal attributes using Jinja via the personalization button in the bottom right corner. You can select the relevant customer attribute or metric from a drop-down menu and simply copy-and-paste the created Jinja tag. This button will always be available in the bottom right corner of the screen.

(6) A/B Testing switch
This button allows you to toggle A/B Testing on and off. Upon turning it on, you will be able to work with multiple variants of the web layer at the same time. Read more about A/B testing later in this article.

📘

Dimensions and scale are now measured in pixels.

Working with our Predefined Templates

You can choose to kickstart your workflow by selecting one of our new predefined templates when creating a new web layer. Note that if you want to save your changes, you can only save the template as a copy, as the predefined templates are loaded from a centralized repository and cannot be edited directly. Learn more about our Predefined Templates.

Our predefined templates will have their parameters divided into the following categories, depending on the specific template. The parameters in each category are ordered according to their relevance to each other. If you want, you can configure these categories within the code editor when you're working with a copy of one of the predefined templates. You can also decide to use a similar structure when creating a new custom web layer from scratch.

Apart from the standard parameters, there can be additional parameters specific to the individual web layer type, such as setting the date and time of the countdown end.

Other functionalities

Here is an overview of some other functionalities present but not mentioned previously:

Defining parameters

You can define your custom parameters in the HTML code editor. These parameters will then become visible in the visual editor so the non-technical users can adjust them too. Read more about parameters in Exponea and how they work in our template parameters guide.

With the button in the top right corner of the editor, you can switch between the HTML, CSS, and JS part of the code, so that you can configure your parameters using code if that is what you prefer to the visual editor.

As you can see in the screenshot above, newly defined parameters have to be in a certain format to allow for the collapsable categories and tooltips. The right format of the parameter notation is:

[[ { name: 'paramName', tooltip: 'Tooltip text', category: 'Category name', isJsonParam: true } : type | ‘default value’ ]]"

isJsonParam: true must be present for our parser to recognize the notation otherwise the whole content of {...} will be displayed as the parameter name.

AB test setup

You can enable the AB test settings after toggling on the "A/B test" button in the upper part of the editor. This will create a new line of tabs above the editor. By default, Exponea will create a "Control group" and a "Variant A" which is your current design of the web layer. You can add more variants by clicking the + button next to the tabs. This will duplicate the previous variant.

You can find all of the settings relating to the A/B testing under the "A/B test" tab next to the "Editor" tab in the top left corner, where you can specify things like the type of the distribution. Read more on AB tests in our detailed guide.

Settings

Show on - attributes

You can choose for the web layer to appear on certain pages by using one of four Show on" settings explained below. By clicking on add rule you specify multiple settings for a single web layer. By clicking on add exception you can specify where the layer should not be shown if you chose a too broad show on setting.

1. Any page
The web layer will appear on all your URL pages.

2. Page with URL
The web layer will appear on the specific URL page that you choose.

3. Page URL containing
The web layer will appear on the URL pages that contain the specific string you define.

4. Page matching regexp
If you can use regular expressions you can use them to define where the web layer should be shown even more effectively. For example, the setting in the image below defines that the web layer should appear on pages with URLs containing a character from 0 to 9 positioned in front of a "+" sign but behind "/".

🚧

Display conditions

Bear in mind that the display conditions explained in the table above rely on the tracking of the event banner and attributes action = show and interaction = true/false. If you change this structure in the JS editor, these conditions won't work properly.

👍

Tip for testing your web layer

For testing purposes, we recommend setting the condition "Show on page URL containing" to something like "#test". After you have launched the web layer, you can simply go to www.yourwebsite.com/#test and you will see it in the real environment. You can even send this link to anyone as it will work until you stop the campaign.

Manual triggering of the Web Layer via SDK

Apart from the automatic triggering based on the relevant settings mentioned above, web layers can also be triggered manually via the SDK function exponea.showWebLayer(). This can be useful if you want to trigger the web layer by, e.g. a button click, or based on the viewed product attributes.

When using showWebLayer(), some of the settings from the web layer setup are ignored (Schedule, ShowOn, Target devices) and some are still applied (Audience, Display). The function can be called by a custom JavaScript e.g. using the Tag Manager, or another web layer. It is, however, not possible to trigger a web layer by backend events.

Test and Evaluate

The TEST tab provides a preview of the web layer and a quick summary of the web layer's settings. Once you start the campaign, you will be able to get insights immediately using the predefined dashboard located in the EVALUATE tab.

Events generated by web layers

Web layers generate banner events when being interacted with. These events are defined and tracked in the JavaScript code of each web layer (enabled by default).

The banner event can have the following attributes.

• action - show, click, close
• banner_id
• banner_name
• banner_type
• variant_id
• variant_name
• interaction

Some web layers can track additional actions and attributes specific to their UC:

• Subscription banners: upon subscription, they track action=subscribe with form inputs as attributes (email, first_name, last_name, birthday…)
• Web push subscription - upon subscription, they track action=subscribe

Lag handling

Do not worry about a hypothetical lag in processing events which might lead to a web layer being shown repeatedly despite being closed by the customer. Our SDK has a session storage logic to prevent web layers being displayed after being closed for display settings ‘Until interaction’ , ‘Once’, and ‘Once per visit’.

Use cases

Web layer on a specific day

Sometimes you want to inform your customers about a particular sale/product through a web layer that pops up on a particular day of the week.

For this, you can either use a JavaScript code or your own expression. Let´s say that you want your customers to see this Web layer only on Sunday.

var today = new Date(Date.now());
var day = today.getDay()
if (today === 0){
//show banner
    console.log("Sunday")
} else {
//do not show banner
    console.log("Not Sunday")
}

The getDay() method returns the day of the week for the specified date according to local time, where 0 represents Sunday.

In Exponea app, you can create this model. You display the Web layer to customers where expression equals a specific day of the week, which all customers would pass through only on that day. Expression starts on Monday with value 1 and ends on Sunday with value 7.

Example being web layer shown on Friday, so the customer filter needs to be set for this expression to equal 5.

Troubleshooting

Read this article to find answers for the following issues:

• I have launched the web layer but cannot see it.
• The campaign showed once but it doesn't load again.

Using custom images in web layers

If you want to use a custom image in the web layer you can do so by putting the following code into the web layer's HTML editor: <img src="URL LINK OF YOUR IMAGE" />. This means that you already need to have the picture uploaded somewhere on the web. If you do not you can upload it to our CDN domain via the asset manager. Read more on how in the Asset manager article.

Clone to another project

This feature allows you to clone Web Layers to other projects you have access to. Read more about Cloneable Data Mapping in our Data Manager article.