Getting started

On-Site Messaging Platform Activation
Installation

On-Site Messaging Platform Activation

The On-Site Messaging Platform needs to be activated through the Merchant Portal. You need to have an existing Klarna integration and an active MID to do so. After activating the On-Site Messaging Platform you will be able to add functionality to your website right away. The necessary steps are outlined in detail below.

Preparation

Before you get started, make sure you have everything you need:

  • Credentials to log in to the Merchant Portal

Login to the Merchant Portal

First log in to the Merchant Portal. All necessary actions in this section will be performed there. You will be able to test your integrations using the Playground environment.

Access the Merchant Portal through one of the below links, depending on your region and environment:

Any changes you make in the Playground environment will not impact your Production integration.

You will be prompted to enter your credentials to access your account.

Enter your credentials.

And click the Log in button.

On-Site Messaging application

Once logged in, you will be redirected to a list of available applications.

Select the On-Site Messaging application from the list (outlined in red in the image below).

Accept terms of use

IMPORTANT NOTE This step only applies to EU integrations. If you are integrating in the US please go to the next step.

You will be shown the terms of use that you need to be accepted in order to use On-Site Messaging Platform.

Read through the terms and conditions. You will only need to accept these terms once, unless changes are made in the future. To accept the terms there is a check-box at the bottom.

The Continue button will be disabled. You have to check the check-box confirming you have read and agree on the terms of use.

Having confirmed the terms you will be able to move forward by clicking the Continue button.

On-Site Messaging panel

Congratulations! You have now activated the On-Site Messaging Platform and will see the On-Site Messaging panel.

The next section will take you through the remaining steps in order to add On-Site Messaging messaging to your site.

Installation

The On-Site Messaging Platform will only function by adding the JavaScript Library code snippet to all pages of the website along with the placements in specific places where you want messaging to appear. Although the exact way you edit your website may differ depending on your e-commerce solution, the steps described below are valid for all websites.

Preparation

Before you get started, make sure you have everything you need:

  • You will need access and editing privileges to source code of your website. This is a good point in time to involve a developer in the process.
  • You will also need to know where on your site you would like the messaging to appear.

Adding the JavaScript Library

What is the JavaScript Library

The JavaScript Library is the core part On-Site Messaging Platform integration. It’s a JavaScript library used to communicate between your website and On-Site Messaging Platform. The JavaScript Library will render the content in the placements tags and not adding it to your site will mean placements are not loaded. You can read more about the library in the JavaScript Library section of the documentation.

Obtaining the JavaScript Library snippet

The JavaScript Library snippet is generated for you and can be obtained in the installation page in the On-Site Messaging panel in the Merchant Portal.

Log in to the Merchant Portal and go to the On-Site Messaging Platform application by clicking On-Site Messaging on the application list.

Once there, you will be redirected to the Installation section of the application.

Next you need to copy to clipboard the JavaScript Library code snippet by clicking Copy to clipboard outlined in red on the image below.

Add the JavaScript Library to your website

You need to add the snippet to your website code right after opening the body tag. See the below example of an HTML file with the JavaScript Library added.

1
2
3
4
5
6
7
8
9
10
11
12
13
	<!DOCTYPE html>
	<html lang="en">
	<head>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<meta http-equiv="X-UA-Compatible" content="ie=edge">
			<title>On-Site Messaging Platform</title>
	</head>
	<body>
		<script async src="https://us-library.klarnaservices.com/merchant.js?uci=11111111-2222-3333-4444-555555555555&country=US"></script>
		...
	</body>
	</html>

Please note that the above is only an example. You will need to copy your own script from Merchant Portal, which has been generated specifically for your MID. The example only illustrates where to add the script.

Make sure that:

  • The script is added right after opening the body tag
  • The script is located before any scripts or libraries, such as analytics
  • The script has the async attribute set so that it does not block the rest of the webpage from loading
  • If your solution relies on templates, make this change in a central file to ensure placements added in other pages will render

Adding placements

What is a placement

A placement is a HTML tag with all the attributes required to deliver messaging on your website. You can think of it as the container for the messaging that JavaScript Library will deliver. Placements will need the purchase amount in order to display the correct payment or credit offer. You can read more about the placements in Placements section of this documentation.

Obtain the placement tags

Very similarly to the JavaScript Library, login to Merchant Portal and go to the On-Site Messaging Platform application in order to obtain the placement tag. This time instead of the Installation section, go to the Placements section. Click on Placements (outlined in red in the image below).

You will see all the placements configured for your MID.

The numerical values in the placement preview are placeholders and are not necessarily representative of the true values you will see in a live integration.

Copy the code snippet for a placement by clicking Copy to clipboard (outlined in red in the image below).

Install placement on your website

You can now add the copied tag to the desired location on your website. An example of the HTML with JavaScript Library and Placement installed would look like the code below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>On-Site Messaging Platform</title>
</head>
<body>
	<script async src="https://us-library.klarnaservices.com/merchant.js?uci=11111111-2222-3333-4444-555555555555&country=US"></script>

	<!-- Placement v1 -->
	<klarna-placement
		data-id="6511e40a-1fb4-49e7-a82c-27d65bf9435a"
	></klarna-placement>
	<!-- end Placement -->
	...
</body>
</html>

Please note that the above is only an example. You will need to copy your own placement tags from Merchant Portal, which have been generated specifically for your MID. The example only illustrates how placements can be added to a website.

Publish the changes to your website

You are now ready to publish the changes to your site.