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.

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.

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

Top strip promotion badge sample

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

Info page sample

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

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" 

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 

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

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

​