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:
- Design
- AB test setup
- Settings
- 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:
- Editing the parameters in the visual editor
- 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.
Category | Description |
---|---|
Background | Set the background color or image. |
Copywriting | Configure the various text fields and links in your web layer. |
CTA | Configure various button parameters. |
Form | Parameters relating to the font or color of the input fields text. |
Image | Image source and alt text. |
Layout | The layout dimensions of your web layer. |
Position | Here you will be able to set things like banner edge offset, enter animation, or page alignment. The last one also determines the direction of the slide animation in the following way: horizontal=left -> slide from left |
Triggering | In this category, you can configure what "show triggers" the web layer should use and set the delay in show/hide. On entry - display the web layer on opening the webpage Show after time: the delay in web layer display after the trigger condition has been met |
Typography | Centralized text formatting. |
Visuals | Other visual properties. |
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:
What | Where | Details |
---|---|---|
Group | Drop down menu at the top right in the editor | This is a "policy" setting for banners. If more live banners belong to one group, only one will be shown, prioritized alphabetically. |
Save as new | Top left of the editor | Saves your web layer in the Asset manager for later use |
Change template | Top left of the editor | Change the template you are working with. Note that you can use a different template for every variant. |
Onsite preview | Top left of the editor | Preview all variants of the web layer on a specific URL by clicking on the "onsite preview" button in the top-right corner. |
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
Conversion goal | The automatic AB test optimization and the automatically generated evaluation report are based on this setting. |
---|---|
Schedule | You can choose to display the web layer instantly or set a specific launch date. |
Show on | Choose where to show the web layer: On every page, page with specific URL, page containing URL or by creating a regular expression where you define a particular set of URLs. |
Target devices | Show on any device or only desktop or mobile. |
Display | Set until when you want to keep showing the web layer:
|
Category | Choose which consent is required for a customer to have to receive this campaign. |
Audience | Define your custom audience that will receive this email campaign. You can use our standard customer and event filters. |
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 attributesaction = show
andinteraction = 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.
Updated 9 days ago