How to set up smart add-ons

With smart add-ons (overlays, side boxes, bars,...), you can engage your visitors with personalized offers and capture leads.

Smart add-ons are a non-intrusive way to show personalized offers to your visitors and to capture leads at just the right time. You can think of them as the low-key version of on-site personalization since they are easier to set up, require less planning, and bring results quickly.

In terms of functionality, smart add-ons can be informative, capture email addresses, show a countdown timer, or ask visitors for additional information. In most cases, your final add-on will combine these features into something unique to your business and your website.

Email Capture Add-ons

With Unless, you can create add-ons that capture your visitor's email address. There are different templates you can choose from for this and the email addresses your visitors share can be found under the visitors tab.

We regularly create new templates to grow our library of smart add-ons. Currently, you can choose between four add-on types (overlay, side box, bar and popover) which are fully responsive and mobile-friendly. Read on to learn how to set up each type.

Smart overlays

As the name suggests, smart overlays (aka popups) appear as an additional layer on top of your page, focusing your visitors' attention on a single message. Often, they reach conversion rates 2-3 times higher than the website's average. Triggered on exit intent they are a great way to convert visitors who are about to leave your website.

Ideas for smart overlays:

  • show personalized discounts
  • capture leads by offering content upgrades
  • promote content (articles, PDFs, webinars,...)
  • offer a product demo
  • reduce shopping cart abandonment

How to set up an overlay:

SmartOverlayStart-step1

Navigate to the personalization tab and click on New personalization, select Smart add-on and go to the Overlay tab to choose a design and functionality (= with or without email capture). The design can be customized in the next steps.

SmartOverlayStart-step2 Click image to enlarge.

Next, configure your overlay. In the main settings you can choose what pages and audiences to include/exclude. In advanced settings, you can control when the popup will appear and how long it remains hidden after a visitor interacted with it (ie closed the add-on or clicked the CTA button). Optionally, click on "Exclude from the control group" so this personalization shows to all users.

SmartOverlayStart-step3

Once you're done, click on "Open add-on editor". From here you can design your overlay. Color, font, text, and images can be edited under the Modal tab; the Button tab will allow you to configure the action/confirm/cancel button. Under Other you can add custom Javascript and CSS, from here you can also switch on Expert mode. Expert mode will activate advanced design options, such as shadows and button size, under Modal and Button. When you're done editing, you can preview your design by clicking on the eye icon.

Smart side boxes

With a side box, you can capture your visitors’ attention without interrupting their browsing experience. They are ideal for showcasing related content and to create targeted offers. The self-segmentation box is a special form of side box. It allows you to survey visitors and to personalize their website experience based on how they responded to your question. Here's a setup guide for self-segmentation boxes.

Ideas for side boxes:

  • self-segmentation → better understand visitors' needs
  • recommend content (blogs, PDFs,...)
  • create lead magnets
  • make announcements
  • promote events and webinars

How to set up a side box

Navigate to the personalization tab and click on “New personalization”. Select Smart add-on and go to the Side boxes tab to select your design.

smart side box step1 Click image to enlarge.

Before you design your side box, set its display settings; one page vs. multiple pages, including/excluding audience(s), define when the add-on appears, and finally, how long it remains hidden after a visitor interacted with it.

smart side box step3

To design the side box, click on "Open add-on editor". Under the Modal tab you can set colors, font, text, and images. The Button tabs will allow you to configure the confirm and cancel buttons. Under Other you can add custom Javascript and CSS. You can also activate Expert mode - this allows you to make advanced changes to the design options under Modal und Button.

Smart bars

With smart bars, you can create non-intrusive header or footer bars that stay visible as visitors scroll through your website. They are a great way to guide your visitors through the conversion funnel and to focus their attention.

Ideas for smart bars:

  • welcome visitors
  • capture email addresses
  • highlight important information
  • update customers about new features
  • grow your social following

How to set up a smart bar:

create smart bar step1

Click on the "new personalization" button, select Smart add-on and switch to the Bars tab. From here you can pick a design and functionality (= with or without email capture). The design can be customized in the next steps.

create smart bar step2

First, you will have to decide on the display settings. Choose on how many pages you would like to show the bar (one page vs. multiple pages), define an audience, and (optionally) hide the bar from certain visitors by excluding audiences. In the advanced settings, you can determine when the add-on appears and how long it remains hidden after a visitor interacted with it (ie closed the add-on or clicked the CTA button).

create smart bar step3

Next, you can edit the content of the bar. For this, open the add-on editor. Color, font, and bar content can be edited under the Bar tab; the Button tab contains all information related to the Call-to-Action. The Others section allows you to add custom javascript and CSS to further customize the styling of your bar. From here you can also activate Expert mode - additional editing options that will appear under the Bar and Button tab. Once you're done, you can preview your design by clicking on the eye icon.