Personalization above your pages

 

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 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 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 homotetically, make sure you filled in these fields correctly.

Display for the following devices

With a few simple clicks, you can decide on witch devices you want to display your web personalization: computer, smartphones or tablets. By default, all 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 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 the animation will be triggered: 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 on your configuration options, accessible from 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

You can, if you want to, 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: 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 a blank template

Template type

Two basic templates are available, both consisting on 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 your 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)

Taille de l'image

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 homotetically, make sure you filled in the fields correctly.

Display for the following devices

With a few simple 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.

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 the animation will be triggered: 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 from 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 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 the animation will be triggered: 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 from 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 simply 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 the animation will be triggered: 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 from 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 simply 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 all of your page width: if your image is too high, it will use 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

With a few simple 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 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. 

L'URL que vous renseignez s'ouvrira dans une nouvelle fenêtre si le visiteur clique quelque part sur votre sticky block.

Options

Deux options sont disponibles, elles sont désactivées par défaut mais peuvent être activées si vous le souhaitez :

  • Faire apparaître le sticky block au scroll : le sticky block n’apparaîtra qu’au moment où l’utilisateur fera défiler la page.
  • Décaler le contenu pour éviter la superposition : le sticky block ne sera pas positionné au-dessus de votre contenu. Par exemple, si vous utilisez un sticky block en header, le haut de votre page sera décalé de la hauteur du sticky block afin d’être visible.

Créer un sticky block à partir de code HTML

Votre code HTML

Tapez ou collez le code HTML de votre pop-in dans le champ indiqué.

Positionnement du sticky block

Trois options s’offrent à vous :

  • Dans le header
  • Dans le footer
  • A un emplacement précis sur l’axe X ou Y

URL de redirection au clic

Si vous le souhaitez, vous pouvez ajouter un lien sur votre sticky block. Pour cela, il suffit d’indiquer le lien dans le champ correspondant.

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:

  • Make sticky block appear on scroll: the sticky block will appear only when the visitor start scrolling
  • Shift content to prevent superposition: the sticky block will not be above your content, your content will be moved down if the sticky block is a header or moved up if it is a footer. 

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 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. 

L'URL que vous renseignez s'ouvrira dans une nouvelle fenêtre si le visiteur clique quelque part sur votre sticky block.

Options

Two options are available. They are enabled by default:

  • Make sticky block appear on scroll: the sticky block will appear only when the visitor start scrolling
  • Shift content to prevent superposition: the sticky block will not be above your content, your content will be moved down if the sticky block is a header or moved up if it is a footer. 

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 Widgets.

Have more questions? Submit a request
Powered by Zendesk