Exit Intent Popup

Display a popup for leaving users

npm run add ExitIntentPopup

Use the ExitIntentPopup component to detect when a user is about to leave your page and display a popup with a targeted message or offer.

---
import { Button, Input } from 'webcoreui/astro'

const modal = {
    title: '🚀 Launch faster'
}
---

<ExitIntentPopup modal={modal}>
    <p>Get access to premium UI components, templates, and much more!</p>

    <div class="flex column md">
        <Input type="email" placeholder="Your email address" />
        <Button>Get Access</Button>
    </div>
</ExitIntentPopup>

The component works in the following way:

• The popup is only triggered for top exits, which could indicate the user is about to close the tab.
• Once the popup is shown, it won’t be triggered again within the same session.
• The popup is shown only after the user spent at least 10 seconds on the page, or the amount of time defined by the timeOut prop.

You can create any type of popup by passing content as the children of the component. To customize the modal itself, pass a modal prop that accepts an object in the form of ModalProps.

If you need to tweak the logic on when this popup should be triggered, you can modify the shouldShowExitIntent variable inside the component.

Cookies

You can also specify a cookie prop to prevent showing the popup again to users for x days after it has been showed. For example, the following popup will only be shown once every 15 days:

<ExitIntentPopup
    modal={modal}
    cookie="exitIntentShown"
    cookieDays={15} {/* Defaults to 30 */}
>
    ...
</ExitIntentPopup>

If the cookie prop is not set, no cookies will be stored, and the popup will trigger for the next session.

API

type ExitIntentPopupProps = {
    timeOut?: number
    cookie?: string
    cookieDays?: number
    modal?: ModalProps
    className?: string
}