This page contains information on how to integrate Splitit™ upstream messaging to your webshop in few quick steps.
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.
The code below is needed for minimum setup:
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. |
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.
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:
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.
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.
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.
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.
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.
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.
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 |
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:
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.
Feel free to browser through some of the examples already prepared by Splitit team.