Fomo Inline lets you expose social proof outside of the Fomo notification box you're used to seeing.
You can add social proof text like "35 people bought this in the last 24 hours" wherever it makes sense: to your product pages just below the "add to cart" button, below a newsletter signup button, or anywhere else!
How does it work?
For each supported integration we generate an HTML snippet. You can copy and paste this snippet directly into your HTML (e.g. into your .liquid, .php, or .html file)
Supported integrations
Integration | Sample message |
12 people bought this in the last 24 hours | |
13 people signed up in the last 24 hours | |
44 people are currently viewing this product/page |
If you add the Active Visitors Inline code to your site, the live Active Visitors notification will be turned off. You can turn it back on under Integrations if you want to have both versions visible.
Instructions to set up Fomo Inline
Step 1 - Choose your social proof message
Do you want to show off your visitor count, your sales count, or something else?
Fomo Inline enables you to select from the following 3 integrations:
Active Visitors to show off the # of users on that page
ex. "34 people are looking at this product right now"
Custom Roundups to show off the aggregate count of 1 specific behavior (sale, subscription, review, etc.)
ex. "11 people subscribed in the last 24 hours"
Page Stream to show off the sales of 1 product over a 30 minute or 24 hour period
ex. "28 people purchased this in the last 24 hours"
Step 2 - Go to the Integration page
Navigate to the Page Stream, Active Visitors or Custom Roundups integration and find the "inline options" button.
Go to the Notifications tab > select the integration you chose in Step 1 > under Actions in the bottom left, select "inline options".:
Step 3 - Copy/paste your custom code to your site
Clicking on this button generates HTML code which can be copied/pasted anywhere on your site:
Paste this script directly into the HTML of your site, wherever you want the text to show up!
Step 4 - That's all!
Going forward, the selected Fomo message will show up as text on your site in the exact location where you've placed the script!
The {{ count }} variable updates from our server each time a visitor loads the page.
Advanced Customizations & Styling
You can edit the Fomo Inline script for some custom options. Let's look at some examples with this script:
<div class="fomo-inline" data-aid="1" style="display: none;" data-min-count-to-show="1">
{{ count }} people signed up in the last 24 hours
</div>
<script async src="http://load.fomo.com/widget/inline/1.js</script>
Text
You can edit the text within the <div>. For example, if you want your message to say
"{{ count }} campers just joined our mission", you can edit this directly by replacing:
{{ count }} people signed up in the last 24 hours
Set a minimum count
Use the data-min-count-to-show attribute in order to hide the message if the count attribute sometime gets too low:
data-min-count-to-show="1"
TIP: To test the placement of the snippet on your page, set the minimum count to 0 so you can see how inline will appear on your page. Set the minimum count back to 1 if you don't want "0 people bought this" to be visible!
Styling
Inline returns plain HTML without any styling however it is possible (and preferred!) that you add some styling yourself via a <style> attribute tag on the div.fomo-inline element.
Feel free to add margins, padding, color or whatever you want! This article has lots of helpful tips for how to customize the look of your notifications: Edit your Fomo Notification with Custom CSS Overrides
<div class="fomo-inline" data-aid="1" style="display: none; color: red; font-size: 90%"></div>
<script src="https://load.fomo.com/widget/inline/1.js" async></script>
Please note that display: none is there for a reason. We will switch this property to display: block once the data is loaded fully from our server on our side.
Otherwise, there would be an empty box while the message was loading.
FAQs
1. I want to show off aggregates sales of a product. How do I turn on Fomo Inline for this?
Page Stream needs to be enabled and set up first if you want to use it for Fomo Inline. Page Stream displays the popularity of each product separately with messages like "5 sneakerheads bought these in the last 24 hours".
Go to Notifications > Page Stream. Make sure you select the settings you want:
Then, you can continue to click "inline options" to generate your snippet:
2. I just turned on Fomo Inline and now I'm on my site - where is my message?
Wait for a few hours.
Page Stream starts counting purchases from 0 after you connect the integration. This is why it takes up to 24 hours to show the expected count in the message.
3. [For Shopify stores only] Will Fomo inline work for my Shopify store's custom theme?
Setup is pretty straightforward for Shopify stores. However, it might be tricky to set up a Page Stream integration on custom themed stores if you are using customer-facing URLs vs Shopify-specific URLs.
Contact support if you need help placing the Fomo Inline snippet on your Shopify store.
4. My Page Stream Inline doesn't show anything - what's going on?
Keep in mind our script matches the URL of the visitor's current page with the URL variable for your Events. If URLs don't match, Page Stream won't work.
You can check whether your URLs match by going to your Events tab, hovering over one event, and clicking "edit". You'll see the URLs we capture for each event under "event URL". These URLs must match what the visitor sees in their browser when they are visiting your product page.
5. How are Fomo Inline impressions counted?
There is one Fomo Inline message per page load. So, each page load counts as 1 impression. You can check out total impressions on your Dashboard.
Fomo Inline is still in Beta. If you are experiencing any issues, we will be happy to help. Reach out to hello@fomo.com with the subject "Fomo Inline help" and we will get it up and working!