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).
Basic Setup and Types
The two code examples below are the minimum needed for establishing Placement Elements, for a price breakdown and a banner, respectively:
Price Breakdown
<div data-splitit="true"
    data-splitit-amount="150"
    data-splitit-num-installments="3"
    data-splitit-type="product-description">
</div>
​
​
Banner
<div data-splitit="true"
    data-splitit-amount="100"
    data-splitit-num-installments="3"
    data-splitit-type="banner-top">
</div>
​
​
Dark vs. Light Mode
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.
Location on the Page
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>
Quick Styling Examples
Customize the Font
<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>
​
​
Adjust text alignment:
<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>
​
​
Use a logo from an external url:
<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>
Round prices:
<div data-splitit="true"
    data-splitit-amount="91"
    data-splitit-type="banner-top"
    data-splitit-price-round="standard"
    data-splitit-num-installments="4">
</div>
Change the background color of the Splitit banner 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>
​
​
All Placement Element Parameters
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)
Dynamically Updating Parameters
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>
Custom Texts, Basic
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', '#x27;)
This will change the language for all Elements on the page.
Custom Texts, Advanced
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>
Full Customization
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>
Placeholder Elements
Next - Guides
Merchant Back Office
Last modified 1mo ago
Export as PDF
Copy link
Outline
Basic Setup and Types
Dark vs. Light Mode
Location on the Page
Quick Styling Examples
All Placement Element Parameters
Dynamically Updating Parameters
Custom Texts, Basic
Custom Texts, Advanced
Full Customization