Installation

The On-Site Messaging 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 integration. It’s a JavaScript library used to communicate between your website and On-Site Messaging. 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 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 zoomed 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
14
15
16
17
<!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</title>
</head>
<body>
    <script
        async
        src="https://eu-library.klarnaservices.com/lib.js"
        data-client-id="11111111-2222-3333-4444-555555555555"
    ></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 application in order to obtain the placement tag. This time instead of the Installation section, go to the Placements section. Click on Placements (zoomed 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 (zoomed 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
20
21
22
23
24
<!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</title>
</head>
<body>
    <script
        async
        src="https://eu-library.klarnaservices.com/lib.js"
        data-client-id="11111111-2222-3333-4444-555555555555"
    ></script>
    ...
    <!-- Placement v2 -->
    <klarna-placement
        data-key="credit-promotion-standard"
        data-locale="en-SE"
    ></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.