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 and wish to enforce rules such as "Show X on "/about," don't show Y on /dashboard," you'll need to make a couple tweaks inside your Fomo account.

Step 1 - Enable "Manual" Trigger

By default, Fomo notifications are loaded via our JavaScript snippet on DOM ready.

Inside Fomo, navigate to Settings > Advanced and select "Manual override start" from the dropdown.

Note: after saving this configuration, Fomo notifications will stop showing on your website, assuming your snippet is already embedded.

Step 2 - Set up JS Triggers

In your web app source code, add a callback in your router to handle triggering Fomo on whatever pages or conditions you'd like.

Here is an example using a Vue app, which does a few things on every page change:

  1. Fires a Google Analytics "pageview" event
  2. Renames the page <title>
  3. Triggers Fomo

Here's a second example with slightly more logic. 

In this scenario, Fomo is only loading on the Search page (for example, of a travel booking search engine). Further, whenever a user visits this page, Fomo resets the total notification count to zero, thus renewing the experience for that visitor.

Step 3 - More Configurations (Optional)

You might prefer server-side Page Rules on your app versus the Fomo Page Rule interface. Or you may only want to show Fomo as a condition of multiple events being met, such as "scrolled to X area && on Y page."

See the "Fomo widget methods" section here to learn all ways you can extend Fomo to fit your requirements:

Did this answer your question?