ProveSource JS API

Learn how to show social proof notifications using javascript code in your website, for more customization like templates and display rules

Natan Abramov avatar
Written by Natan Abramov
Updated today

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

  1. Create an Informational notification.

  2. 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.

  3. 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()
Did this answer your question?