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:
- Fires a Google Analytics "pageview" event
- Renames the page <title>
- 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:
https://docs.fomo.com/reference#advanced-functionality