OSM Placements

On-Site Messaging placements are containers that hold Klarna messaging assets and are placed on recommended pages of your store based on type. There are two types: (1) site-wide placements, that are shown across multiple pages to ensure consistent visibility, and (2) product and cart placements, shown in context-specific areas like product or cart pages to reinforce messaging at key decision points.

• Top Strip: A persistent banner that reminds customers Klarna is available, with a brief message explaining flexible payment options—building early awareness from the first touchpoint.
• Footer: Klarna’s logo is shown alongside other accepted payment methods, reinforcing trust and availability without disrupting the user experience.
• FAQ Page: A dedicated, localized landing page that explains how Klarna works, answers common questions, and supports decision-making with transparent information.

Top strip site-wide	Footer site-wide	FAQ page

Each placement has an unique key that should be used in order to specify the placement to be displayed. A small HTML snippet should be created to pass the necessary attributes.

Personalized messages tailored to the total value in cart or product page, highlighting Klarna’s best available payment options to drive confidence and conversion at key decision points.

Product detail page with On-site Messaging	Cart page with On-site Messaging

Each placement has an unique key that should be used in order to specify the placement to be displayed. A small HTML snippet should be created to pass the necessary attributes.

On-site Messaging placements allow you to display Klarna payment options and promotions at key points in the customer journey (e.g., product, cart, or site wide). This increases customer awareness of flexible payment options and can boost conversion rates.

On-site messaging renders its content within a shadow DOM to prevent the styles from being accidentally applied to the pages that host the placements. This ensures that the styles on the host pages don't interfere with the content of the on-site messaging

<klarna-placement data-key="credit-promotion-auto-size" data-locale="en-GB" data-purchase-amount="20000"
data-theme="default" data-message-preference="klarna" >
#shadow-root
    <div part="osm-container" data-testid="credit-promotion-auto-size" class="container default auto-size">
        <div style="height: auto; width: 100%; display: inline-block;"
        class="loaded default credit-promotion-auto-size">
            <p part="osm-message" class="text osm-message">
            Pay with Klarna.
                <span class="logo" part="osm-logo">
                    <span class="logo" part="osm-logo">Klarna</span>
                </span>
                <button class="link" part="osm-cta" aria-label="Pay with Klarna">

We don't offer support for custom styling the informational modal that appears after a customer clicks a click-to-action button. As this area is dedicated to informing customers about the financial services provided by Klarna, we want to maintain Klarna's own branding.

• To add the CSS styling, you need access to the source code of your website.
• We recommend adding an id to the klarna-placement element to make it easier to target the elements for styling. This will allow you to customize the appearance of the placements without affecting the rest of the page.
• You're responsible for ensuring that styling the on-site messaging with CSS doesn't compromise the accessibility of your website. For example, you need to verify that the contrast between the message and the background is sufficient for people with low vision to read the message. You can use Chrome DevTools to help detect any accessibility issues.

To enable styling of the placements with CSS from outside the shadow DOM, we use the ::part API to expose certain elements of the placements that can be styled. Only elements of the placement that have the part attribute can be targeted with CSS for styling purposes. This allows you to customize the appearance of the placements without interfering with the content within the shadow DOM.

The Part API has some limitations you have to keep in mind when using the Part API to style the placements.

• You can't style an element that doesn't have a ::part attribute.
• You can't target elements that are nested within an element that has the ::part attribute. For example, the following CSS selector won't work:

klarna-placement::part(osm-container) p { ... }

• You can't query the elements that have parts of JavaScript. For example, the following code won't work:

querySelector('::part(osm-cta)')

Here's the list of exposed ::part pseudo-elements:

The theme defines the placement's color. You can change this by setting the theme attribute of the chosen placement.

As the theme attribute is optional, the default theme is applied both when you set the attribute to light or if you omit it from the source code altogether. This will result in a white placement.

<klarna-placement 
  id="my-top-strip" 
  data-key="top-strip-promotion-auto-size" 
  data-locale="en-US"
  data-theme="dark">
</klarna-placement>

You may use your site’s font to maintain brand consistency. However, we recommend using a system font or a clean, legible typeface to ensure readability and better alignment with Klarna’s brand.

If you choose to use your own font, please avoid italics or any stylistic variations that hinder legibility. While we understand the importance of maintaining visual consistency with your brand, readability must take priority to ensure alignment with Klarna’s messaging standards.

The following examples show how you can use CSS to style On-site messaging placements. The modified elements are: the font-family of the text to use an externally loaded font, for example, a Google font, and the size of the badge.

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

HTML code for a top-strip-promotion-badge placement with an id. Adding the id to the source code makes it easier to target the placement.

#my-top-strip-badge::part(osm-message),
#my-top-strip-badge::part(osm-cta) {
  font-family: 'Roboto';
}

#my-top-strip-badge::part(osm-badge) {
  transform: scale(1.1)
}

<klarna-placement 
  id="my-info-page"
  data-key="info-page"
  data-locale="en-US"
>
</klarna-placement>

HTML code for an info-page placement with an id. Adding the id to the source code makes it easier to target the placement.

#my-info-page::part(osm-container){
  font-family: 'Roboto', sans-serif;
}

#my-info-page::part(osm-heading) {
  font-family: 'Roboto';
}

The following examples demonstrate various scenarios that you may encounter when styling the placements.

Following is an example on how you can align Klarna's badge left or right on the placement:

/* Left align of the badge */
#my-top-strip-badge-left::part(osm-container) {
  flex-direction: row;
}

#my-top-strip-badge-left::part(osm-message) {
  margin-left: 14px;
  margin-right: 0px;
}

/* Right align of the badge */
#my-top-strip-badge-right::part(osm-container) {

If you want to style the hover state of links or click-to-action buttons to match the look and feel of your website, you can use pseudo-classes as you would normally do for any link.

#my-top-strip::part(osm-cta):hover {
  color: #ffb3c7;
}

If you have multiple placements of the same type on a single page, such as multiple credit-promotion-auto-size placements on a product listing page, you can use classes instead of IDs to target all of the placements at once. For example:

<klarna-placement 
  class="my-credit-promotion" 
  data-key="credit-promotion-auto-size" 
  data-locale="en-US" 
  data-purchase_amount="14900">
</klarna-placement>

<klarna-placement 
  class="my-credit-promotion" 
  data-key="credit-promotion-auto-size" 
  data-locale="en-US" 
  data-purchase_amount="34900">

Example with the use of classes instead of ids.

.my-credit-promotion::part(osm-container){
  background-color: #E8F3D6;
}

If you want to use the same placement type in different areas of your website, for example, on the checkout page and on the product page, but style it differently in each, use a different id or class for each klarna-placement element to target the element and apply the desired styles to each.

<!-- Product page -->
<klarna-placement 
  id="product-placement" 
  data-key="credit-promotion-auto-size" 
  data-locale="en-US" 
  data-purchase_amount="14900">
</klarna-placement>

<!-- Checkout page -->
<klarna-placement 
  id="checkout-placement" 
  data-key="credit-promotion-auto-size" 

Example with the use of classes instead of ids.

#checkout-placement::part(osm-message) {
  color: #fff;
}

#checkout-placement::part(osm-cta) {
  color: #fff;
  background: #007bff;
}

#product-placement::part(osm-message) {
  color: #333;
}

You can adjust the messaging style based on the screen size, such as using a smaller font on mobile devices and a larger one on desktop displays.

/* Extra small (mobile) styles */
@media (max-width: 575px) {
  #my-top-strip::part(osm-message) {
    font-size: 12px;
  }
}

/* Small devices (mobile landscape) styles */
@media (min-width: 576px) and (max-width: 767px) {
  #my-top-strip::part(osm-message) {
    font-size: 14px;
  }