Ouibounce Exit-Intent Modal

Ouibounce: A small library enabling you to display a modal before a user leaves your website.

With this drupal module, you can embed any kind of block into the Ouibounce modal window.

Drupal 9/10

Versions

4.x

• Ouibounce Exit Modal block selection logic breaking-changed (BC) from 3.x to 4.x!:
  You need to reconfigure your Ouibounce Exit Modal block settings after the upgrade!
  Custom HTML and views are NOT affected.
  See #3358189: Render block entities, not plugins unless all plugin settings can be configured for details.
  No database changes were made from 3.x to 4.x so you can up-/downgrade without fear, but reconfigure the Ouibounce block settings.
• Library path changed from 3.x to 4.x to allow composer installation:
  The path to the ouibounce library (ouibounce.js) changed from "/libraries/ouibounce/ouibounce.js" to "/libraries/ouibounce/build/ouibounce.min.js" Also note, that the "ouibounce.min.js" file is used now, instead of the normal "ouibounce.js".
  You may now use composer to install the library dependency:
  composer require bower-asset/ouibounce
  or
  composer require npm-asset/ouibounce
  See #3358139: Change ouibounce library structure to allow npm-asset / bower-asset installation for details.
• Please also note that the DOM / CSS structure changed and you may need to align your styles accordingly: #3385518: Follow Drupal CSS/BEM standards and modernize CSS at all

3.x

Do not use this for new projects. 3.x will be deprecated soon.
It used block plugins as basis, but didn't implement the settings form required to use (bit) more complex blocks, like webform. See #3358189: Render block entities, not plugins unless all plugin settings can be configured for details.
3.x does not support fetching the library via composer.

Installation

Ouibounce library

With composer and asset-packagist:

composer require bower-asset/ouibounce
or
composer require npm-asset/ouibounce

Manual installation:

• Download Ouibounce library from here
• Place the folder inside the "/libraries" folder

Module

• Install "Ouibounce Exit Modal" module
• Go to blocks, and place "Ouibounce Block" into your content area, and configure it. In contrast to Drupal 7 there's no global settings page anymore.

Dependencies

• Ouibounce library (tested with v0.0.12): Download it from GitHub

Drupal 7

Installation

• Download Ouibounce library from here
• Uncompress the downloaded file, and copy the "build" folder into "/sites/all/libraries/ouibounce" folder.
• Install "Ouibounce Exit Modal" module as described here: Installing modules (Drupal 7)
• View the status report at admin/reports/status to check that Ouibounce library is installed correctly.
• Visit "/admin/config/user-interface/ouibounce-exit-modal" to adjust the settings
• Select a block you want to display in the modal, and save changes.
• Go to blocks, and place "Ouibounce Exit Modal" block into your content area.

Dependencies

• Libraries API (2.x)
• Ouibounce library (tested with v0.0.12): Download it from GitHub

Alternative modules

• https://www.drupal.org/project/exitpopup
• ...? Open an issue!

Support

☕️buy a coffee