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;
}
}
});