Klarna On-site Messaging

This documentation is for On-site Messaging for Klarna for WooCommerce.

As of version 3.5.0 of Klarna for WooCommerce On-site Messaging is now a part of the Klarna plugin.

If you are using the plugin On-site Messaging together with either Klarna for WooCommerce or Klarna Checkout for WooCommerce, you need to follow this guide to continue to use these features.

Klarna Merchant Portal

To configure On-site Messaging you first need to log in to your Klarna Merchant Portal to retrieve the Client identification needed for activation.

1. Log in to your Klarna Merchant Portal.
2. Navigate to Conversion boosters → On-site Messaging.
3. Select your store and click Get started and follow the steps.
4. Move on to Activation

You can also access and copy your Client identifier, or generate one, if you navigate to Conversion boosters → Payment settings → Client identifier

Under the Allowed origins tab, you also register the domain(s) you are expecting to use the Web SDK on.

Activation

Go to: WooCommerce → Settings → Payments → Klarna for WooCommerce.

Client ID – For On-Site Messaging to work you need to enter the Client ID in the Credentials section for Klarna for WooCommerce. This is retrieved under the Conversion booster tab in your merchant portal.

Copy the Client identifier for your store and paste it in the Client ID field for the country (or region) you wish to activate under the Credentials section.

Please note that Client ID retrieved while the store being in Test mode will not work in Production mode, and vice versa.

Client ID retreived from Conversion boosters → On-Site Messaging:

Client ID retreived from Conversion boosters → Payment settings:

Configuration

On the Klarna for WooCommerce Settings page, scroll down to the section for Klarna On-Site Messaging to configure the appearance.

1. Cart Page Placement – Select how you want On-site Messaging to appear on the Cart page. Choose between: Show with klarna badge, Show without Klarna badge and Don’t show.
2. Cart Page Location – Select where you want On-site Messaging to appear on the Cart page. Choose between Above Cross sell, Above cart totals, Between cart totals and proceed to checkout button, After proceed to checkout button and Bottom of the page.
3. Cart Page Theme – Set the theme for On-site Messaging on the Cart page. Choose between Light, Dark and Custom (configured under Conversion boosters → On-site Messaging in your Klarna Portal).
4. Product Page Placement – Select how you want On-site Messaging to appear on the Product page. Choose between: Show with klarna badge, Show without Klarna badge and Don’t show.
5. Product Page Location – Select where you want On-site Messaging to appear on the Product page. Choose between Above Title, Between Title and Price, Between Price and Excerpt, Between Excerpt and Add to cart button, Between Add to cart button and Product meta, Between Product meta and Product sharing buttons and After Product sharing-buttons.
6. Product Page Theme – Set the theme for On-site Messaging on the Product page. Choose between Light, Dark and Custom (configured under Conversion boosters → On-site Messaging in your Klarna Portal).

Now when you navigate to either a product page or the cart page you should see the On-site Messaging widget that you setup in your merchant portal.

Display On-site messaging via shortcode

If you wish, you can also display On-site messaging via the shortcode [onsite_messaging].

You can also configure the placement with the following shortcode attributes:

• data-key (optional)
  The type of placement button/image you want to display. Defaults to homepage-promotion-wide. Look into your Klarna merchant account for possible data-key’s.
• data-theme (optional)
  The theme/style used to display the button/image. Look into your Klarna merchant account for possible data-theme’s.
• data-purchase-amount (optional)
  The specific amount used for the placement. Should be entered in cents/minor units (e.g 100 EUR = 10000).

If you use the data-purchase-amount shortcode on a product or cart page but have no amount specified it will automatically be populated based on the product price or order total.

An example shortcode could look like this:

[onsite_messaging data-key="credit-promotion-small" data-purchase-amount="89900" data-theme="dark"]

Display On-Site Messaging via widgets

You also have the possibility to configure and add a placement via WordPress Widgets.

1. Navigate to Appearance > Widgets.
2. Click Add block where you want to display the Klarna On-Site Messaging widget.

3. Start typing Klarna On-site Messaging and click the widget when it appears.

4. In the configuration of the widget you can add a Title, Placement Key and select the Placement Theme you would like to use.

5. If you want to move the widget after you have configured it, you can click and hold Drag to move it to another Widget area.

Display On-site Messaging on all pages

If you want to display Klarna On-site Messaging on all pages, not just the Cart and/or Product pages, you can use the filter below.

add_filter( 'kosm_show_everywhere', '__return_true' );

Conditionally change the data client ID

/*
* The $client_id is the data client ID that you've entered in the OSM settings. You can overwrite it with the this hook.
*
* This function _must_ return a client id or OSM will fail to work. You may default to returning $client_id as in the example below.
*/
add_filter('kosm_data_client_id', function( $client_id ) {
	
	// your logic here...
	
	return $client_id;
});

Customize region dependent JS libraries

/* 
 * This filter let you change which regional library to use, and is necessary if you want to display KOSM to customers from different regions.
 * 
 * The library region must match the customer's region for KOSM to be displayed.
 * 
 * Valid return values:
 * - 'na-library' for US, CA.
 * - 'oc-library' for AU, NZ.
 * - 'eu-library' for EU (default).
 */
add_filter('kosm_region_library', function( $region ) {
	return 'eu-library';
});

Force locale to a specific country

Klarna On-site Messaging listens to https://developer.wordpress.org/reference/functions/get_locale/ to set the locale. With this snippet you can force all EURO-currency specific countries to show in a specific language. The standard fallback for the Euro currency is the locale ”en-DE”.

In the example below we want to force the locale ”es-ES” for euro currency for Spain:

//this filter changes the standard fallback locale from ”en-DE” to ”es-ES” only
add_filter('kosm_default_euro_locale', function($locale) {
  return 'es-ES';
});
//this filter will force the previous code to only show the locale ”es-ES” no matter what.
add_filter( 'kosm_force_euro_locale', '__return_true' );

Hide OSM based on price

If you want to prevent OSM from being displayed on products with a price over a certain amount you can apply this filter.

<?php

/**
 * Whether the Klarna placement should be hidden.
 *
 * @param boolean $hide Whether the placement will be hidden.
 * @param int     $purchase_amount The purchase amount is in minor units, e.g., 10000 = 100 USD.
 * @return boolean TRUE if it should be hidden, FALSE otherwise.
 */
function hide_kosm_placement_based_on_price( $hide, $purchase_amount ) {
	// The purchase amount is in minor units, e.g., 10000 = 100 USD.
	if ( $purchase_amount < 10000 ) {
		return true;
	}
	return $hide;
}

add_filter( 'kosm_hide_placement', 'hide_kosm_placement_based_on_price' );

To get the functions exemplified in this section to work you need to add the code to your theme’s functions.php. You can add it as its own plugin or through the Code Snippets plugin, or something similiar of your choice.

FAQ

I have activated OSM (On-Site Messaging) for my store but it is not displayed to all customers

If the customer currency is not supported by Klarna, OSM will not be displayed.

I want to use a Custom Design that I made in the Klarna Merchant Portal but I can’t see the changes I make

To be able to see the Custom Design changes you need to set the setting Product Placement Theme to None and Cart Placement Theme to None.

OSM worked in test mode but not when the store is live

If you have had On-Site Messaging activated while testing your Klarna Payments plugin you need to make sure that you enter the production Data client ID for OSM once you have unchecked Test mode and your store is live.

If you use the Data client ID retrieved while the store was in Test mode OSM will not work in production, and vice versa.

Why is the “credit-promotion-badge” not visible on products with a price over 100 Euro?

I have activated the placement “credit-promotion-badge” in OSM on my product page and I see it on products BELOW 100 Euro, but not on products OVER 100 Euro?

This might be because there is a upper limit for financing in your agreement with Klarna, this is probably why the credit-promotion-badge won’t show over a certain amount. Get in touch with the commercial team at Klarna if you want to change the limit in your agreement.