Not everyone wants notifications on their website.
For these customers we built Feed, and now, an embeddable portal.
Here's what it looks like:
To try Fomo Portal on your website, either in addition to or instead of your existing Fomo notifications, follow along below.
(As of April 2020, there is no additional charge for this feature.)
Getting Started
Step 1 - Get your current snippet
Retrieve your regular embed snippet by visiting Settings > "Embed."
It will look something like this:
<script type="text/javascript" src="https://load.fomo.com/api/v1/asdfpUyuj8sukckFW66iCg/load.js" async></script>
Copy to your clipboard the text between /api/v1/ and /load, which in this example is asdfpUyuj8sukckFW66iCg .
This is your website's client ID, and it is safe to publish on the web.
Step 2 - Create a new snippet
Paste the following code on a webpage, replacing "XXX" with the client ID copied from Step 1:
<iframe src="https://load.fomo.com/portals/load?id=XXX" id="fomo_portal" width="750" height="650" scrolling="yes" frameborder="0"></iframe>
Reload the web page on which you pasted the iFrame snippet; you'll now see an embedded portal. If you don't, scroll down to Troubleshooting at the bottom.
Advanced Features
If you followed the guide above, no additional steps are required, however granular controls are available.
For example, you may want to remove clickable links or images, or hide the default drop shadow effect.
Step 1 - Choose your customization strategy
To grant the Portal iframe "permission" to access your parent web page, you have 2 options:
Option 1
Paste the following snippet directly below your closing </iframe>:
<script>
var iframe=document.getElementById("fomo_portal");iframe.addEventListener("load",function(){var t={};iframe.getAttributeNames().forEach(function(e){t[e.toString()]=iframe.getAttribute(e.toString())}),iframe.contentWindow.postMessage(t,"*")});
</script>
Option 2
If you prefer not to add this line of code to your web page, simply modify Step 2 iframe parameters to query params appended to the "src" property, ie:
<iframe src="/portals/load?id=xxx" images="false">
... becomes:
<iframe src="/portals/load?id=xxx&images=false>
You will need to use Option 1 if you are trying to customize Fomo-specific attributes.
Step 2 - Custom features
Hide images
Disable images by passing images="false" inside your iFrame snippet.
<iframe src="..." images="false" ... ></iframe>
Limit the event count
Don't want to show 10, 20, 30 lines of recent activity? By default, Fomo Portal will load the # of events you specify inside Settings > Limits > Max notifications.
However, you can override that setting for your Portal-only data:
<iframe src="..." limit="5" ... ></iframe>
Disable links
By default, Fomo events with links will remain clickable. Disable links by passing links="false" inside your iFrame snippet.
<iframe src="..." links="false" ... ></iframe>
Custom card title
By default, the portal title is "What's Happening," but you may replace or remove it.
Replace the title:
<iframe src="..." card-title="Something Custom Here" ... ></iframe>
Remove the title:
<iframe src="..." card-title="false" ... ></iframe>
Disable the drop shadow
By default, the portal <div> has a light grey dropshadow around the edges. You may prefer to remove it.
<iframe src="..." drop-shadow="false" ... ></iframe>
Troubleshooting
This feature is currently in BETA, so it might break. To report bugs or ask questions, email hello@fomo.com.
If you don't have the ability to edit a webpage and refresh it for live changes, you can "sandbox" your Portal by visiting this link in your browser:
https://fomo.com/portals/load?id=36K9pUyuj8sukckFW66iCg&drop-shadow=false&limit=3
This yields our own company's recent activity, without a drop shadow and limited to just 3 items.
Modify parameters to achieve the experience you want, then pass along the completed <iframe>..</iframe> snippet to your developer.