Learn how to solve some common On-site messaging integration issues.
Take a look at our Best practices for tips about improving the loading time.
<klarna-placement>
and script tags are valid HTML.data-client-id
from the correct environment.On-site messaging is rendered inside shadow DOM to improve loading times. Using the Fastclick library makes the elements unclickable inside shadow DOM. This is a known issue.
Here are some ways to fix the issue:
needsclick
class to all shadowhost divs. Shadowhost divs of On-site messaging are added dynamically by the On-site messaging script while processing the placements. You have to observe the change and add the needsclick
class only after a shadowhost div is appended. To query the elements where the needsclick
class should be added, run the following:const elements = document.querySelectorAll('klarna-placement div')
Querying elements that require a needsclick
class.
Example of On-site messaging code in a website's source code.