Integrate a Popin on your Drupal site
You may sometimes need to display a popin to announce an event, important information for users or offer a registration form as soon as a web page opens.
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
Here is a concrete example of popin displayed with the popin module.