Klarna Docs - Placements.

Placements.

Here you can find technical details about the placements of the messaging assets.

Placements are containers for the different messaging assets we offer. Depending on the type we recommend to place the placements on different pages of your store (cart and product page, FAQ page, or sitewide). You have to specify the placement in the source code of your online store by creating a small html snippet and passing the necessary attributes.

If you want to see graphic examples of the placement types, go to the Look and feel section.

The following tables list the placement types and their main characteristics.

The placements for the messaging assets that we recommend to appear on the product and cart pages are:

Placement typesCharacteristics
credit-promotion-auto-sizeDisplays interactive Klarna messaging. Your customers can click on it and expand the information on the payment methods with calculated prices. Mentions Klarna inline as part of the text.
credit-promotion-badgeDisplays interactive Klarna messaging. Your customers can click on it and expand the information on the payment methods with calculated prices. Displays Klarna's logo in svg,
HTML
<klarna-placement
    data-key="credit-promotion-badge"
    data-locale="en-US"
    data-purchase-amount="12000"
></klarna-placement>

An example of credit promotion placement snippet

The placements for the messaging assets that can be placed sitewide are:

Placement typesOptions
top-strip-promotion-auto-sizeRecommended as static asset at the top of the pages of your online store. Displays interactive Klarna messaging. Your customers can click on it and expand the information on the payment methods.. Mentions Klarna inline as part of the text.
top-strip-promotion-badgeRecommended as static at the top of the pages of your online store. Displays interactive Klarna messaging. Your customers can click on it and expand the information on the payment methods.
footer-promotion-auto-sizeRecommended static asset at the bottom of every page of your online store showcasing the payment methods offered via Klarna.
HTML
<klarna-placement
    data-key="top-strip-promotion-badge"
    data-locale="en-US"
></klarna-placement>

An example of top strip promotion placement snippet

To inform your customers for the Klarna services offered at checkout you can create a dedicated page and create an FAQ placement:

Placement typeCharacteristics
info-page-auto-sizeDisplays a FAQ to clarify common questions about buying with Klarna. The FAQ is dynamic based on your configuration and offered payment methods.
HTML
<klarna-placement
    data-key="info-page"
    data-locale="en-US"
></klarna-placement>

Placement tags contain required and optional attributes which you can adjust to fit your needs.

AttributeRequiredDescription
data-keyYesA unique identifier of a placement's type and size. The following values are applicable:
top-strip-promotion-auto-size top-strip-promotion-badge credit-promotion-auto-size credit-promotion-badge footer-promotion-auto-size info-page

data-localeYesThe language and the billing country of the ad. The following values are applicable:
"en-AT", "de-AT", "nl-BE", "en-BE", "fr-BE", "en-CH", "de-CH", "it-CH", "fr-CH", "en-CZ", "cs-CZ", "de-DE", "en-DE", "da-DK", "en-DK", "es-ES", "en-ES", "fi-FI", "sv-FI", "en-FI", "fr-FR", "en-FR", "en-GB", "en-GR", "el-GR", "en-IE", "en-IT", "it-IT", "nl-NL", "en-NL", "no-NO", "nb-NO", "en-NO", "en-PL", "pl-PL", "en-PT", "pt-PT", "sv-SE", "en-SE", "en-CA", "fr-CA", "es-MX", "en-MX", "en-US", "es-US", "en-AU", "en-NZ".
data-purchase-amountYesThe amount of money in minor units ($120.00 = 12000), used in amount-based credit promotions. Not required for some placements such as info-page.
data-themeNoSets a theme to override the default or customised content. The following values are applicable:
default dark custom
data-custom-payment-method-idsNoYou can dynamically trigger promotional credit offers. First, work with Klarna’s responsible account manager to determine the criteria for custom offers and a standard naming convention that will be referred to when requesting such offers via Klarna payments API. To be able to advertise these payment methods, pass the names as an array of strings to the On-site messaging placement. The array can be used to define which of the configured payment options within a payment category (pay_later, pay_over_time, and so on) should be included in the ad selection.
data-message-prefixNoPrefixes the content of the message. Available in the UK, US, and AU for placements with data-key="credit-promotion-auto-size" or data-key="credit-promotion-badge".Allowed values: Or, or
HTML
<klarna-placement
    data-key="credit-promotion-auto-size"
    data-locale="en-US"
    data-purchase-amount="12000"
></klarna-placement>

An example placement tag with required attributes.

Amount-based placements have to include the data-purchase-amount attribute. This attribute delivers messaging with a specific price provided in minor units, where available. You can use these placements in various places across the website, such as cart view, product details page, and product list page.

HTML
<klarna-placement
    data-key="credit-promotion-auto-size"
    data-locale="en-US"
    data-purchase-amount="122500"
></klarna-placement>

Example of purchase amount included in the placement tag.

In this example, the price equals $1,225.00 if the currency is US dollars.

To populate data-purchase-amount:

  • For static values, use the value instead of an empty string, for example, data-purchase-amount=“12350”. The value must be is in minor units, so 12350 is $123,50 if the currency is US dollars.
  • For dynamic values, use JavaScript. With a single placement on a page, you can use a query selector method, for example, document.querySelector(‘klarna-placement’).dataset.purchaseAmount = 9999. However, if you have multiple placements on one page, you have to use a more specific query selector.

    After updating the values, remember to refresh placements.

Don't provide the currency in data-purchase-amount . The currency is based on the passed locale.

In some cases, changes on a website require refreshing placements. The JavaScript library must be informed about the changes to trigger delivery of updated messaging. The most common use cases are:

  • Loading new content without refreshing a page (that is, Ajax refresh) when the new content contains a placement tag.
  • Changing the purchase amount, locale or theme for placements dynamically without refreshing the page.
  • Infinite scrolling on a page with dynamically loaded content on scroll.

To refresh placements, you have to call the refresh function exposed by OnsiteMessaging on the window.Klarna to inform the JavaScript Library that the placements on the page have been changed. The refresh operation has to be triggered in the code after a change occurs.

JAVASCRIPT
window.Klarna.OnsiteMessaging.refresh()

At the moment On-site messaging exposes also a window.KlarnaOnsiteService.push({ eventName: 'refresh-placements' }) function to refresh-placements, we aim to drop support for this at the end of 2023.

JAVASCRIPT
// To be deprecated, use Klarna.OnsiteMessaging.refresh()
window.KlarnaOnsiteService.push({ eventName: 'refresh-placements' }) 

We aim to deprecate the following placement types at the end of Q2 2023, please switch your configuration to the recommended alternative:

Old placement typeRecommended replacement
credit-promotion-small (same size as standard can be achieved with a width:335px limit on the container)credit-promotion-auto-size
credit-promotion-standardcredit-promotion-auto-size (same size as standard can be achieved with a width:350px limit on the container)
info-page-standardinfo-page (same size as standard can be achieved with a width:900px, height:2000px limit on the container)
top-strip-promotion-standardtop-strip-promotion-auto-size (same size as standard can be achieved with a width:350px limit on the container)
info-page-auto-sizeinfo-page