Advanced Functionality

You might be setting up Fomo on a S.P.A. that does not "technically" change pages as visitors click around your website. if this is the case you will need to tell Fomo that page URL has been changed.

View help article

Granular control

For granular control over your Fomo notification logic, enable the manual override setting from the Settings > Advanced tab, while logged into the dashboard.

🚧

Heads Up

Enabling programatic notification triggers will turn off the default page load strategy. Thus, automatic notifications will stop showing on your website, in exchange for full control.

Example use cases:

• Show a Fomo notifications after a user adds something to their shopping cart
• Stop showing notifications when the user signs up
• Show notifications in rapid succession when a user is looking at a certain page, or area of a page
• Etc

There are many things you can do with gesture-based notifications -- here are a few working examples:

// triggers the Fomo notifications to start showing
fomo.trigger('start')

// example implementation
$('#start-button').on('click', function(){
  fomo.trigger('start');
});

Fomo uses local storage to track which event notifications have been shown to users. Adding the optional true parameter to restart the event order. 

fomo.trigger('start', true)

// example: 
// There are 6 notifications. Your user sees notification #1, then notification #2. Calling fomo.trigger('start', true) will start back at notification #1.

// triggers the fomo notifications to stop
fomo.trigger('stop')

// reload Fomo on a single page app (SPA) (ex. Vue/React)
fomo.trigger("reload")

// Shown notifications are tracked by local storage. fomo.trigger('start') will restart notifications without repeating those previously shown.

fomo.trigger('restartOrder')

// Similar to fomo.trigger('start', true), but without triggering start. This is useful for "looping" -- showing notifications that have already been shown.

fomo.trigger('resetCount')

// Resets the "max per page" count; useful for overriding the maximum notifications per page preference, defined in your Application's Display settings.

`reload vs start

• fomo.trigger("reload") should be used for a single page app. Full instructions here
• fomo.trigger("start") should be used when selecting "Manual override start" within Settings > Advanced > Initial Trigger

Extending Notification Actions

There are two callbacks available to call after Fomo is loaded. These callbacks allow for extending the actions on your website.

beforeNotificationShow: fires right before notification comes into view
afterNotificationShow: fires after notification leaves the view
afterNotificationClick: fires after notification is clicked

<script>
  // example
  
  document.addEventListener('FomoLoaded', function(){
    fomo.beforeNotificationShow = function(){
      // add code here.
      console.log('hello, your notification just appeared!');
    }
    fomo.afterNotificationShow = function(){
      // add code here.
      console.log('your notification just left the view!');
    }
    fomo.afterNotificationClick = function(){
      // add code here.
      console.log('your notification was clicked!');
    }
  });
</script>

Fomo Feed

This setting disables the popup notifications but continues to load the messages from the event, allowing for complete styling control.

How To Activate

Step 1) Within Fomo Admin, go to Settings > Advanced.

Step 2) Add Fomo div to your page's HTML. (Required)
Fomo Feed needs to find an element with id='fomo_feed' in order to function.

<div id='fomo_feed'></div>

Step 3) Add some simple CSS to give some spice.

<style>
  #fomo_feed{
    max-width: 400px;
    margin: auto;
    text-align: center;
  }
</style>

🚧

Heads Up

Pending your stylesheet setup, you may experience page content being "pushed down" (or up) when your Fomo Feed functionality kicks in. To prevent this, just add a height of "30px" to div#fomo_feed.