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 given
Show 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()