Step 2: Install.
To make On-site messaging work, you have to add some code to your website.
To make on-site messaging work, you have to add two types of code snippets to your website's source code:
1. Add the JavaScript library to the pages of your website. This library is the core part of On-site messaging integration as it lets your website communicate with On-site messaging. The library renders the On-site messaging content in the placement tags.
2. Insert placement code snippets where you want the messaging to appear. A placement is an HTML tag with all the attributes required to display messaging on your website. You can think of placement as the container for the messaging that the JavaScript library delivers. Some placements require the purchase amount to display the correct payment or credit offer.
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.
1. Go to Installation.
In the Merchant portal go to On-site messaging.
Select a Store from the drop-down, then click Get started.
You'll be redirected to the Installation section where you can find all your snippets.
Click Get started to go to the Installation section of On-site messaging.
2. Copy the installation snippet.
Next, make sure to select the right Region from the drop-down list.
Then, in Add code to your site, click Copy to clipboard to copy the JavaScript library code snippet.
Copying the On-site messaging JavaScript library installation snippet.
3. Add the JavaScript library to your website.
Insert the copied snippet in your website's source code right after the opening <body> tag.
Note that the code snippet shown here is only an example of where to place the script. You have to copy your own script from the Merchant portal.
<!DOCTYPE html>
<html>
<head>
<title>My store</title>
</head>
<body>
<script
async
data-environment="playground | production"
src="https://js.klarna.com/web-sdk/v1/klarna.js"An example of an HTML file with the JavaScript library snippet, generated for a store in the EU playground environment.
4. View placements.
Once you've installed the JavaScript library, it's time to add placements.
A placement is an HTML tag with all the attributes required to display messaging on your website. You can think of it as the container for the messaging that the JavaScript library delivers. Some placements require the purchase amount to display the message.
You can get the tag through the Merchant portal. Go to On-site messaging and click Placements. You'll see all the placements available for your configuration.
If you're promoting Klarna in multiple countries use the Region & Country dropdowns to view the relevant placement for each country.
You can also check the tags out in the Placements section of our documentation.
If you're testing your integration in the test (playground) environment, a TEST DRIVE badge appears on each placement.
Placements section of the On-site messaging menu.
5. Copy the placement code.
Find the placement you want to add to your website, then click Copy to clipboard.
The numerical values in the placement preview are placeholders and aren't representative of the true values you see in a live integration.
6. Add the placement to your website.
You can now add the copied tag to the desired location on your website.
Note that the code you can see here is an example. When integrating, you have to copy your own placement tags from the Merchant portal as they're generated specifically for your configuration.
<!DOCTYPE html>
<html>
<head>
<title>My store</title>
</head>
<body>
<script
async
data-environment="playground | production"
src="https://js.klarna.com/web-sdk/v1/klarna.js"An HTML with JavaScript library and a placement tag installed.
You're now ready to publish the messaging to your site. Before the go-live, you can also customize the content to match your store's look and feel.
Something doesn't look quite right? Check out our troubleshooting guide for solutions to some frequent integration errors.