Smart Banner

Overview¶

Smart Banner displays promotional messages at the top of the page. Messages are set via Smart Links and persist until the customer dismisses the banner.

Key Features¶

• Smart Link integration - Messages are set automatically when customers visit Smart Link URLs
• Persistent display - Banner stays visible across page navigation until dismissed
• Cookie-based storage - Message persists via the _rslm cookie
• Customizable template - Banner appearance can be styled with CSS

Quick Start¶

Smart Banner initializes automatically when a Smart Link message cookie is present. The banner appears at the top of the page with the message and a close button.

// Check if Smart Banner is ready
if (Rebuy.SmartBanner.status === 'ready') {
  console.log('Banner message:', Rebuy.SmartBanner.message);
}

// Check banner visibility
if (Rebuy.SmartBanner.visible) {
  console.log('Smart Banner is currently displayed');
}

Programmatic Dismissal¶

Dismiss the banner programmatically when needed:

// Dismiss the banner and remove the cookie
Rebuy.SmartBanner.dismissSmartBanner();

How It Works¶

1. Customer visits a Smart Link URL with a message parameter
2. The message is stored in the _rslm cookie
3. Smart Banner reads the cookie and displays the message
4. Customer can dismiss the banner, which removes the cookie

Properties¶

SmartBanner.visible : boolean¶

Whether the banner is currently displayed.

SmartBanner.message : string | null¶

The current banner message text. Returns null if no message is set.

SmartBanner.status : string¶

Current module status.

Methods¶

SmartBanner.init() ⇒ Promise<void>¶

Initializes the Smart Banner module. Called automatically during Rebuy initialization if a message cookie is present.

// Typically called automatically, but can be invoked manually
await Rebuy.SmartBanner.init();

SmartBanner.getMessage() ⇒ string | null¶

Retrieves the current banner message from the cookie.

const message = Rebuy.SmartBanner.getMessage();
if (message) {
  console.log('Current message:', message);
}

SmartBanner.dismissSmartBanner() ⇒ void¶

Dismisses the banner and removes the message cookie. The banner will not reappear until a new Smart Link is visited.

// Dismiss the banner
Rebuy.SmartBanner.dismissSmartBanner();
// SmartBanner.visible is now false
// SmartBanner.status is now 'disabled'

Styling¶

The banner uses the following CSS classes:

Example Custom Styles¶

.rebuy-smart-banner {
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  color: white;
  padding: 12px 20px;
  text-align: center;
}

.rebuy-smart-banner_close {
  cursor: pointer;
  opacity: 0.8;
}

.rebuy-smart-banner_close:hover {
  opacity: 1;
}

Related¶

• Smart Links - Create links that set banner messages