ePrivacy and GPDR Cookie Consent by Cookie Consent Skip to main content

Web banners: use cases library customizable close button


image-1658152345385.png

Prerequisites


To work with web banners, first, they need to be set by the Meiro team:

1. Activation of the endpoint in the Meiro Events (ME) system should be implemented in order to collect events.

2. Meiro Events API connection must be set in the Administration/ Settings tab

3. Web banners tabs must be enabled by the administrator for your user role

The closing button deployed by our SDK is hard coded. The first step to creating the web banner button which can be customized is to turn off the default closing button in the banner options.

Знімок екрана 2023-01-04 о 10.39.00.png

Remember: It is important for the button to have onclick attribute with value "window.parent.MeiroEvents.closePopUpWebBanner()"

Example in CSS:

.close {
        	    width: 40px;
    			height: 40px;
    			border: 0;
    			display: flex;
    			display: flex;
    			align-items: center;
    			justify-content: center;
    			position: fixed;
    			right: 0;
    			top: 0;
    			background: transparent;
    			cursor: pointer;
    			z-index: 1;
        	}
Markup (html):
<button class="close" onclick="window.parent.MeiroEvents.closePopUpWebBanner()">

Remember: When using custom close buttons with MeiroEvents web banners, make sure to manually stop event propagation by using the event.stopPropagation() method to prevent triggering the banner click handler. Here is a minimal example of a banner with a custom close button.

No Comments
Back to top