Basic Usage

Every Fomo widget script tag looks something like this:

<script src="https://load.fomo.com/api/v1/36K9pUyuj8sukckFW66iCg/load.js" async></script>

The identifier following /api/v1 is your application's client_id, which is safe to share publicly.

If you visit the script tag's source URL, you'll notice a basic object with a few properties and convenience methods.

The following object has been truncated to save space, but can you visit this URL to see the latest object notation.

var fomo = {
  version: 1.0,
  initiate: function () {
    this.applyDefaultStyling();

    //Pull in recent events, cache for 40 seconds
    var cached = Math.ceil((new Date().getTime() / 1000) / this.cache) * this.cache;
    var recentOrders = document.createElement('script');
    recentOrders.src = this.settings.fomoUrl + '/js-obj/' + this.clientHash + '/' + this.settings.limit + '/' + cached + '.js';

    if (this.isFomoEnabled()) {
      document.getElementsByTagName('head')[0].appendChild(recentOrders);
    }
    else{
       console.log("Fomo is currently turned off on this domain. To re-enable, log into Fomo and click Apps > Enable (toggle) next to this website.");
    }
  },
  applyDefaultStyling: function () {
    var cssElement = document.createElement('style');
    cssElement.innerHTML = this.settings.themeCss;
    document.getElementsByTagName('head')[0].appendChild(cssElement);
  },
  closed: false,
  cache: 40,
  isFomoEnabled: function () {
    var enabled = true;

    // Should it hide for mobile?
    if (this.settings.hideMobile && this.isMobileDevice()) {
      enabled = false;
    }

    // drop <IE9 support
    if (this.isIE() && (this.isIE() === 7 || this.isIE() === 8)){
      enabled = false;
    }

    return enabled;
  },
  
  // etc, etc.
}

By default, the Fomo widget fires async to your DOM ready functions, and is loaded with relevant Events that match your Application settings.

You may want to debug Fomo in order to tweak CSS styles, check for Events being pre-loaded, etc.

This can be done with the following methods in your browser's developer console:

// get an array of Event objects that match your application settings
fomo['_debugMap'].shown_events

// check if Fomo is enabled on this page
fomo.isFomoEnabled() // returns true/false

// stop the animation sequence, to 'freeze' a given notification's display CSS
fomo.pause()

// manually trigger fomo's setup procedure
fomo.initiate()

To enable additional features and debugging tools, see Advanced Functionality below.