Splitit Upstream Messaging Wiki

Library Version: 1.3.51

This page contains information on how to integrate Splitit™ upstream messaging to your webshop in few quick steps.

Getting started

Step 1: Embed Splitit™ script into your existing site

Copy and paste this code snippet to your website. This script has no dependencies.

Note: Replace highlighted portion with the API Key provided to you by Splitit.

Step 2: Define HTML elements which will contain Splitit content

The code below is needed for minimum setup:

Key Concepts

Initialization parameters

The highlighted line in this source example initializes the plugin. It is possible to customize the following settings on plugin initialization:

Parameter Default value Description
lang en Suported language is currently only English (en).
currency USD
currencySymbol $ Currency symbol to display next to monthly price. Examples: '$', '€', '£'.
debug false Errors and information regarding some of the plugin actions are printed to console if set to true.

Configuring placements

Additionally, it is possible to customize the following parameters when initializing placements.

Parameter Description
data-splitit required Flag indicating which element will be a container for splitit elements.
data-splitit-amount required Total amount which is to be splitted in installments.
data-splitit-num-installments optional Maximum number of installments when calculating price within promotional message text. If not provided, defaults to 3 installments.
data-splitit-type required Possible values: banner-top, banner-bottom,product-description
data-splitit-style-align optional Customize the text align CSS attribute directly. Default: inherits from parent element for product placements, defaults to center for banner placements.
data-splitit-font-size optional Number indicating the font size within the box. Default: inherits from parent container. Example: data-splitit-font-size="18".
data-splitit-style-font-family optional Customize the font family CSS attribute directly. Defaults to Arial, Helvetica, sans-serif.
data-splitit-logo-height optional Number indicating the logo height, defaults to30px. Example: data-splitit-logo-height="30".
data-splitit-style-text-color optional Customize the font color CSS attribute directly. Defaults to black.
data-splitit-style-banner-border optional Customize border style for banner. Defaults to 1px solid #eee, but if set to none, then no border is shown.
data-splitit-logo optional Available options: purple (default), black and white. White logo looks better on the dark background, while black logo is preferred on light backgrounds.
data-splitit-content optional Provide full content customization based on your needs. See Full Customization section for more information.

For a list of examples, please refer to this source code.

Setting placement location

Please note that the host site should specify exact container positioning. For instance, for banner-top, one such example could be setting the container in absolute position above everything else on the website:

Dynamic interaction

If price for the product changes, set the data-splitit-amount attribute to new value and call splitit.ui.refresh(). Example usage can be seen in this this code snippet.

If site language or currency is changed, it is possible to modify the display language and currency symbol. Example usage can be seen this this code snippet.

Language customization

Customize display messages for specific language by overriding the default configuration parameters. For instance, it is possible to provide different text based on the viewing device or location: simply add additional language for that particular view. The following code shows how to add custom text for english language which will be displayed on mobile devices, and it is named en_m. The name is optional.

Advanced language customization

It is also possible, for additional styling, to input text in the format explained in this snippet , where each word is separately defined as a list element, and tags array contains an identifier for each word which will be added as HTML class for each word.

CSS Styling

Examine the generated HTML for specific classes used and override with CSS !important specificator. For example, setting only price text font bigger is explained in this snippet. Similar technique can be applied to setting any desired UI element generated by Splitit script.

For simple scenarios, and customizing some of the predefined attributes, please refer to this section.

Placeholders

Splitit upstream messaging offers several common placeholders which can be utilized on your website with minimum effort.

If you wish to display Splitit logo anywhere on your website, the easiest way is to implement it with the following code snippet:

Available logo colors are: black(default), white, purple and informative.

Placeholder: Payment options

Showing the payment options is seamless with the following snippet:

data-splitit-cards attribute is not required, and if omitted mastercard and visa are shown. List of supported cards: amex, dinersclub, discover, jcb, maestro, mastercard, visa, visaelectron, unionpay. Cards are rendered in order as defined in the data-splitit-cards attribute.

Placeholder: Splitit banner

Showing one of the many Splitit banners available with just one line of HTML code:

For banner to display, it is necessary to use img HTML tag, with width or height set to one of the available dimensions and data-splitit-banner attribute set to one of the available banner names. Here is a list of currently available banners and instructions on how to show them:

Width Height Name
336 280 color:shop-splitit-pay-your-terms
336 280 white:shop-splitit-pay-your-terms
336 280 color-img:shop-splitit-pay-your-terms
336 280 white-img:shop-splitit-pay-your-terms
160 600 color:use-cc-pay-over-time
160 600 white:use-cc-pay-over-time
160 600 color:shop-splitit-pay-your-terms
160 600 white:shop-splitit-pay-your-terms
336 280 color:use-cc-pay-over-time
336 280 white:use-cc-pay-over-time
336 280 color-img:use-cc-pay-over-time
336 280 white-img:use-cc-pay-over-time
728 90 color:use-cc-pay-over-time
728 90 white:use-cc-pay-over-time
728 90 color:shop-splitit-pay-your-terms
728 90 white:shop-splitit-pay-your-terms

Full customization

It is possible to entirely define HTML content for Splitit integration content, but in that case host site should take care of possible language updates or changes. Splitit will only update the price if it changes. The example below refers to one possible setup for such scenario.

Also, it is possible to define templates for specific languages, and on language change, appropriate one will be displayed:

External Components

Payment calculator

As part of Splitit toolkit, Payment Schedule Calculator component is available at the following url: https://hosted.production.splitit.com/js/dist/splitit.payment-schedule-calculator.js. This tool enables you to calculate the predefined payment schedule for the given amount and number of installments. The example usage can be seen in this source code.

Examples

Feel free to browser through some of the examples already prepared by Splitit team.