Skip to main content

Elements

You can read about the available On-Site elements below and test their functionality. Once you have decided on the elements you'd like, make sure to visit the playground to generate your own. You should also read about recommended On-Site Messaging practices in our Integration Guide.

Banners​

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").

Banners HTML (All Parameters)
<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>

Strips​

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").

Strips HTML (All Parameters)
<spt-strip 
  strip_text="Pay every month with no application or fees"
  button_text="Learn more"
  text_size="13"
  position="top"
  text_alignment="center"
  background_color="#2a2323"
  background_button_color="#56d7b7"
  text_button_color="#181616"
  button_reverse_icon="true">
 </spt-strip>

Installments One Liner​

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").

Installments One Liner HTML
<spt-one-liner
amount="1000"
text_option="payment-a-month"
text_size="250"
currency_code="CAD"
installments="12"
learn_more_color="#cb1515"
></spt-one-liner>

Floating Logos​

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").

Floating Logos HTML
<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>