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
| Attribute | Value | Note |
|---|---|---|
Attribute Font | Value Klarna textKlarna 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.
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.