Banner Positioning

GoPayLocal supports four banner positions. Choose the one that works best with your site layout.

Positions

Top Bar

position: "top"

A full-width bar fixed to the top of the viewport. Similar to notification bars used by GitHub, Vercel, and other SaaS tools.

┌─────────────────────────────────────────────────┐
│ 🇮🇳 30% off for India! Use code PPP-IN │ Copy  │ ✕
├─────────────────────────────────────────────────┤
│                                                 │
│              Your page content                  │
│                                                 │
└─────────────────────────────────────────────────┘

Best for: Landing pages, pricing pages where you want maximum visibility.

Details:

• position: fixed at top of viewport
• Full width with centered content
• Subtle shadow: 0 2px 6px rgba(0,0,0,0.12)
• Wraps content on mobile

Bottom Bar

position: "bottom"

A full-width bar fixed to the bottom of the viewport. Like a cookie consent banner.

┌─────────────────────────────────────────────────┐
│                                                 │
│              Your page content                  │
│                                                 │
├─────────────────────────────────────────────────┤
│ 🇮🇳 30% off for India! Use code PPP-IN │ Copy  │ ✕
└─────────────────────────────────────────────────┘

Best for: Sites that already have top navigation bars and don’t want visual competition.

Details:

• position: fixed at bottom of viewport
• Full width with centered content
• Shadow: 0 -2px 6px rgba(0,0,0,0.12)

Bottom-Left Floating Card

position: "bottom-left"

A compact floating card in the bottom-left corner. Non-intrusive and familiar (like chat widgets).

┌─────────────────────────────────────────────────┐
│                                                 │
│              Your page content                  │
│                                                 │
│  ┌──────────────────┐                           │
│  │ 🇮🇳 India         │                           │
│  │ 30% off for you! │                           │
│  │ Use code PPP-IN  │                           │
│  │ ┌──────────────┐ │                           │
│  │ │  Copy Code   │ │                           │
│  │ └──────────────┘ │                           │
│  └──────────────────┘                           │
└─────────────────────────────────────────────────┘

Best for: SaaS apps, dashboards, or pages with existing bottom bars.

Details:

• Fixed position: bottom: 16px; left: 16px
• Width: 300px (max: calc(100vw - 32px))
• Border radius: 10px
• Shadow: 0 6px 20px rgba(0,0,0,0.15)
• Country name shown as a header above the message
• Full-width CTA button

Bottom-Right Floating Card

position: "bottom-right"

Same as bottom-left, but positioned in the bottom-right corner.

┌─────────────────────────────────────────────────┐
│                                                 │
│              Your page content                  │
│                                                 │
│                           ┌──────────────────┐  │
│                           │ 🇮🇳 India         │  │
│                           │ 30% off for you! │  │
│                           │ Use code PPP-IN  │  │
│                           │ ┌──────────────┐ │  │
│                           │ │  Copy Code   │ │  │
│                           │ └──────────────┘ │  │
│                           └──────────────────┘  │
└─────────────────────────────────────────────────┘

Best for: The default position. Works well on most sites. Avoids conflicting with left-side navigation or chat widgets.

Tip

If your site uses a chat widget (Intercom, Crisp, etc.) in the bottom-right corner, use bottom-left to avoid overlap.

Mobile Behavior

On mobile devices:

• Bar positions (top/bottom) remain full-width but content wraps gracefully
• Floating cards use max-width: calc(100vw - 32px) to fit the screen with padding
• The close button is always accessible
• Touch targets meet accessibility guidelines (minimum 44x44px)

Z-Index

The banner uses z-index: 2147483647 (maximum 32-bit integer) to ensure it appears above all other content. This is the same technique used by browser extensions and payment overlays.

Animations

The banner slides into view with a 300ms ease-out animation:

• Top bar: slides down from above the viewport
• Bottom bar: slides up from below the viewport
• Bottom-left: slides in from the left
• Bottom-right: slides in from the right

Choosing a Position

Position	Visibility	Intrusiveness	Best For
top	High	Medium	Landing pages, pricing pages
bottom	Medium	Low	Sites with top navbars
bottom-left	Low	Very low	Apps with right-side chat widgets
bottom-right	Low	Very low	Default — works for most sites

The position is configured in the dashboard under Campaign > Banner settings.