Customization

How to customize content and placements
Supported customization
Using your own font
Frequently Asked Questions

On-Site Messaging: Customizing Content

Certain supported content in the On-Site Messaging can be customized to better suit the look and feel of the website it is displayed on.

Most common promotions support some level of customization, while content specific to the Klarna brand is more restrictive.

The look and feel of content can be set at the placement level through the On-Site Messaging App in the Merchant Portal . Changes made in the portal and published will be live immediately.

How to customize content and placements

Log into the Merchant Portal app

Navigate to the placements page and select the placement to customize by clicking the Custom Design button

Preview changes to make sure everything is correct

The customized content will be validated for contrast and readability. Hints will be displayed if a selection is not supported.

Once you are happy with the design changes, click Publish and Confirm. Your changes will be live immediately.

Setting a theme in the placement tag overrides any custom design content. Read more about themes .

You can reset to the default at any time.

Supported customizations

The list below details what can be customized:

Text

Attribute	Value	Note
Attribute Font	Value Klarna text Klarna sans Arial Helvetica EB Garamond (serif)	Note
Attribute Text alignment	Value Left, Right, Center	Note

Body Text

Attribute	Value	Note
Attribute Color	Value (hex value)	Note Limited by readability
Attribute Font size	Value 10-24 px	Note
Attribute Line height	Value 10-24 px	Note Cannot be lower than font size
Attribute Emphasis	Value Regular, Medium, Bold	Note

Legal Text

Attribute	Value	Note
Attribute Color	Value (hex value)	Note Limited by readability
Attribute Font size	Value 10-24 px	Note
Attribute Line height	Value 10-24 px	Note Cannot be lower than font size
Attribute Emphasis	Value Regular, Medium, Bold	Note

Link

Attribute	Value	Note
Attribute Color	Value (hex value)	Note Limited by readability
Attribute Emphasis	Value Regular, Medium, Bold	Note

Background

Attribute	Value	Note
Attribute Color	Value (hex value)	Note

Border

Attribute	Value	Note
Attribute Color	Value (hex value)	Note
Attribute Width	Value 0-3 px	Note
Attribute Radius	Value 0-29 px	Note

Padding

Attribute	Value	Note
Attribute Top	Value 0-15 px	Note
Attribute Bottom	Value 0-15 px	Note
Attribute Left	Value 0-15 px	Note
Attribute Right	Value 0-15 px	Note

Logo

Attribute	Value	Note
Attribute Color	Value true	Note Limited by readability

Using your own font

Click “Use your own font” (below the font selector). A modal for declaring your font will be opened.

Enter your custom font css into the text input. This needs to be valid css and contain only @font-face rules with the following properties:

Attribute	Value	Note
Attribute font-family	Value string	Note
Attribute src	Value url	Note Make sure this is a valid font URL on a CDN
Attribute font-weight	Value 1-1000	Note

Example of valid font css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@font-face {
    font-family: "Klarna Text";
    font-weight: 400;
    src: url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-Regular.woff2") format('woff2'),
         url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-Regular.woff") format('woff');
}
@font-face {
    font-family: "Klarna Text";
    font-weight: 500;
    src: url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-Medium.woff2") format('woff2'),
         url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-Medium.woff") format('woff');
}
@font-face {
    font-family: "Klarna Text";
    font-weight: 700;
    src: url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-Bold.woff2") format('woff2'),
         url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-Bold.woff") format('woff');
}

Italic font-style need to be added as an @font-face with different font-family in order to be supported.

Example using italic font

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@font-face {
    font-family: "Klarna Text Italic";
    font-weight: 400;
    src: url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-Italic.woff2") format('woff2'),
         url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-Italic.woff") format('woff');
}
@font-face {
    font-family: "Klarna Text Italic";
    font-weight: 500;
    src: url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-MediumItalic.woff2") format('woff2'),
         url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-MediumItalic.woff") format('woff');
}
@font-face {
    font-family: "Klarna Text Italic";
    font-weight: 700;
    src: url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-BoldItalic.woff2") format('woff2'),
         url("https://x.klarnacdn.net/ui/fonts/v1.2/KlarnaText-BoldItalic.woff") format('woff');
}

You can only have one custom font css per MID and country. This can contain any number of fonts, only constrained by character count. Once added fonts will be available for all placements that support customization.

Check the preview and if everything looks correct, click “Confirm”. When updated and saved correctly a success message will appear. Click “OK” to close.

You can now use the added font-family from the font selector.

Products

Companion Offerings

Partners

Resources