Skip to main content

On-Site Messaging Guide

Installation​

Installing On-Site Messaging simply consists of adding a script to your <head> tag, then calling in the individual elements as HTML tags.

  1. Add the below script into your <head> tag, adding:
    • your Splitit API key (to find your API key, see the dropdown below)
    • your language/culture of choice (in ISO 639-1 format; see list in the dropdown at end of section if you don't know it)
<script src="https://web-components.splitit.com/v2/upstream.js?api-key={{YOUR API KEY}}&lang={{YOUR LANGUAGE}}" async></script>
></script>

Example:

<script src="https://web-components.splitit.com/v2/upstream.js?api-key=7ce8093c-388f-4dc9-ba67-5db9fd072c5&lang=en-US" async></script>`
Finding Your API Key
  1. Go to your Merchant Hub and login
  2. Click Merchants Management at left
  3. Select your desired merchant from the table
  4. Choose Terminals at left
  5. Your API key is your Terminal Id
Languages (Cultures) supported by On-Site Messaging (ISO 639-1 values)

en-US (English-US; default)

da-DK (Danish)

de-DE (German)

en-GB (English-UK)

es-ES (Spanish)

fr-FR (French)

ja-JP (Japanese)

it-IT (Italian)

nl-NL (Dutch)

pt-PT (Portuguese)

zh-CN (Chinese)

ko-KR (Korean)

sv-SE (Swedish)

tr-TR (Turkish)

ro-RO (Romanian)

hr-HR (Croatian)

cs-CZ (Czech)

sk-SK (Slovak)

Elements​

Strips​

Strips show Splitit in an unobtrusive line across the bottom or top of your page (you can also put them anywhere within your page, or attach them within a parent element). You can customize a strip's text size (small, medium, large), text alignment (left, center, right) and its background and text colors. As mentioned, with respect to positioning, you can set the strip to appear:

  • fixed at the top or bottom of your entire page (position="top" (default) or position="bottom")
  • in its relative position in the document flow (is_solid="true"; this overrides any fixed top or bottom setting)
  • relative to a parent element (relative_to_parent="true"; note that you can still apply position="top", position="bottom" or is_solid="true" within the parent element)
Strips HTML (All Parameters)
<spt-strip
	text_size="medium"
	text_alignment="center"
	background_color="#72c9b7"
	text_color="#FFFFFF"
	position="top"
	
	<!-- Other Options -->
	is_solid="true"
	relative_to_parent="true"
/>

One Liners​

One Liners communicate to your shopper how little they could pay each month to acquire your item (they can also pay every two weeks). You set the total amount of the plan, the number of installments, payment interval (monthly, bi-weekly) and the ISO-4217 currency code (note that this must be set in addition to the culture setting in <head>; see available codes in the playground). You can customize text size (small, medium, large), text color, whether you want to show an info icon the user can click for more info (show_info_icon), and three text options:

  • oneliner_option_1 is "4 monthly payments of $25.00"
  • oneliner_option_2 is "$25.00/month for 4 months"
  • oneliner_option_3 is "Pay with Splitit $25.00/month" )
One Liner HTML (All Parameters)
<spt-one-liner
	amount="100" 
	installments="4" 
	interval="monthly"
	currency_code="USD"
	text_size="large" 
	text_color="#780000"
	text_option="oneliner_option_3"
	show_info_icon="true"
/>