Personalization above your pages

3

min

quiz

When you create a web personalization, three choices are available: you can display the personalization inside the content of your pages, above your pages or via an email.

In this article, we will explain how to display a web personalization above your pages. You can also read our article about personalization inside your pages.

Pop-in

A pop-in is a window opening in your webpage, above its content. It can appear when the page loads or after an event (for example, a click on the “Add to basket” button).

Choose which method to use in the drop-down menu:

  • From an image
  • From a blank template
  • From HTML code
  • From Target2sell

From an image

Image selection

You can use an image as a pop-in on your website. To do so, choose the option “From an image”.

To select an image, fill in its URL or select a file on your computer.

To delete an image you already selected, place your cursor above your image and click on the “Delete” button.

Pop-in location on the page

By default, the pop-in is located at the center of the page, but you can choose its location by clicking on one of the arrow on the diagram. You can also choose the position more precisely on the X axis (horizontal) and the Y axis (vertical).

Image size

To keep the dimensions of your file, check the box “Identical to source image”. However, if you want to resize it, check “Resize source image”. The fields “Image width” and “Image height” will appear, allowing you to set up the new size.

Warning: these fields are separated. To resize an image homothetically, make sure you filled in these fields correctly.

Display for the following devices

In a few clicks, you can decide on which devices you want to display your web personalization: computer, smartphone or tablet. By default, all devices are selected. Click on the icon of your choice to unselect adevice.

Once a device is unselected, a new line appears allowing you to select a specific image for this device. If you do not add an image, your personalization will not display for visitors using this device.

Note: You can also include or exclude devices when you create your segment.

Animation effects for your pop-in

You can add several animation effects to your pop-in: fade, slider, zoom in, zoom out, shaker. You can also choose when to trigger the animation: when the pop-in opens, when it closes or both. If you select “Slider” as an animation, you also need to choose its starting point.

Warning: if you want to use an animation effect, you must check the “Allow the  injection of jQuery” box in your configuration options, accessible via the “Preferences” page.

To do so, go to the “Personalization module” in the “Configuration” part. If you are having trouble finding this option, you can read our article How to allow jQuery injection?

Redirection URL after click

If you want, you can determine a URL. Users clicking anywhere on your pop-in will be redirected to this URL. To do so, simply fill in the URL in the corresponding field.

The link will open in a new window if the visitor clicks anywhere on your pop-in.

Options

Two options are available and already checked by default, but you can disable them if you want to.

  • Add a semi-translucent background: the background will be darkened to make the pop-in more visible.
  • Close pop-in if visitor clicks outside: the user will be able to close the pop-in with the close icon or by clicking anywhere outside the pop-in.

From a blank template

Template type

Two basic templates are available, both consisting of an image and some text. Click on the template of your choice to select it.

Image selection

To select an image, type in its URL or import it from your computer.

To delete an image already selected, place your cursor above your image and click on the “Delete” button.

Pop-in text

Fill in your text in the text field. You can choose the size and the color of your text, as well as the background color.

Pop-in location on the page

By default, the pop-in is located at the center of the page, but you can choose its location by clicking on one of the arrow on the diagram. You can also choose the position more precisely on the X axis (horizontal) and the Y axis (vertical).

Image size

To keep the dimensions of your file, check the box “Identical to source image”. However, if you want to resize it, check “Resize source image”. The fields “Image width” and “Image height” will appear, allowing you to set up the new size.

Warning: these fields are independants. To resize an image homothetically, make sure you filled in the fields correctly.

Display for the following devices

In a few clicks, you can decide not to display your web personalization on a type of device. By default, all types of devices are selected. Click on the icon of your choice to unselect this device.

Once a device is unselected, a new line appears allowing you to select a specific image for this device. If you do not add an image, your personalization will not display on this device.

Note: You can also include or exclude devices when you create your segment.

Animation effects for your pop-in

You can add several animation effects to your pop-in: fade, slider, zoom in, zoom out, shaker. You can also configure when to trigger the animation: when the pop-in opens, when it closes or both. You can also choose the starting point of the slider animation.

Warning: if you want to use an animation effect, you must check the “Allow the injection of jQuery” box on your configuration options, accessible via the “Preferences” page.

To do so, go to the “Personalization module” in the “Configuration” part. If you are having trouble finding this option, you can read our article How to allow jQuery injection?

Redirection URL after click

If you want, you can choose a URL: users clicking anywhere on your pop-in will be redirected to this URL. To do so, simply fill in the URL in the field.

The link will open in a new window if the visitor clicks anywhere on your pop-in.

Options

Two options are available and already checked by default, but you can disable them if you want to.

  • Add a semi-translucent background: your website on the background will be darkened to make the pop-in more obvious.
  • Close pop-in if visitor clicks outside: the user will be able to close the pop-in with the close icon or simply by clicking anywhere outside the pop-in.

From HTML code

Your HTML code

Type in or copy and paste the HTML code for your pop-in.

Pop-in location on the page

By default, the pop-in is located at the center of the page, but you can choose its location by clicking on one of the arrow on the diagram. You can also choose the position more precisely on the X axis (horizontal) and the Y axis (vertical).

Animation effects for your pop-in

You can add several animation effects to your pop-in: fade, slider, zoom in, zoom out, shaker. You can also configure when to trigger the animation: when the pop-in opens, when it closes or both. You can also choose the starting point of the slider animation.

Warning: if you want to use an animation effect, you must check the “Allow the injection of jQuery” box on your configuration options, accessible via the “Preferences” page.

To do so, go to the “Personalization module” in the “Configuration” part. If you are having trouble finding this option, you can read our article How to allow jQuery injection?

Redirection URL after click

If you want, you can choose a URL: users clicking anywhere on your pop-in will be redirected to this URL. To do so, simply fill in the URL in the field.

The link will open in a new window if the visitor clicks anywhere on your pop-in.

Options

Two options are available and already checked by default, but you can disable them if you want to.

  • Add a semi-translucent background: your website on the background will be darkened to make the pop-in more obvious.
  • Close pop-in if visitor clicks outside: the user will be able to close the pop-in with the close icon or by clicking anywhere outside the pop-in.

From Target2Sell

If you want to use Target2Sell, you can simply fill in your identifier. Then, Target2Sell will determine automatically which product will be highlighted.

Pop-in location on the page

By default, the pop-in is located at the center of the page, but you can choose its location by clicking on one of the arrow on the diagram. You can also choose the position more precisely on the X axis (horizontal) and the Y axis (vertical).

Animation effects for your pop-in

You can add several animation effects to your pop-in: fade, slider, zoom in, zoom out, shaker. You can also configure when to trigger the animation: when the pop-in opens, when it closes or both. You can also choose the starting point of the slider animation.

Warning: if you want to use an animation effect, you must check the “Allow the injection of jQuery” box on your configuration options, accessible via the “Preferences” page.

To do so, go to the “Personalization module” in the “Configuration” part. If you are having trouble to find this option, you can read our article How to allow jQuery injection?

Redirection URL after click

If you want to you can choose a URL: users clicking anywhere on your pop-in will be redirected to this URL. To do so, simply fill in the URL in the field.

The link will open in a new window if the visitor clicks anywhere on your pop-in.

Options

Two options are available and already checked by default, but you can disable them if you want to.

  • Add a semi-translucent background: your website on the background will be darkened to make the pop-in more obvious.
  • Close pop-in if visitor clicks outside: the user will be able to close the pop-in with the close icon or by clicking anywhere outside the pop-in.

Sticky block

A sticky block is a banner on all you page width, usually located in or above the header or the footer.

Choose which method to use in the trop down menu:

  • From an image
  • From HTML code
  • From Target2Sell

From an image

Image selection

To use an image as a sticky block, select “From an image”.

To select your image, type in its URL or import a file from your computer.

The image will take the entire page width: if your image is too high, it will take too much space on your webpages.

To delete an image already selected, place your cursor above your image and click on the “Delete” button.

Sticky block location

Three options are available:

  • In the header
  • In the footer
  • At a precise position

Display for the following devices

In a few clicks clicks, you can decide not to display your web personalization on a type of device. By default, all type of devices are selected. Click on the icon of your choice to unselect this device.

Once a device is unselected, a new line appears allowing you to select a specific image for this device. If you do not add an image, your personalization will not display on this device.

Note: You can also include or exclude devices when you create your segment.

Redirection URL after click

If you want, you can choose a URL: users clicking anywhere on your pop-in will be redirected to this URL. To do so, simply fill in the URL in the field.

The link will open in a new window if the visitor clicks anywhere on your pop-in.

Options

Two options are available, they are disabled by default but can be activated if you wish:

  • Show the sticky block on scroll: the sticky block will appear only when the user scrolls the page.
  • Shift the content to avoid overlay: the sticky block will not be positioned above your content. For example, if you use a sticky block in header, the top of your page will be offset from the height of the sticky block in order to be fully visible.

Create a sticky block from HTML code

Your HTML code

Type or paste the HTML code of your pop-in into the field shown.

Sticky block position on the page

Three options are available to you:

  • In the header
  • In the footer
  • At a precise location on the X or Y axis

URL de redirection au clic

You can add a link on your sticky block. Simply indicate the link in the corresponding field.

The link will open in a new window if the visitor clicks anywhere on your pop-in.

Options

Two options are available. They are enabled by default:

  • Show the sticky block on scroll: the sticky block will appear only when the user scrolls the page.
  • Shift the content to avoid overlay: the sticky block will not be positioned above your content. For example, if you use a sticky block in header, the top of your page will be offset from the height of the sticky block in order to be fully visible.

From Target2Sell

If you want to use Target2Sell, you can simply fill in your identifier. Then, Target2Sell will determine automatically which product will be highlighted.

Redirection URL after click

If you want, you can choose a URL: users clicking anywhere on your pop-in will be redirected to this URL. To do so, simply fill in the URL in the field.

The link will open in a new window if the visitor clicks anywhere on your pop-in as soon as the visitor clicks on the sticky block.

Options

Two options are available. They are enabled by default:

  • Show the sticky block on scroll: the sticky block will appear only when the user scrolls the page.
  • Shift the content to avoid overlay: the sticky block will not be positioned above your content. For example, if you use a sticky block in header, the top of your page will be offset from the height of the sticky block in order to be fully visible.

Widgets

You can also use widgets for your web personalizations.

Select the widget of your choice by clicking on the “Add” button on the bottom right of each widget.

Once you have selected a widget, you can unselect it by clicking on “Widgets” in the path on the top of the window.

For further information about widgets, please read our article on widgets.