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.
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.
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
asyncattribute 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
What is a placement
You will see all the placements configured for your MID.
Copy the code snippet for a placement by clicking Copy to clipboard (zoomed in the image below).
Install placement on your website
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>
Publish the changes to your website
You are now ready to publish the changes to your site.