Instalment Widget

Easily add a widget to your website showing monthly instalment prices.

Instalment Widget

Overview

The Mobicred Instalment Calculator Widget is a simple, yet configurable piece of code that can be added to any HTML-based web page where the need to display instalment pricing is needed.

The widget accepts multiple parameters allowing for easy configuration and customisation - from the text that displays on the widget to the fonts, colours and even layout.

Through custom parameters you are able to configure the widget to match your websites look and feel and provide a seamless user experience to your customers.

The online code generator allows you to configure as many widgets as you like.

Example Widget

Once you have successfully implemented the widget and have passed in the "Amount" variable, the widget will display the requested information wherever you add it.

The example widget below is calculating a monthly instalment value based on a R1000 purchase price:

Implementation

In order to implement the Instalment Widget onto your website, add the script below to either your header or footer:

<script src="https://app.mobicredwidget.co.za/assets/js/instalment.js"></script>

Then once the script has been installed, paste the HTML code below wherever you would like the widget to appear:

<div id="instalmentCalc" data-amount="1000"></div>

Please note that only one instance of the widget can be implemented per page! The above example represents the most basic implementation of the widget and will use the application's default values to generate your widget. Should you wish to customise either the text or styling check out the Configuration tab for more information.

Passing in the Finance Amount

In order for the widget to work correctly, you will need to dynamically pass the numeric value you want to offer finance on into the widget's data-amount property. Depending on your development environment this can be accomplished in many ways. We will not offer support on this aspect of the integration, however if you would like assistance on the integration, please log a ticket with us.

Configuration

The following parameters can be added to the HTML code in order to customise and control the look and feel of your widget.

The only required parameter is data-amount. Without this, the widget cannot calculate your instalment price!

Name Description Example
data-amount The total amount to be financed. 1000
data-before The text that displays before the instalment amount. Credit Amount:
data-after The text that displays after the instalment amount. per month
data-textColor The text colour of the widget. Use inherit to use your default site font. #666
data-bgColor The background colour of the widget. Use transparent to use your default site colour. #FFF
data-padding The padding around your widget. Just use a numeric value, excluding px or any other size variable. 0
data-margin The margin around your widget. Just use a numeric value, excluding px or any other size variable. 5
data-fontFamily The font to be used on the widget. Use inherit to use your default site font. 5
data-fontSize The font size to be used on the widget. Use inherit to use your default site font size. Just use a numeric value, excluding px or any other size variable. 16
data-fontWeight The font weight to be used on the widget. Use inherit to use your default site font or use any valid font-weight variable. normal
data-merchantId Your Mobicred Merchant ID. This is used for tracking of new applications. If you do not include this ID we won't be able to tell you how many sign-ups you received from the widget. 12345

Below is an example of a widget making use of ALL the parameter options:

<div id="instalmentCalc"
   data-amount="1000"
   data-before="Credit Amount:"
   data-after="per month"
   data-textColor="#666"
   data-bgColor="transparent"
   data-padding="0"
   data-margin="5"
   data-fontFamily="inherit"
   data-fontSize="16"
   data-fontWeight="normal"
   data-merchantId="12345">
</div>

Integrations

While each implementation is different and different websites might make use of different environments/configurations or setups, below are some of the most commonlu used integration methods and how to use them.

Should a specific method not work, please view the documentation of your platform and research how to access the "product" object and return its price dynamically. With this information you can pass that variable into the widget.

When using WooCommerce, the most common place to display the Instalment Widget would be on the product detail page.

When working on this template page, you will have access to the $product object.

Using this object you can choose from one of the three core fields, or any custom fields you might have created / have access to:

  • $product->get_price();
  • $product->get_regular_price();
  • $product->get_sale_price();

With any of these variables you can make use of PHP's echo option to display the value on the page.

Using this value, you can now pass the php variable directly into the data-amount property to dynamically add the price the widget.

Depending on your requirements and where you would like to display the widget, we would recommend editing the price.php partial under the single-product folder in the WooCommerce template files. You can place the widget code directly under the price-wrapper div.

<div id="instalmentCalc"
data-amount="<?php echo $product->get_price() ;?>"
data-before="Credit Amount:"
data-after="per month"
data-textColor="#666"
data-bgColor="transparent"
data-padding="0"
data-margin="5"
data-fontFamily="inherit"
data-fontSize="16"
data-fontWeight="normal"> </div>

When using Shopify, the most common place to display the Instalment Widget would be on the product detail page.

You can find this under your Theme code in the "Sections" folder. Look for the product-template.liquid file and place the code below the "price" section. (Around lines 80-100 if you are using a standard template.)

When working on this template page, you will have access to the product object.

Using this object you can gain access to the product.price variable. Due to how Shopify formats currency, you will need to make a few small modifications in order to pass the currency value in correctly.

Once you have added in the necessary currency conversion, you can now pass the variable directly into the data-amount property to dynamically add the price the widget:


<div id="instalmentCalc"
data-amount="{{product.price | money_without_currency | replace:',','' }}"
data-before="Credit Amount:"
data-after="per month"
data-textColor="#666"
data-bgColor="transparent"
data-padding="0"
data-margin="5"
data-fontFamily="inherit"
data-fontSize="16"
data-fontWeight="normal"> </div>

When using Magento, the most common place to display the Instalment Widget would be on the product detail page.

When working on this template page, you will have access to the getProduct(); function.

Using this fuction you can get access to the final selling price by accessing:

  • $this->getFinalPrice()

Using this value, you can now pass the variable directly into the data-amount property to dynamically add the price the widget:

<div id="instalmentCalc"
data-amount="$this->getFinalPrice();"
data-before="Credit Amount:"
data-after="per month"
data-textColor="#666"
data-bgColor="transparent"
data-padding="0"
data-margin="5"
data-fontFamily="inherit"
data-fontSize="16"
data-fontWeight="normal"> </div>

When using PrestaShop, the most common place to display the Instalment Widget would be on the product detail page.

You can find this under your Theme folder. Look for the product.tpl file and place the code below the "price" section.

When working on this template page, you will have access to the product object.

Using this object you can gain access to the productPrice variable.

Once you have this, you can pass the variable directly into the data-amount property to dynamically add the price the widget:


<div id="instalmentCalc"
data-amount="{$productPrice}"
data-before="Credit Amount:"
data-after="per month"
data-textColor="#666"
data-bgColor="transparent"
data-padding="0"
data-margin="5"
data-fontFamily="inherit"
data-fontSize="16"
data-fontWeight="normal"> </div>

When using OpenCart, the most common place to display the Instalment Widget would be on the product detail page.

You can find this under your Theme folder. Browse to: catalog > view > theme > [your-theme-name] > template > product. Look for the product.tpl file and place the code below the "price" section.

When working on this template page, you will have access to the product object.

Using this object you can gain access to the price variable.

Once you have this, you can pass the variable directly into the data-amount property to dynamically add the price the widget:


<div id="instalmentCalc"
data-amount="<?php echo $price;?>"
data-before="Credit Amount:"
data-after="per month"
data-textColor="#666"
data-bgColor="transparent"
data-padding="0"
data-margin="5"
data-fontFamily="inherit"
data-fontSize="16"
data-fontWeight="normal"> </div>

When using ACF (Advanced Custom Fields) in Wordpress, the most common place to display the Instalment Widget would be on the product detail page.

When working inside your query, you will have access to your custom fields. One of these fields will be labelled as your product price. For example:

  • the_field('product_price');
  • the_field('price');
  • the_field('selling_price');

With access to any of these fields you can make use of PHP's echo option to display the value on the page.

Using this value, you can now pass the php variable directly into the data-amount property to dynamically add the price the widget:

<div id="instalmentCalc"
data-amount="<?php echo the_field('product_price') ;?>"
data-before="Credit Amount:"
data-after="per month"
data-textColor="#666"
data-bgColor="transparent"
data-padding="0"
data-margin="5"
data-fontFamily="inherit"
data-fontSize="16"
data-fontWeight="normal"> </div>

Code Generator

Complete the form below to build your custom widget. Once submitted your widget code will generate automatically for you and a preview of the widget will be displayed.

Conflicts

The Mobicred Instalment Calculator Widget relies on jQuery to function. We make use of the latest version of jQuery (3.3.1), however if your website runs an older version or you might get a conflict. If you do, we have versions of the script for each of the stable jQuery versions - simply switch out the script.

v3.3.1
<script src="https://app.mobicredwidget.co.za/assets/js/instalment.js"></script>
v2.2.4
<script src="https://app.mobicredwidget.co.za/assets/js/instalment224.js"></script>
v1.12.4
<script src="https://app.mobicredwidget.co.za/assets/js/instalment1124.js"></script>