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

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

Body Text

AttributeValueNote
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
 
AttributeValueNote
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
 
AttributeValueNote
Attribute
Color
Value
(hex value)
Note
Limited by readability
Attribute
Emphasis
Value
Regular, Medium, Bold
Note
 

Background

AttributeValueNote
Attribute
Color
Value
(hex value)
Note
 

Border

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

Padding

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

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

Frequently Asked Questions on Customization

I have published a new version, but when I visit the website I still see the old design.

Make sure you do not have a theme set that would override the custom content. Also, make sure to clear your browser cache. Browsers may cache the content for up to 24h.