Pricing Widget

Introduction

Placing Humm widgets on your website is a great way to introduce Humm to your users and drive more sales through your online store. The following documentation will guide you through the process of getting Humm widgets displayed on your website.

What is a widget

In the context of this documentation, a widget is a banner or tag that will open a modal dialog (a.k.a. popup) when clicked. The content of the modal dialog can be any web-page.

Price-info Widget

To use the price-info widget, simply insert the corresponding script to where you want the price-info widget to be be displayed. Replace PLACE_MERCHANT_ID and PLACE_YOUR_PRODUCT_PRICE with the price of the product.

The basic format of the widget is:

Ireland

<script src="https://d3v2ir16k1una.cloudfront.net/content/scripts/flexifi-widget.js?id=PLACE_MERCHANT_ID&productPrice=PLACE_YOUR_PRODUCT_PRICE"></script>

<script src="https://d43faevptg79a.cloudfront.net/content/scripts/flexifi-widget.js?id=PLACE_MERCHANT_ID&productPrice=PLACE_YOUR_PRODUCT_PRICE"></script>

Canada

<script src="https://d3r8vfwymw8fxa.cloudfront.net/content/scripts/flexifi-widget.js?id=PLACE_MERCHANT_ID&productPrice=PLACE_YOUR_PRODUCT_PRICE"></script>

Where:

id = merchant id.

productPrice = Product price.

Example

The price-info widget will display differently depending on the merchant id and price passed to it.

Widget behavior

The widget will display the longest term if there are multiple term offers for the supplied PLACE_MERCHANT_ID and PLACE_YOUR_PRODUCT_PRICE.

Widget features

Dynamically get product price

Instead of passing in a fixed productPrice value, you can provide a price-selector query argument to target the HTML element containing the product price. In this instance, the price-info widget will get the product price from the specified element, and dynamically update when the price is changed.

For instances where the price of the product dynamically updates as a result of user selection, or you have multiple products on the same page, our price-info widget can dynamically get the product price from a specified HTML element in the page.

With this feature, you can provide a URL encoded jQuery style CSS selector and it will bind a call back to the DOMSubTreeModified event.
If the price is modified, it will update the payment info accordingly.

For example, if this is a block of HTML displaying the product price:

<span id="priceinfo">€99.99</span>

Product Price: €99.99

in this case, we use the urlencoded %23priceinfo to refer to the id #priceinfo and enable the monitor parameter such that the widget code would look like the below:

<script src="http://d3v2ir16k1una.cloudfront.net/content/scripts/flexifi-widget.js?id=PLACE_MERCHANT_ID&price-selector=%23priceinfo&monitor=true"></script>

Display specific term

By default, the widget will display the longest term based on the merchant and price. To force the widget to display a specifi term, you can provide a term query argument. If the term isn't available for the given price, the widget will not display.

In this example, the price €800 has 6 month and 12 month terms available. By default the widget will display 12 months, by adding the term argument with value 6, the widget will provide the 6 month term option.

<script src="http://d3v2ir16k1una.cloudfront.net/content/scripts/flexifi-widget.js?id=PLACE_MERCHANT_ID&productPrice=800&term=6"></script>

Minimum and Maximum (Optional)

To alter the Price-info widget based on the price passed to it, you may set the minimum and maximum values it will display for.

This is done by setting the data-min and data-max fields when calling the Price-info widget script as seen below:

<script data-min="80" data-max="300" src="https://d3v2ir16k1una.cloudfront.net/content/scripts/flexifi-widget.js?id=PLACE_MERCHANT_ID&productPrice=YOUR_PRICE"></script>

In this example, the Price-info widget will display a generic template if the product price is above €300 and is below €80

Adding a Widget to your Website

Step 1: Place the widget script tag under the product price to appear on the product pages on your website.

Step 2: Save and you should see a working widget on your website.