Placements

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.

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:

<klarna-placement
    data-key="credit-promotion-badge"
    data-locale="en-US"
    data-purchase-amount="12000"
></klarna-placement>

A placement type to enhance the user experience by providing detailed information about payment methods, promotions, and unique selling points, streamlining the checkout process for Klarna's partners and merchants. This method guarantees the correct presentation of Klarna across all markets and to all customers, maintaining consistency and simplicity, while providing merchants with the flexibility needed for a globally adaptable checkout experience, aligning with their various customer experience requirements and expectations.

Promotions

Merchants can choose to run promotions with Klarna, which can help boost their sales. To make the most of these promotions, we strongly recommend merchants incorporate our assets. These assets get updated whenever we offer Klarna deals or 0% financing. Key elements like the On-site messaging widget placed in the cart page and the checkout widget are dynamically updated to stay up to date with the latest version available.

Note that "0% financing available" messaging in sub header is not possible in all markets due to requirements on having a link to representative example (which we have in On-site messaging assets).

<klarna-placement
   data-key="checkout"
   data-locale="en-US"
   data-purchase-amount="12000"
></klarna-placement>

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

<klarna-placement
    data-key="top-strip-promotion-badge"
    data-locale="en-US"
></klarna-placement>

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

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

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

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.

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

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.

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.

window.Klarna.OnsiteMessaging.refresh()

// 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 2024. Please switch your configuration to the recommended alternatives as outlined in the table below: