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.
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.
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:
id = merchant id. productPrice = Product price.
The price-info widget will display differently depending on the merchant id and price passed to it.
The widget will display the longest term if there are multiple term offers for the supplied PLACE_MERCHANT_ID and PLACE_YOUR_PRODUCT_PRICE.
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:
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:
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.
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
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.
Updated over 1 year ago