Not everyone wants notifications on their website.

For these customers we built Feed, an ad network, 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 notifications, follow along below. 

(As of October 2018, there is no additional charge for this feature.)

Getting Started


Step 1 - Get your current snippet

Retrieve your regular embed snippet by visiting Settings > Site > scroll down > click "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 text copied above:

<iframe src="https://load.fomo.com/portals/load?id=XXX" 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, 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>


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> 


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 ryan@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.

Did this answer your question?