Klarna Docs - On-site messaging JavaScript library.

On-site messaging JavaScript library.

The JavaScript library delivers the core functionality of On-site messaging.

The On-site messaging JavaScript library is responsible for:

  • Communicating with On-site messaging to deliver messaging for placements.
  • Optimising user experience with a cache layer.
  • Handling interstitial operations to allow user interaction without affecting the website.

In the installation step of On-site messaging, you add the JavaScript library snippet to your website's source code.

MARKUP
<script
    async
    data-environment="playground | production"
    src="https://osm.klarnaservices.com/lib.js"
    data-client-id="<your client id>"
></script>

An example of the On-site messaging JavaScript library snippet, for Europe.

AttributeDescription
srcThe source URL of the On-site messaging installation script. The URL differs for playground and production environments and region.
data-environment Specify the environment, "production" or "playground". The value is optional, the default is production.
asyncMakes loading the script asynchronous and non-blocking.
data-client-idYour individual On-site messaging identifier, it can be found in Merchant Portal. If you don't have access to Merchant Portal, ask your Delivery Manager for it.

The flow of the On-site messaging JavaScript library varies depending on the functions it's called on to perform. Below is a high-level summary of the process:

The library looks for placement tags in the DOM tree. An ad server matches the content to the placement tag ID and returns the content that will be rendered in the tag.

Many ads will contain interstitial events that are initiated when a user clicks a call-to-action. The library listens for those events and renders the interstitial on-click.

We simplified our integration so you can install On-site messaging across different markets faster, manage your placements easier and benefit from upcoming feature improvements.

You can find the migration guide in our Merchant Portal under On-site messaging -> Updates -> Update On-site messaging.

If you are using one of our platforms, you will find further information under the following links:

BigCommerce

WooCommerce

Shopify

Deprecation Timeline:

February 28, 2022 – We will no longer provide feature updates and the old integration is in deprecation mode. We will only fix potential bugs.

March 31, 2023 – We will stop displaying on-site messaging on your website.

Currently, OSM supports the use of iframe as a fallback for browsers that do not support shadowDOM.

The use of iframe has several drawbacks, including:

  • Poor performance due to the need to create a separate document and rendering context for each iframe.
  • Limited ability to style and interact with the content within the iframe.

For these reasons the OSM team had decided to switch to shadowDOM a few years ago and use iframe only as a fallback for browsers that do not support shadowDOM.

shadowDOM offers several benefits, including:

  • Improved performance, as it allows us to attach an isolated DOM tree to an element without the overhead of creating a new document and rendering context.
  • Greater control over styling and interacting with the embedded content.

Given that all the major browsers support shadowDOM we have decided to drop support of iframe. On March 31, 2023 we will stop displaying ads on old browsers that do not support shadowDOM (e.g. IE 11 and older)