.png%3Falt%3Dmedia%26token%3D02e7cbad-1e96-42fa-8180-8b13eae9712e)
.png%3Falt%3Dmedia%26token%3D02e7cbad-1e96-42fa-8180-8b13eae9712e)
On-Site Messaging
Splitit's On-Site Messaging provides you with completely customizable UI elements that you can use to inform your customers early on in their journey on your website that installments will be available at checkout. Available for you to add to your HTML are strips, banners, installments one liners and floating logos.
Simply add the below script into your
<head> tag, adding your Splitit API key, and specifying language (ISO 639-1), currency (ISO 4217), and environment (i.e. sandbox or production).Strips show Splitit in an unobtrusive line across the bottom or top of your page. You can customize a strip's text, button text, text size, page position, vertical alignment, background color, button background color, button text color, and the order of icon and text on the button. You can also toggle the strip's Learn More link (
hide_learn_more = "true").Banners let you add a prominent graphic element to your page instructing shoppers that installments are available on your site. Banners feature two customizable texts, a title and a main text, and also a link that opens a Learn more modal. On banners, you can customize the content, size and color of the two texts, the width and height of the banner itself, the background color of the banner, the color of the banner's text, the background color of the button, the button text's color, the order of the text and icon on the button (
button_reverse_icon="true"), and whether to show the title text (show_title="true").<spt-banner
text_title="Get installments"
text_title_color="#010000"
text_title_size="15"
text_main="Pay monthly on your credit card"
text_main_size="25"
text_main_color="#010000"
banner_width="500px"
banner_height="250px"
banner_bg_color="#94d6d0"
background_button_color="#010000"
text_button_color="#94d6d0"
button_reverse_icon="true"
show_title="true"
></spt-banner>
The installments one liner shows the shopper how much installments would be for a given time period (optionally showing number of payments), and includes a link to open a Learn more modal. Customizable options are total amount, text (presets including
payment-a-month, payment-a-month-number-of-payments, payment-fourtnightly, payment-fourtnightly-number-of-payments and fully custom text_custom="custom text"), text size, currency code, number of installments, and the color of the Learn more link; you can also hide and show the icon (hide_icon="true") or the Learn more text (hide_learn_more="true").Floating logos enable you to add a custom text along with a custom tooltip. The element lets your shopper click through to a Learn more. You can specify the logo's text, the example amount of the installment plan under Learn more, the tooltip's title and text, the text size of the logo, the currency code, and the element's location (
docking="top_left", "top_right", "bottom_left", or "bottom_right"). You can also specify the logo's color and the background color of the entire element. Finally you can hide the Learn more (hide_learn_more="true") and the tooltip (hide_tooltip="true").<spt-floating-logo
logo_text="Pay with Installments"
amount="100"
tooltip_text="Remaining installments are taken from your existing credit."
tooltip_title="Installments significantly reduce your initial outlay"
text_size="25"
currency_code="CAD"
docking="top_left"
logo_color="#c62a2a"
bg_color="#ffffff"
></spt-floating-logo>
Last modified 4mo ago