Promotional components

Promotional components let you display widgets and pop-ups that show shoppers which seQura products you offer and how they work. This helps increase average order value and conversion rates. Both components are dynamic and load asynchronously via seQura's JavaScript library.

seQura's JavaScript library renders promotional widgets and sets up pop-up triggers on your chosen DOM elements.

1. Loading seQura JavaScript library

Include this script in your page header with 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 loaded, seQura's JavaScript library finds all DOM elements with classes sequra-promotion-widget and sequra-educational-popup and configures them dynamically.

Promotion widget

Add a placeholder element with the class sequra-promotion-widget and product and amount attributes for the seQura product you want to promote. You can add multiple promotion widgets.

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

We strongly recommend setting a fixed height on the sequra-promotion-widget placeholder to prevent layout shift while the widget loads. Layout shift can hurt SEO and usability. Set the height in your CSS or directly with a style attribute.

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

Add a placeholder element with the class sequra-educational-popup and a product attribute for the seQura product you want to promote. You can add multiple educational pop-ups. Optionally configure amount and campaign. The library renders a hidden pop-up and adds a click event listener to open it.

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 prices change, refresh the components by calling Sequra.refreshComponents() after updating the amount attributes.

Since seQura's JavaScript library loads asynchronously, wrap static calls to refreshComponents in Sequra.onLoad:

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