Integrate a Popin on your Drupal site

Pop-in: what is it?

A popin appears above the page and the user cannot interact with the web page until the popin is closed. The goal is to capture the user's attention and spur them to action. The popin is different from the popup which is a new window opened by the browser. The popin is integrated into the same web page.

If you are interested in the user experience (UX Design), this technique is not recommended because it is not integrated into the navigation logic. Opening a popup or modal after clicking a button seems logical. A popin or popup that opens without having asked for anything is conversely an untimely event that causes a change of browsing context and confuses the user. It also poses accessibility issues.

There are a few cases where I think it works. I integrated one on the site of an association to promote a free discovery course. In this way, we are sure that all visitors to the site will see the information. The content can legitimately interest visitors and the duration of the popin is 15 days.

Create the Popin with a Drupal module

To make this popin, I used a very complete module developed by Kgaut, a well-known Drupal developer in the drupal france community.

The module allows to

• Define the number of days between 2 appearances of the popin (based on a cookie)
• Set a display start and end date: practical, no need to think about deactivating it when the event has passed.
• Choose an image and enter a title, subtitle and description text
• A Button (Call to action or CTA) with a text for the link and a url

The configuration is done here : /admin/content/popin

Then, we integrate this popin with a Drupal block on the block layout page: /admin/structure/block

If you need to display a popup on your site, I recommend this module which has all the useful options.

Configuration in the BO

Résultat

Here is a concrete example of popin displayed with the popin module.