Positions & Animations

The plugin supports 4 consent box positions and 4 entrance animations.

Positions

Center Modal (Position 1)

• Centered on the viewport with a semi-transparent backdrop overlay
• Max width: 500px
• The backdrop prevents interaction with the page behind the dialog
• Best for: Maximum visibility, important consent decisions
• Uses role="dialog" and aria-modal="true" for screen readers

Bottom Bar (Position 2)

• Full-width bar fixed to the bottom of the viewport
• Spans the entire screen width with internal padding
• Content is vertically centered within the bar
• Best for: Non-intrusive, familiar cookie banner pattern
• Responsive: Stacks vertically on narrow screens

Bottom Right (Position 3)

• Card fixed to the bottom-right corner of the viewport
• Max width: 400px
• Floating above the page content with a subtle shadow
• Best for: Unobtrusive corner notification
• Responsive: Expands to full width on very narrow screens

Bottom Left (Position 4)

• Card fixed to the bottom-left corner of the viewport
• Max width: 400px
• Same behavior as bottom right, mirrored
• Best for: Sites with important content in the bottom-right area

Animations

All animations are CSS-based and play once when the consent box first appears:

Reduced Motion

The plugin respects the prefers-reduced-motion: reduce media query. When a visitor has reduced motion enabled in their operating system:

• All fade/slide animations are disabled
• The consent box appears instantly with no movement
• This is handled entirely in CSS — no JavaScript detection needed

Responsive Behavior

• Center modal: The 500px max-width scales down on smaller screens with horizontal margins
• Bottom bar: Content reflows naturally as a full-width block element
• Corner cards: The 400px max-width scales down on narrow screens; on very small screens they effectively become full-width

All positions use position: fixed so the consent box stays visible as the visitor scrolls.