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.

Overview

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. Include the SeQura Javascript library code to load Sequra.js on your page header template.
  2. Add the placeholder HTML elements for the promotional widgets and/or educational pop-ups that you want to load on your page.
  3. Set up the pricing updating by modifying the data-amount element and refreshing the SeQura components (Optional).

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

Key Mandatory Default Description
merchant Yes Your merchant reference given by SeQura.
assetKey Yes Your asset key given by SeQura.
products Yes List of products for the components that you want to include in the page.
scriptUri Yes SeQura Javascript library uri for production or sandbox.
Sandbox: https://sandbox.sequracdn.com/assets/sequra-checkout.min.js.
Production: https://live.sequracdn.com/assets/sequra-checkout.min.js.
decimalSeparator No , Decimal separator used in all number formatting included in the components.
thousandSeparator No . Thousand separator used in all number formatting included in the components.
locale No es-ES Locale configuration used for display format settings.
currency No EUR Currency code used for currency format, this should be available for the chosen locale configuration.

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.

Parameters

Key Mandatory Default Description
class Yes Must be sequra-promotion-widget
type No text Configures the layout. Must be one of text or banner.
size No M Configures the size. Must be one of S (small), M (medium) or L (large).
font-color No #353735 Configures the font color used. Must be a valid css color.
background-color No transparent Configures the main color used. Must be a valid css color.
alignment No center Configures the alignment of the widget. Must be one of left, center or right.
branding No default Configures the logo displayed in the widget. Must be one of none (no SeQura logo), white (white SeQura logo), black (black SeQura logo) or default (SeQura original logo).
starting-text No only Starting text options for pp3/pp6 text type. Must be only or as-low-as.
amount-font-size No Configures the font size in pixels for the displayed amounts. Must be a number.
amount-font-color No Configures the font color for the displayed amounts. Must be a valid css color.
amount-font-bold No Configures font weight for displayed amounts. Must be true or false.
link-font-color No Configures the + info links color. Must be a valid css color.
link-underline No Configures the + info links underline presence. Must be true or false.
border-color No Configures the border colors. Must be a valid css color.
border-radius No Configures the border radius in pixels. Must be a number.
no-costs-claim No free Sets all the promotional components texts that say “¡Gratis!” to “¡Sin costes!” if it's set to witout-cost. Must be free or without-cost.

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

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

Key Mandatory Description
class Yes Must be sequra-educational-popup
product Yes SeQura product that you want to promote.
amount No Amount of the purchase or product that you want to display the pop-up. Must be in cents, for instance 15,00 € is represented as 1500.
campaign No SeQura campaign that you want to promote. Mandatory for pp5 product.

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();
});