How to set up an Overlay?

The default overlay is a pop-up box that displays communication to the profiles. Two templates for default overlays are available in Squeezely called Venice and Sydney. In the templates you can define the following settings:

Content

The content settings consist of:

Settings_Content.png

Variant name

The name of a variant.

Content

The content options:

  • Custom: text or images
  • Product: a specific product
  • Productset: the required product set
  • Product(s) from event: product ids that serve as input to compile a product set and are passed in an event.

Display

In the display settings you can change the styling:

Display_Overlay.png

  • The dots can be used to change the order of the items
  • The eye can be used to hide an item

Additional options

In the additional options you can do the following:

Additional options_Overlay.png

  • Overlay location: determine the location of the overlay on the page.
  • Timer: set the amount of time that the personalization is displayed. If the personalization should not disappear automatically, select 0.
  • After closing overlay: set the interval (if any) that an overlay will not be shown after an overlay is clicked away.
  • Lazy load images: by checking this option images will be loaded as soon as they need to be shown, improving the initial page load.
  • CSS: in the CSS box you can add your own CSS.
  • JavaScript: in the JavaScript box you can add your own JavaScript.
  • Edit template: by clicking this button you can edit the template.
  • Reset template: by clicking this button, you can reset the template.
  • Export: by clicking this button, you can export your template as an XML file.

Snippets

Snippets are handy pieces of CSS and JavaScript that can be reused across various personalization's. To use snippets in a Personalization variant first create a snippet with the button Snippets and then just head to the 'Snippets' category in the left sidebar. You can select the created snippets.

Snippets.png