In this guide, we'll provide javascript code examples for different use cases, for example:
Show notifications only after a user scrolls some part of your page
Stop showing notifications after a checkout popup shows up
or until cookie or GDPR consent is givenShow stream notifications only related to a specific product
Dynamically replace the notification text using templates / placeholders
Advanced A/B test (specific notifications)
Then you need the ProveSource javascript API.
Display
provesrc.display()
Trigger a specific notification display (we recommend changing the notification's Display settings in the dashboard to something arbitrary like "nowhere.com"):
provesrc.display('notification name');
Trigger a notification display for a specific product:
provesrc.display('notification name', 'productId');
This will only work with platform notifications (shopify, woocommerce, wix, etc) or with webhooks notifications where you send a guid parameter (string/number) that represents the product ID, or whatever.
Dynamic Message Template / Variables
You can create dynamic messages by using webhook data and message parameters (does not require JS API):
Read more about it in the Setup Custom Webhook guide.
Or you can use client-side dynamic variables to change the notification message based on the page the user is on:
Trigger a notification with dynamic variables (parameters are just an example, you can use any key names):
provesrc.display('notification name', flightNumber, {
destination: 'New York',
from: 'Tel Aviv'
});
The notification message would need to have template string similar to this:
Booked a flight from {{from}} to {{destination}}
You can also use the image reserved key to change the notification image dynamically:
provesrc.display('notification name', null, { image: 'https://...' });
Example: dynamic promotional/informational messages
Create an Informational notification.
In the Message step of the notification write something like:
"order {{product}} today to get free shipping"
product is a template and will be replaced in realtime.Add a piece of code to your product pages that looks like this:
provesrc.display('notification name', null, {
product: 'productXYZ',
});Advanced A/B testing
Our basic A/B testing guide lets you test you website with/without ProveSource.
If you want to test specific notifications you can use the display function:
// Test Variant Code
provesrc.display('tested notification name');
Sometimes the A/B test variant code will execute before ProveSource is loaded and it can cause errors, to avoid that we can use setInterval or the ProveSource notification queue:
// interval option
var psInterval = setInterval(function() {
if(provesrc && provesrc.display) {
provesrc.display('tested notification');
clearInterval(psInterval);
}
});
//OR use queue
window.dq = [{ n: 'tested notification' }];
Stop/Resume
To make ProveSource stop showing notifications:
provesrc.stop()
This will make ProveSource clear the notification queue and stop showing notifications
If you later want to restart the ProveSource notification queue use:
provesrc.resume()
Remove any pending notifications waiting to be displayed (useful for SPA websites):
provesrc.Q.reset()