Welcome to Fomo
The world's first Social Proof Automation API
Fomo began as an ecommerce plugin, showing off recent sales activity with online shoppers.
Today, Fomo is integrated on 10,000+ websites and powers 500,000,000 notifications per month.
Pending use case, implementing Fomo takes as little as 15 minutes. If you need help integrating with your platform, we offer hands-on API implementation support.
How it Works
The primary API interaction is with our Events endpoint.
All events are created via POST requests from your app's front-end / backend, a 3rd party integration, or Zapier. Assuming a 200 Response, Event parameters are added to a live data feed and viewable within the Fomo dashboard. You can also Retrieve all events with the API.
This feed of Events is displayed to end-users on your website as animated notifications, based on the Application Settings you provide for a given Fomo Application.
Below are a couple Fomo notifications from Matchaeologist and Growth Marketing Conference:
Matchaeologist sends purchase orders -- Growth Marketing Conference sends ticket sales.
As you can see, the ability to sync Fomo with your branding spans as deeply as your CSS chops. :)
Understanding Events vs Templates
Fomo is built for scale, with modularity and separation of concerns top-of-mind.
For this reason, Fomo delineates Event parameters (ie: first_name
, city
, product_name
) from a notification's message structure, ie:
"{{ first_name}} from {{ city }} just bought {{ product_name }}!"
Thus, whenever you POST an Event object hash to the Events endpoint, you'll need to include an Event Type ID, which is the Primary Key ID attribute of a Template.
This tells Fomo how to arrange the parameters you've sent, for display to end-users browsing your website.
Creating Templates
While you can CRUD EventTypes with the Fomo API, we recommend using the application UI instead -- just log in and click the Templates tab.
Pro Tip - Developer Happiness
Many of our users maintain separate Fomo app instances for their dev, staging, and production environments.
If you do this, feel free to reference the event_type_tag
in your Event POST requests (vs event_type_id
) to reduce the number of dynamic environment variables needed in your application. This merely requires giving Templates the same name during setup.
Available SDKs
We're proud to offer official libraries for the following programming languages.
If you have specific questions about the public API or need additional endpoints, email chris@fomo.com or call us at +1 646.586.9408.
PHP
Node.js
Python
Ruby
Don't see what you need? Let us know.
Token-based Auth
Before making requests, you need an Auth Token.
To get your Token, log into Fomo and visit Settings > Site after selecting a website. The auth token will be near the bottom.
Note: API access is only available by default to users on a Paid plan -- you will not see an auth token otherwise. If you need to make test calls before upgrading, send us an email and we'll set it up.
Create an event
Send notification parameters to your live Event feed. For tips and tricks, see the Protips section below the following code sample.
image_url
can point to an image with any dimensions, but we prefer squares, no greater than 125x125px. anything larger will likely slow down the speed of rendering on your website.- send
url
parameters without UTM or other tracking links. to add these, edit the UTM fields in your Applications > edit form instead, which makes it easy to bulk edit later. - 2-digit
country
codes are great - we'll convert them automatically to full country names. if you send a full country name, that's fine too. - all Templates include a "title_with_link" helper merge variable, which combines your "title" and "url" Event parameters. but, using markdown you can combine any 2 parameters, such as {{ something_custom }} with {{ url }}. learn more.
Using the time_ago (timestamps) feature
If you're leveraging the "time_ago" attribute to show timestamps in your events, there's no need to POST any 'created_at' values. Fomo simply uses the derived values from the event record itself.
Search for an event
Fetch an event object by external_id or email_address attribute.
Why do this?
If you want to build an "opt out" ability, or simply debug Fomo during implementation, it may be useful to set up a callback or cron that routinely fetches some events and destroys them.
Workflow
- Look up an event by
external_id
oremail_address
- Response will include 1 event (the most recently created match for your query)
- Delete an event by ID
Retrieve all events
Returns an index of all events.
JSON response format when show_meta
is enabled in request URL: https://www.fomo.com/api/v1/applications/me/events?show_meta&per_page=10
{
"events":[
{
"id":9438552,
"application_id":1,
"first_name":null,
.
},
.
],
"meta":{
"per_page":10,
"page":1,
"total_count":1000,
"total_pages":100
}
}
Create a Template
Useful for building 3rd party Fomo integrations.
Why do this?
If you're implementing Fomo on your own site (or a client's), simply create and modify templates from the Fomo interface > Templates tab.
However, if you're building a 3rd party integration, such as one that requests a Fomo user's access token, you may prefer to build custom templates programatically, on behalf of mutual customers.
Summary
Fomo integrates seamlessly on any website through an asynchronous, Javascript widget that points to an auto purge-caching CDN.
This enables both our users as well as our developers to make ongoing improvements without customers ever needing to update the snippet on their site.
Drop the Fomo snippet on your website once, and you're done.
To learn more about how the Fomo snippet works, see our Basic and Advanced documentation.
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.
Advanced Functionality
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')
// 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.
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 viewafterNotificationShow
: fires after notification leaves the viewafterNotificationClick
: 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>
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.
Get Started
Public endpoints to consume Fomo marketing metrics.
We believe in transparency.
Therefore, Fomo's KPIs are available to anyone via the Open API.
Learn more or get started below.
curl "https://fomo.com/api/v1/open?metric=XXX"
-H "Content-Type: application/json"
-X GET
As of this writing, you may fetch the following values from the Open API:
- Signups (count)
- Customers (count)
- Integrations (name, count)
Pass in the metric you prefer with the metric
parameter, ie:
/open?metric=customers
Some metrics support filters, ie:
/open?metric=signups&since=2018-11-15
About
Fomo Open is an experiment. To request additional filters or data sets, get in touch.