Focus Items (Website Pop-Ups)

Focus items are great in allowing you to engage the users on your site through notifications, modals, and full page takeovers. You have full control to initiate these whenever you want and with different actions such as exit intent.

Focus Items are listed under the Channels menu.

Creating a Focus Item

To create a focus item click on Focus Item on the left hand menu and enter the required information

After entering the website, click the builder button top right. This is where you can edit your form details:

Focus & Goal

When building a focus item you need to choose what the focus or goal is. There are three options:

  1. Collect data – this will use a Mautic form in the output as the content. Note that it should be a very simple form (One or or two inputs) as there is very little room to work with in some of the styles. But this is great for capturing emails for a newsletter signup.
  2. Display a notice – information only and is great for announcements and the like.
  3. Emphasize a link – great for landing pages with an event, sale, promotion, etc. It displays a button to click that will direct to the given link.

Each focus/goal will have slightly different settings but all have a few in common:

  1. Animate? – Should the focus item be animated or static?
  2. When to engage – this determines when the focus is engaged based on visitor interaction. It can be immediate, on scroll, timed, or with an exit attempt. If “Visitor intends to leave”  is chosen, an option appears that allows configuration if links within the site should trigger the engagement or not.
  3. How often to engage – should the visitor be engaged every time, once per session, or during a period of time?
  4. Stop engaging after a conversion – once a user clicks the link or submits the form (not applicable for displaying a notice), enabling this option will no longer engage the visitor.

Focus Style

There are four styles supported –

  1. Bar – display a bar across the top or bottom of the page
  2. Modal – a small modal window that appears centered on the page
  3. Notification – these are like modals but smaller and slide in from the side.
  4. Full page – also like a modal only it takes up the entire view.

Each style has its own settings such as position, size, sticky, etc.

Colors

Four colors are currently supported for primary color, text color, button color, and button text color.

For advanced users

Content mode

A section called ‘content’ enables you to format content in basic, editor or html mode. This allows for even more creativity when engaging visitors to your site.

Inserting focus into a website

Inserting a focus item into a website involves copying one line of code and inserting it into your page’s source. After creating the focus item, view its details page where you can see engagement graphs and other detailed information. On the right, you’ll see a “Focus Installation” box that includes the line of code needed. Click on it, copy, then paste it into your website’s source before the closing body tag if possible.