Promotional components

Promotional components allows you to display promotional widgets and educational pop-ups that shows and explains which seQura products the shopper offers and how they work, which will help the shop increase average order value and conversion rates. Both components are dynamic and asynchronously generated using the same SeQura’s Javascript library.

SeQura Javascript library takes care of rendering the promotional widgets and setting up the educational pop-up opening trigger on the DOM elements you choose for the shop.

1. Loading seQura Javascript library

In order to load seQura Javascript library you need to include in your page header template the following script passing the required configuration:

<script>
  var sequraConfigParams = {
    merchant: "YOUR_MERCHANT", // Your merchant reference given by SeQura.
    assetKey: "YOUR_ASSET_KEY", // Your asset key given by SeQura.
    products: ["i1", "pp3"], // List of seQura products that you want to include components.
    scriptUri: "SCRIPT_URI", // seQura Javascript library uri for production or sandbox.
    decimalSeparator: ",", // Decimal separator used in currencies formatting. Optional, default `,`.
    thousandSeparator: ".", // Thousand separator used in currencies formatting. Optional, default `.`.
    locale: "es-ES", // Language and country codes separated by hyphen -. Optional, default `es-ES`.
    currency: "EUR", // Currency code available for chosen locale. Optional, default `EUR`.
  };

  (function(i, s, o, g, r, a, m) {i["SequraConfiguration"] = g;i["SequraOnLoad"] = [];i[r] = {};i[r][a] = function(callback) {i["SequraOnLoad"].push(callback);};(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);a.async = 1;a.src = g.scriptUri;m.parentNode.insertBefore(a, m);})(window, document, "script", sequraConfigParams, "Sequra", "onLoad");
</script>

Configuration parameters

2. Setting up placeholder elements

When seQura Javascript library is loaded it searches all DOM elements with classes sequra-promotion-widget and sequra-educational-popup and dynamically configure the widgets.

Promotion widget

In order to set up a promotion widget you must add a placeholder element in your template with the class sequra-promotion-widget and the attributes product and amount with the seQura product that you want to promote. You can add as many promotion widgets as you want.

Note The configuration will fallback to default parameter value if any parameter is invalid

We strongly recommend to set a fixed height on the sequra-promotion-widget placeholder element, in order to prevent this container height bounce while the contents of the widget are being loaded. This bounce can lead to SEO performance and usability issues. You can set this height on your CSS stylesheet, or directly applying an style tag to the element.

Usage example

Instalment simulator with black logo

<div
  class="sequra-promotion-widget"
  data-amount="15000"
  data-product="pp3"
  data-size="L"
  data-branding="black"
  style="height:80px;"
></div>

Invoicing claim with green logo

<div
  class="sequra-promotion-widget"
  data-amount="1500"
  data-product="i1"
  data-alignment="center"
></div>

Educational pop-up

In order to set up an educational pop-up you must add a placeholder element in your template with the class sequra-educational-popup and the attribute product with the seQura product that you want to promote. You can add as many educational pop-ups as you want. Optionally you can configure the amount and campaign to be displayed in the pop-up. In this case the library will render a hidden pop-up and add an event listener to the DOM element to open the pop-up when it is clicked.

Parameters

Example

<span
  class="sequra-educational-popup"
  data-amount="15000"
  data-product="pp3"
></span>
<span
  class="sequra-educational-popup"
  data-amount="1500"
  data-product="i1"
></span>

3. Updating pricing

When some of the prices configured in Promotional components changes, you may want to refresh those values in each of the components. To do it you must call SeQura.refreshComponents() after updating components amount attributes.

Note that the recommended way to load SeQura’s Javascript library is asynchronously, so if you want to statically call refreshComponents you must wrap it over Sequra.onLoad callback.

Sequra.onLoad(function () {
  Sequra.refreshComponents();
});