Placement Elements
Placement Elements allow you to display an installment plan calculation in one of two formats: a price breakdown or a banner. The tags
data-splitit-amount
and data-splitit-num-installments
hold your desired plan values. The automatically generated Learn More link opens a modal with educational information about Splitit and details about the future monthly installment costs (make sure to properly set lang in your initialization code so that the Learn More modal and the price breakdowns are in your preferred language or language variant (i.e. "en-GB")).Note that some examples on this page use jQuery, so you will have to import the library (jQuery is used just to make the example code simpler, the On-Site Messaging library does not require jQuery at all to function).
The two code examples below are the minimum needed for establishing Placement Elements, for a price breakdown and a banner, respectively:
<div data-splitit="true"
data-splitit-amount="150"
data-splitit-num-installments="3"
data-splitit-type="product-description">
</div>

<div data-splitit="true"
data-splitit-amount="100"
data-splitit-num-installments="3"
data-splitit-type="banner-top">
</div>

To change the color of the Splitit logo within a price breakdown or a banner, add
data-splitit-color-mode
. For example, the background color of your website may be black, so you'd like the Splitit logo to be white:<body style="background-color: black; padding: 20px; color: #dedede">
<div
data-splitit="true"
data-splitit-amount="150"
data-splitit-num-installments="3"
data-splitit-type="product-description"
data-splitit-color-mode="dark">
</div>
</body>
Conversely, you can set
data-splitit-color-mode="light"
, which is the default.The host site defines the location of Placement Elements on the page. For example, if you wanted a banner at the top of the page with a transparent background, full page width and a high z-index, you could mark up your
data-splitit
div with the following style tag:<div data-splitit="true"
data-splitit-amount="100"
data-splitit-num-installments="3"
data-splitit-type="banner-top"
style="position:absolute; top:5px; background:transparent; width:100%; z-index:99;">
</div>
<div data-splitit="true"
data-splitit-amount="100"
data-splitit-type="banner-top"
data-splitit-font-size="13"
data-splitit-style-font-family="Times New Roman"
data-splitit-style-text-color="#FF0000"
data-splitit-num-installments="2">
</div>

<div data-splitit="true"
data-splitit-amount="100"
data-splitit-type="banner-top"
data-splitit-style-align="right"
data-splitit-num-installments="5">
</div>

Adjust the border:
<div data-splitit="true"
data-splitit-amount="100"
data-splitit-type="banner-top"
data-splitit-style-banner-border="3px solid red"
data-splitit-num-installments="4">
</div>

Change the color of the Splitit logo:
<div data-splitit="true"
data-splitit-amount="100"
data-splitit-logo="black"
data-splitit-num-installments="3"
data-splitit-type="banner-top">
</div>

<div data-splitit="true"
data-splitit-amount="100"
data-splitit-logo="url"
data-splitit-logo-url="{external url}"
data-splitit-num-installments="3"
data-splitit-type="banner-top">
</div>
<div data-splitit="true"
data-splitit-amount="91"
data-splitit-type="banner-top"
data-splitit-price-round="standard"
data-splitit-num-installments="4">
</div>
<div data-splitit="true"
data-splitit-amount="100"
data-splitit-logo="white"
data-splitit-num-installments="3"
style="background:black;"
data-splitit-type="banner-top">
</div>
Change preset texts for price breakdowns by adding
data-splitit-text-option
(options are pricePerMonth
, pricePerMonthCreditCard
, noInterestMonthlyPaymentsCard
and payMonthlyOnCard
):<div data-splitit="true"
data-splitit-amount="150"
data-splitit-num-installments="3"
data-splitit-type="product-description"
data-splitit-text-option="noInterestMonthlyPaymentsCard">
</div>

Parameter | Type | Description |
---|---|---|
data-splitit | required | Flag indicating which element will be a container for Splitit elements. |
data-splitit-amount | required | The total amount to be split into installments. |
data-splitit-num-installments | optional | The maximum number of installments when calculating price within the message text. If not provided, defaults to three installments. |
data-splitit-type | required | Possible values: banner-top, product-description. |
data-splitit-style-align | optional | Customize the "text-align" CSS attribute directly. Inherits from parent element for product description; for banner-top placement, aligns within the banner. |
data-splitit-font-size | optional | A number indicating the font size within the box. Inherits from the 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 | A number indicating the logo height. The default value is set to 30px. Example: data-splitit-logo-height="60". |
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 specifically for the 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, white, informative, none, and url (provide a url with an image to call) |
data-splitit-logo-url | optional | Add if you have data-splitit-logo set to "url" |
data-splitit-content | optional | Set to custom to begin full content customization. |
data-splitit-color-mode | optional | Set to dark or light to adjust the color of the logo in a placement element. |
data-splitit-text-option | optional | Change preset texts for price breakdowns (options are pricePerMonth, pricePerMonthCreditCard, noInterestMonthlyPaymentsCard, and payMonthlyOnCard). |
data-splitit-price-round | optional | Options are none (default behavior if omitted), standard (i.e. 33.4 -> 33 and 33.6 -> 34), up (always rounds up, i.e. 33.3 -> 34), and down (always rounds down, i.e. 33.6 -> 33) |
In some cases, the value initially set for a Placement Element parameter may need to change after the page is loaded. For example, prices vary when there are product variants. Update parameters programmatically by calling
splitit.ui.refresh()
. This function can update any of the available parameters for an element.<script type="text/javascript">
function priceChanged(newValue){
// Set the data attribute with a new value
$("#splitit-container").attr('data-splitit-amount', newValue);
// Render placement with new information
splitit.ui.refresh();
}
</script>
You can also change the language, currency, or currency symbol of an element by calling
splitit.ui.changeLanguage()
:<script type="text/javascript">
function onSiteLanguageUpdated(newLanguage, newCurrency, newCurrencySymbol){
// for example, this could be called with onSiteLanguageUpdated('de', 'EUR', '€')
splitit.ui.changeLanguage(newLanguage, newCurrency, newCurrencySymbol);
}
</script>
You can customize the language of your Placement Elements by using a
messages
object in your Javascript Initialization Code: splitit('init', {
...
messages: {
newLang: {
banner: '{price}/month with {logo}',
product: '{logo} provides {price}/m',
learnMore: 'Learn more on mobile'
}
}
});
This sets new language for the banner Placement Element, the product description Placement Element and the Learn more text, which appears on both elements.
After you set the
messages
object in your initialization code, you can call it with:splitit.ui.changelanguage('newLang', 'USD', '$')
This will change the language for all Elements on the page.
If you would like an even more controlled approach, you can set the custom language for your Placement Elements using a
messages
object in your Javascript Initialization Code as in the example below. This sets each word individually and assigns an HTML class to each (the classes are set by "tags"). The classes are added upon activation of the new language with splitit.ui.changeLanguage()
.<script>
splitit('init', {
...
messages: {
newLang: {
banner: {
words: ['Mobile', '{price}', '/month', 'with', '{logo}'],
tags: ['mobile', 'price', 'p-month', 'with', 'logo']
},
product: {
words: ['m', '{price}', '/month', '{logo}'],
tags: ['m', 'price', 'p-month', 'logo']
},
learnMore: 'Learn more'
}
}
});
</script>
If you examine the HTML that is generated upon activation of the new language, you will see that the tags have the specified added classes.
For example, consider
/month
in the script above, which has a tag of p-month.
It gets a new class:<span class="-splitit--text -splitit--text-p-month" style="padding: 0px; margin: 0px 3px 0px 0px; line-height: 30px;">/month</span>
So if you wanted to change the font size when the new language is activated, you could add the following to your CSS:
<style type="text/css">
.-splitit--text.-splitit--text-p-month {
font-size: 40px !important;
}
</style>
It is also possible to customize all elements, the layout and texts, but keep in mind that you will be responsible for language updates or changes (Splitit will only update the price).
Here is an example of how to define a custom element:
<div data-splitit="true"
data-splitit-amount="100"
data-splitit-content="custom">
or <span data-splitit-custom="price"></span> /m with <img width="60" height="auto" data-splitit-custom="logo" />
<a data-splitit-custom="learn-more">Learn more</a>
</div>
You can also define a custom element, add a second custom element beneath it, and toggle to the second element by calling
splitit.ui.changeLanguage()
, passing in the value for data-splitit-custom-lang
from the second element:<div data-splitit="true" data-splitit-amount="100" data-splitit-content="custom">
<div data-splitit-custom-lang="en"> or pay only <span data-splitit-custom="price"></span> /month using <img width="90" height="auto" data-splitit-custom="logo" />
<a data-splitit-custom="learn-more">Learn more about this opportunity</a>
</div>
<div data-splitit-custom-lang="new">
or <span data-splitit-custom="price"></span> /m with <img width="90" height="400px" data-splitit-custom="logo" />
<a data-splitit-custom="learn-more">Learn more</a>
</div>
</div>
Last modified 5mo ago