OSM Placements

On-Site Messaging placements showcase Klarna payment options and promotions at key moments in the customer journey.

On-Site Messaging placements overview

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.

Site-wide placements

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.

Placement types	Options
`top-strip-promotion-auto-size`	Recommended 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-badge`	Recommended 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-size`	Recommended static asset at the bottom of every page of your online store showcasing the payment methods offered via Klarna.
`info-page-auto-size`	Displays a FAQ to clarify common questions about buying with Klarna. The FAQ is dynamic based on your configuration and offered payment methods.

Product and Cart placements

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.

Placement types	Characteristics
`credit-promotion-auto-size`	Displays 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-badge`	Displays 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,

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.

Customize Placements with CSS

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

HTML

1 2 3 4 5 6 7 8 9 10

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

Styling of informational modal that appears after a customer clicks a click-to-action button is not supported. As this area is dedicated to informing customers about the financial services provided by 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.

CSS Styling Guidelines

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.

Part API

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.

Limitations of Part API

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:

CSS

1 2

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:

CSS

1 2

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

Part pseudo-elements

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

Pseudo-element	Description	Placement types
`::part(osm-container)`	The wrapping element of the placements is the container that surrounds the placement. You can style it with the `::part(osm-container)` selector.	credit-promotion-auto-size credit-promotion-badge top-strip-promotion-auto-size top-strip-promotion-badge info-page footer
`::part(osm-message)`	The main text of a placement is the primary message that is displayed within the placement. You can style it with the `::part(osm-message)` selector.	credit-promotion-auto-size credit-promotion-badge top-strip-promotion-auto-size top-strip-promotion-badge
`::part(osm-legal)`	The legal text that appears under the main message in some markets is an important piece of information that must be clearly visible and readable to the customers. You can style it with the `::part(osm-legal)` selector. It's essential that you don't hide or obscure this text in any way, as it's required for compliance reasons.	credit-promotion-auto-size credit-promotion-badge top-strip-promotion-auto-size top-strip-promotion-badge
`::part(osm-cta)`	The button element that triggers the opening of the informational model is the element that the customer clicks on to view additional information about the product or service being offered. You can style it with the `::part(osm-cta)` selector.	credit-promotion-auto-size credit-promotion-badge top-strip-promotion-auto-size top-strip-promotion-badge
`::part(osm-link)`	Link elements with the `<a>` tag are the elements on the page that use the `<a>` tag to create a hyperlink to another location on the web. You can style them with the `::part(osm-link)` selector.	info-page

Don't use CSS to hide Klarna's logo or badge in the placements. We reserve the right to turn off your integration if it abuses this rule as hiding Klarna brand elements goes against maintaining our branding integrity and visibility.

Theme

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

The placement’s default theme color is white (light). As the theme attribute is optional, the default theme is applied both when you set the attribute to default or if you omit it from the source code altogether.

HTML

1 2 3 4 5 6 7

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

Font

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.

Top strip promotion badge sample

HTML

1 2 3 4 5 6

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

CSS

1 2 3 4 5 6 7 8 9

#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)
}

Info page sample

HTML

1 2 3 4 5 6 7

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

CSS

1 2 3 4 5 6 7 8

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

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

Please ensure that appropriate and consistent fonts are used when editing styles, in accordance with our branding guidelines.

Additional customization use cases

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

Aligning Klarna badge left or right on the placement.

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

CSS

1 2 3 4 5 6 7 8 9 10

/* 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;
}

Styling the hover state.

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.

CSS

1 2 3 4

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

Styling more than one placement on a page.

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:

HTML

1 2 3 4 5 6 7 8 9 10

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

Example with the use of classes instead of ids.

CSS

1 2 3 4

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

Styling the same placement differently.

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.

HTML

1 2 3 4 5 6 7 8 9 10

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

Example with the use of classes instead of ids.

CSS

1 2 3 4 5 6 7 8 9 10

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

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

#product-placement::part(osm-message) {

Styling placements for different viewports.

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.

CSS

1 2 3 4 5 6 7 8 9 10

/* 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) {