Improve Conversion With Promotional Messaging
Show Nelo financing options at checkout and on product pages improves conversion and average order value. Nelo offers a javascript library, Nelo.js, which makes it easy to add specific financing offers and educational content with just a few lines of HTML.
For example, you might use Nelo.js to show "Desde $318 quincenale" below your "Add to card button" or "6 pagos sin intereses" below the Nelo option at checkout. You can also use Nelo.js to show education content explaining how Nelo enables your customer to spread their purchase out over time.
How it works
To add promotional messaging to your product pages or checkout page, you do two things:
1.) Add an empty dom element (div, paragraph, etc.) with a Nelo-specific class name
2.) Add Nelo.js to your page
Nelo.js searches for elements with specific class names when initialized and replaces the contents of those elements with specific offers, education content, and other marketing content based on the specific class name and data attributes you specify.
Getting started
1.) Add Nelo.js
Add the following to your <head> tag:
<script>
_neloConfig = {
publishableKey: 'YOUR_PUBLISHABLE_KEY'
};
</script>
<script src="https://js.nelo.co/v1/nelo.js" defer></script>The defer attribute means that Nelo.js will load asynchronously and will execute after your page renders, so it will not affect the performance of your page.
2.) Add promotional elements
Add promotional elements to your HTML template, and Nelo.js will automatically fill them based on the class and data attributes you specify.
Nelo as low as example code:
<div class="nelo-as-low-as" data-amount="10000" data-currency-code="MXN"></div>Education card example code:
<div class="nelo-education-card" data-collapsed="false" data-curpage-type="cart"></div>Supported classes:
Class Name | Description | Data Attributes |
|---|---|---|
| A short string showing your customer how low their payments can be with Nelo. This is recommended for use both on your checkout page and your product pages |
|
| An expandable / collapsable section explaining how Nelo works and how customers can use Nelo to pay for your products over time. |
|
That's it! There is no step 3.
Advanced use and customization
Updating prices and state
Nelo.js automatically updates promotional message components when you update data attributes. Nelo.js uses MutationObservers to be notified efficiently of changes to these attributes.
If you are using a frontend framework like React, updates to those attributes are made automatically by the framework when you update state. But to do so directly:
const elements = document.querySelectorAll('.nelo-as-low-as');
for (let i=0; i < elements.length; i++) {
elements[i].setAttribute('data-amount', newPriceInCentavos);
}Localization
By default, Nelo localizes promotional messaging based on the user's preferred language (as indicated by the browser's default Accept-Language header). If, however, your website does not support localization, or you allow the user to set a preferred language directly, you can override this behavior by specifying an acceptLanguage property in _neloConfig. Currently, Nelo supports localization in Spanish and English.
<script>
_neloConfig = {
publishableKey: 'YOUR_PUBLISHABLE_KEY',
acceptLanguage: 'es-MX'
};
</script>Sandbox and production environment
Nelo.js defaults to the production environment, but you can configure it to call Nelo's sandbox environment, which is useful for testing:
<script>
_neloConfig = {
publishableKey: 'YOUR_SANDBOX_PUBLISHABLE_KEY',
environment: 'sandbox'
};
</script>
<script src="https://js.nelo.co/v1/nelo.js" defer></script>Customization
Promotional messaging can be configured to use custom templates and styling specific to your business. Additionally, you can override styling directly via CSS. For more information, please contact your Nelo representative or email [email protected].
Updated 21 days ago