How to Create Mautic Focus Items And Display It On Your Website

mautic focus items

How to Create Mautic Focus Items And Display It On Your Website

What are focus items?

Focus items are a type of web personalization that empowers you to show a message, any form as a pop-up or display item on your website page.

Mautic Focus items allow you to enlist users on your website in different ways like bars, modals, notifications and full-page takeovers. Focus items can be added with different actions at different times such as exit intent.

To create Mautic focus items, 

Go to Focus items under the Channels through the navigation menu and click to create New. 

mautic navigation menu

 

Give a name to your focus item and add a website link. You can also describe in detail your focus item. 

Click the Builder button to create a pop-up. 

Focus item

 

Mautic focus item

 

Now decide what is your focus or goal behind building the focus item. 

There are three options:

Collect data – You can collect data from users by creating this kind of focus item. Mautic form can be used as output content. This option is great for capturing emails for a newsletter signup.

Display a notice – It provides text-based information only. This option is mainly used for announcements and important messages.

Emphasize a link – It is used for landing pages with an event, sale, promotion, and so forth. It displays a button on the focus item to click, which will direct the visitor to the given link.

Here, we’re selecting the collect data type to capture emails for newsletter signup.

 

create focus item

 

You’ll have different settings according to which option you’re choosing. 

Here are some common settings of focus- 

  • Animate? – Should your focus item be animated or static?

 

  • When to engage – this setting lets you decide when the focus item is engaged, based on user interaction with the website. It can be set to shown immediately on arrival, on scrolling slightly; you can also select the position of focus item such as, to the middle of the page or to the bottom of the page, or when the user appears to be exit from the page. 

 

  • Timeout before engage – This setting can delay (in seconds) before the focus item is triggered.

 

  • How often to engage – You can choose the user should be engaged every time, once per session, or repeatedly at specified intervals of time?

 

  • Stop engaging after a conversion – once a user clicks the link or submits the form, you will no longer engage the visitor by enabling this option.

 

focus item formatting

After choosing these settings, now go to the style of focus items.

There are four styles –

  • Bar – It displays the focus item as a bar across the top or bottom of the page
  • Modal – a small modal window that appears at the center of the page
  • Notification – The notification window will slide in from the side.
  • Full page – This model takes up the entire view of the page.

 

Select the best style for your focus item and it shows a preview of it.

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

 

mautic focus items

 

From the Colors option, you can set color to your focus items. In Mautic, there are four colors currently supported for primary color, text color, button color, and button text color.

 

color format

 

After selecting the colors, write content for the focus item. It is possible to format content in Basic, Editor or HTML mode in the Mautic focus item. You can also add a form to focus item. 

 

focus item

 

And your focus item will be created. Now close builder and click Apply to your changes. 

 

mautic focus item

 

Click on Save and Close.

 

add to website

 

Inserting a focus item into a website is simple. Copy one line of code and then paste it into your website’s source before the closing body tag if possible.

After the adding focus item to the website, you can see engagement graphs and other detailed information on the view detail page. 

 

mautic focus items

 

If you have any queries or need any Mautic related help please reach out to me.

 

No Comments

Post A Comment