Customise placements with CSS
The purpose of this guide is to provide instructions on how to style the On-site Messaging placements that appear on your pages through CSS to make them align with the look and feel of your page.
We do not provide support for styling the informational modal that appears after a user clicks on a click-to-action button. This is because we believe that this area is for informing customers about the financial services provided by Klarna and we want to maintain Klarna's branding.
If you have already styled the placements using the Merchant Portal, we recommend resetting those styles if you plan to use CSS. The ::part API CSS styling has a higher specificity than the styles applied through the Merchant Portal, so any styles applied with the ::part API will overwrite the styles applied through the Merchant Portal. This ensures that your CSS styles will take precedence and will be applied as intended.
On-site messaging renders its content within a shadow-dom to prevent the leaking of styles to the pages that host the placements. This ensures that the styles on the host pages do not interfere with the content of the on-site messaging.
On-site messaging rendered inside a shadow-dom
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 to be aware of:
- You cannot style an element that does not have a part attribute
- You cannot target elements that are nested within an element that has the part attribute. For example, the following CSS selector will not work:
klarna-placement *::part(osm-container) p { ... } - You cannot query the elements that have parts with JavaScript. For example, the following code will not work: querySelector('::part(osm-cta)')
Keep these limitations in mind when using the Part API to style the placements.
To add CSS styling, you must have access to the source code of your website. We also 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.
It is your responsibility to ensure that styling the on-site messaging with CSS does not 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.
When styling the on-site messaging, you should not hide any part of the message provided by Klarna, as this may result in compliance issues. The text of the placements should have sufficient contrast with the background, and you should not hide Klarna's logo. If we determine that you are using the styling in an abusive manner, we reserve the right to stop your integration.
Following are the list of exposed part:
| Pseudo-element | Description | Placement types |
| *::part(osm-container) | The wrapping element of the placements is the container that surrounds the placement. It can be styled with the *::part(osm-container) selector. |
|
| *::part(osm-message) | The main text of a placement is the primary message that is displayed within the placement. It can be styled with the *::part(osm-message) selector. |
|
| *::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 user. It can be styled with the *::part(osm-legal) selector. It is essential that this text is not hidden or obscured in any way, as it is required for compliance reasons. |
|
| *::part(osm-cta) | The button element that triggers the opening of the informational model is the element that the user clicks on to view additional information about the product or service being offered. It can be styled with the *::part(osm-cta) selector. |
|
| *::part(osm-badge) | The svg badge element(s) inside the placements. They can be styled with the *::part(osm-badge) selector. |
|
| *::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. They can be styled with the *::part(osm-link) selector. |
|
| *::part(osm-logo) | The Klarna logo appearing next to the main message. It can be styled with the *::part(osm-logo) selector. |
|
The following example shows how you can use CSS to style the top-strip-promotion-auto-size placement. In this example, we are changing the background of the placement, the color of the message, and the click-to-action button. This demonstrates how you can customize the appearance of the placement to match the look and feel of your website.
The use of CSS to hide Klarna's logo is not allowed. If this type of abuse is discovered, We reserve the right to turn off the abusive integration. Maintaning Klarna's branding integrity and visibility in the placement is necessary.
<klarna-placement
id="my-top-strip"
data-key="top-strip-promotion-auto-size"
data-locale="en-US">
</klarna-placement>Html code with id
#my-top-strip *::part(osm-container) {
background-color: #FAEAB1;
}
#my-top-strip *::part(osm-message),
#my-top-strip *::part(osm-cta) {
font-size: 15px;
}
#my-top-strip *::part(osm-logo) {
font-style: italic;Example of styling top-strip-promotion-auto-size
Result of styling
The following example shows how you can use CSS to style the top-strip-promotion-badge placement. In this example, we are changing the font-family of the text to use an externally loaded font (such as a Google font), and we are also increasing the size of the badge.
It is important to note that Klarna's badge should not be hidden with CSS. If we determine that you are using CSS in an abusive manner to hide the badge, we reserve the right to disable your integration. It is important to maintain the integrity and visibility of Klarna's branding in the placements.
<klarna-placement
id="my-top-strip-badge"
data-key="top-strip-promotion-badge"
data-locale="en-US">
</klarna-placement>Html code with id
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
#my-top-strip-badge *::part(osm-message),
#my-top-strip-badge *::part(osm-cta) {
font-family: 'Lobster', cursive;
}
#my-top-strip-badge *::part(osm-badge) {
transform: scale(1.1)
}Example of styling top-strip-promotion-badge
Result of styling
The following example shows how you can use CSS to style the credit-promotion-badge placement. In this example, we are adding a border to the container, changing the color of the message, setting the size of the badge, and making the click-to-action button bold.
The use of CSS to hide Klarna's badge is strictly prohibited. In the event that such abuse is detected, Klarna reserves the right to disable the integration in question. It is imperative that the visibility and integrity of Klarna's branding in the placements be maintained at all times.
<klarna-placement
id="my-credit-promotion"
data-key="credit-promotion-badge"
data-locale="en-US"
data-purchase_amount="14900">
</klarna-placement>Html code with id
#my-credit-promotion *::part(osm-container){
border-color: firebrick;
border-style: dashed;
border-width: 1px;
background-color: #453C67;
}
#my-credit-promotion *::part(osm-message),
#my-credit-promotion *::part(osm-cta) {
color: #46C2CB;Example of styling credit-promotion-badge
Result of styling
Following is an example of how you can style credit-promotion-auto-size
It is not permitted to use CSS to obscure the Klarna logo in any way. When this happens, the right is reserved to disable the integration altogether. It is crucial to preserve the visibility and integrity of Klarna's branding in the placements.
<klarna-placement
data-theme="dark"
id="my-credit-promotion-auto-size"
data-key="credit-promotion-auto-size"
data-locale="en-US"
data-purchase_amount="14900">
</klarna-placement>Id has been added to the placement to target it easier
#my-credit-promotion-auto-size *::part(osm-container){
background-color: #000000;
}
#my-credit-promotion-auto-size *::part(osm-message),
#my-credit-promotion-auto-size *::part(osm-cta) {
color: #F49D1A;
font-weight: bold;
}
#my-credit-promotion-auto-size *::part(osm-logo) {Example of styling credit-promotion-auto-size
Result of styling
<klarna-placement
id="my-footer"
data-key="footer-promotion-auto-size"
data-locale="en-US">
</klarna-placement>Id has been added to the placement to target it easier
#my-footer *::part(osm-container) {
background-color: #FAEAB1;
}
#my-footer *::part(osm-badge) {
transform: scale(1.1);
}Example of styling footer-promotion-auto-size
Result of styling
In the following example we changed the font-family of content and headings of info-page
<klarna-placement
id="my-info-page"
data-key="info-page"
data-locale="en-US"
>
</klarna-placement>@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Montserrat:ital,wght@1,100&display=swap');
#my-info-page *::part(osm-container){
font-family: 'Montserrat', sans-serif;
}
#my-info-page *::part(osm-heading) {
font-family: 'Lobster', cursive;
}Example of styling footer-promotion-auto-size
Result of styling
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. For example:
#my-top-strip *::part(osm-cta):hover {
color: #ffb3c7;
}Example of styling the hover state using the :hover pseudo-class
Example of styling the hover state
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 but style it differently in each location, you can simply use a different ID or class on the klarna-placement element to target the element and apply the desired styles. For example:
<!-- 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 #checkout-placement *::part(osm-message) {
color: #fff;
}
#checkout-placement *::part(osm-cta) {
color: #fff;
background: #007bff;
}
#product-placement *::part(osm-message) {You may have the need to style the On-site messaging differently based on the viewport of your website, e.g. having smaller font on mobile and bit bigger font on desktop view, here is how you can do it:
/* Mobile styles */
@media (max-width: 480px) {
#my-top-strip *::part(osm-message) {
font-size: 12px;
}
}
/* Desktop styles */
@media (min-width: 481px) {
#my-top-strip *::part(osm-message) {Styling placement differently based on the viewport size