Call to action banner

[DBevan (David Bevan)]

Hi there,

I was wondering if Fliplet offered the ability to add hyperlinked banner at the top of a screen that has an “x” in the corner to remove from view if preferred.

I want to promote users to a linked screen through the banner (call-to-action) but don’t want it to take up space if users don’t want it to always be visible.

Thank you!

[YuliiaKovalenko]

Overview

This guide explains how to create a dismissible banner that remembers user preferences using a data source. The banner will be hidden by default and only show to users who haven’t dismissed it previously.

Step 1: HTML Structure

Add these components to your screen:

1. Add container component and manually add id=“banner” to it
2. Add a button component inside banner container. Manually add id=“close-banner” to the button. You can replace the text of the button with ‘X’ symbol in button settings

Button should have “positioning” set to “Relative to container” with “Top” and “Right” set to 0px if you want to show “close icon” in the top right corner of the banner

Result:

In this example you can see a container component with background image. But you can also add other components inside of “banner” container, such as text or image components

Step 2: CSS Configuration

Add these styles to your screen CSS to control banner’s visibility:

#banner{
  display: none !important;
  &.visible{
    display: flex !important;
  }
}

Step 3: JavaScript Implementation

Add following code snippet to your screen JS:

const loginDataSourceName = "Event - Attendees & User List";
const uniqueUserIdentifier = "Email";
const bannerDismissedColumnName = "Banner Dismissed";
let currentUserRecord;

Fliplet.User.getCachedSession().then(function(session) {
  if (session && session.entries && session.entries.dataSource) {
    Fliplet.DataSources.connectByName(loginDataSourceName).then(function(connection) {
      // Find current user's record
      connection.findOne({
        where: {
          [uniqueUserIdentifier]: session.entries.dataSource.data[uniqueUserIdentifier]
        }
      }).then(function(record) {
        currentUserRecord = record;	//save user's record to the variable
        
        if (record && (!record.data[bannerDismissedColumnName] || record.data[bannerDismissedColumnName] !== 'Yes')) {
          $(document).find('#banner').addClass('visible');
        }
      });
    });
  } else {
    console.log('User is not logged in');
  }
});

$(document).on('click', '#banner #close-banner', function(e){
  e.preventDefault();
  
  if (currentUserRecord){
    //hide banner and save user's choice
    $(document).find('#banner').removeClass('visible');
    
    Fliplet.DataSources.connectByName(loginDataSourceName).then(function(connection) {
      return connection.update(currentUserRecord.id, {
        [bannerDismissedColumnName]: 'Yes'
      });
    });
  }
});

Setup Instructions

1. Configuration Variables:

• Update loginDataSourceName with your data source name

• Set uniqueUserIdentifier to match your user identification field (usually “Email”)

• Adjust bannerDismissedColumnName if using a different column name

2. Banner Content:

• Customize the banner HTML structure as needed

• Add your call-to-action content inside the banner container

• Style the banner and close button according to your design

How It Works

1. Initial Load:

• Banner is hidden by default

• Script checks if user is logged in

• Retrieves user’s record from data source

• Shows banner if user hasn’t dismissed it before

2. Dismissal Process:

• User clicks close button

• Banner hides immediately

• User’s preference is saved to data source

• Banner remains hidden on future visits

This code assumes the user is logged in through a data source login component. If your app uses a different login method (such as SAML2 or Fliplet Studio login), you will need to modify the code to correctly retrieve the user’s session. Please refer to the Session API documentation: Session JS APIs | Fliplet Developers Documentation

Additionally, depending on the security rules configured for your login data source, you may need to provide additional data to authorize updates to user records.