Skip to main content
All CollectionsRivo Accounts
Adding your own custom Javascript

Adding your own custom Javascript

Callbacks, custom javascript and light reloading after login

James Dohm avatar
Written by James Dohm
Updated this week

Adding your own custom Javascript

You can add any javascript directly – on the Rivo accounts settings page under Javascript Settings for Developers near the bottom of the page.

Onload Javascript

Add any javascript you want to run when the widget loads

On Hash Change Javascript

Add any javascript you want to run when the URL hash changes

Post Sign In Javascript

Add any javascript you want to run after the user signs in

Callbacks

rivo-accounts:initialized 
rivo-accounts:loaded
rivo-accounts:widget:open 
rivo-accounts:widget:close
rivo-accounts:cart:add 
rivo-accounts:items:updated
rivo-accounts:items:removed
rivo-accounts:shopify:login 
rivo-accounts:shopify:logout

When to use Reload After Login

This is a 'light' reload and won't cause any slowdown. We recommend enabling the reload after login because a page load is good for many authentication reasons after someone is signed in.

Examples

1. Display Cash Equivalent of Points

Add the following code on the Onload Javascript section:

RivoJS.getCustomerDetails().then(function(resp) {
if (resp.pretty_points_tally) {
// Remove commas and convert to number
var numericPoints = parseFloat(resp.pretty_points_tally.replace(/,/g, ''));

// Calculate the cash value
var cashValue = (numericPoints * 0.01).toFixed(2);

// Find the element displaying the points number
var pointsNumberElement = document.querySelector(".rivo-pretty-points-balance.rivo-aw-button-points-balance-number");

// Find or create the element to display the cash value
var cashValueElement = document.querySelector(".rivo-pretty-points-cash-value");
if (!cashValueElement) {
cashValueElement = document.createElement('div');
cashValueElement.className = 'rivo-pretty-points-cash-value';
pointsNumberElement.parentNode.insertBefore(cashValueElement, pointsNumberElement.nextSibling);
}

// Ensure the elements exist and update their content
if (pointsNumberElement && cashValueElement) {
pointsNumberElement.textContent = `${resp.pretty_points_tally} points`;
cashValueElement.innerHTML = `=  $${cashValue}`;
}
}
});

Then add some extra CSS styling in the Custom CSS section:
​

/* --- Modifying Cash Balance Display -- */

.rivo-aw-button-points-balance-currency {
display: none;
}

.rivo-pretty-points-balance.rivo-aw-button-points-balance-number {
font-size: 16px;
}


2. Display Store Credit

If you're running a store credit program, using the following snippet to load store credit.

Add the following code on the Onload Javascript section:

RivoJS.getCustomerDetails().then(function(resp) {
if (resp.pretty_credits_tally) {
// Find the element displaying the points number
var pointsNumberElement = document.querySelector(".rivo-pretty-points-balance.rivo-aw-button-points-balance-number");

// Ensure the element exists and update its content
if (pointsNumberElement) {
pointsNumberElement.textContent = resp.pretty_credits_tally;
}
}
});

Did this answer your question?