Klarna On-Site Messaging Integration

​

Background

​

Best Practices

• Include the JavaScript Library in the code as early as possible. Add it before any content in the html, right after opening the body tag.
• Load the JavaScript Library “asynchronously”. Make sure that the script has the async attribute set.
• Avoid using a tag manager.
• If the merchants’ solution relies on templates, make changes in a central file to ensure placements added to other pages will render.
• If it is a Shopify merchant, other apps may influence the performance of On-Site Messaging. Review installed apps to verify they are all still necessary and review all the resources loaded for the page, such as using the browser’s developer tools.
  Klarna Shopify OSM app is not supported with Global-e for On-site messaging Shopify merchants should integrate directly.

​

Global-e Considerations

• If the merchant is integrated locally through another partner, make sure to continue using this script for installation in the appropriate local market, and use the Global-e scripts above, for other locations.
• The merchant has to handle the site language, by setting the country, currency and locale from the Global-e cookie - GlobalE_Data.
• Global-e provides price conversions. it is possible to set the converted price in the DOM instead of the native price and set the attributes of its parent element: ge-data-converted-price and ge-data-converted-full-price. If the price has to be converted beforehand, then there is also an option to use Global-e JS external method to retrieve the converted price on client side. If support is required on this issue, merchants should discuss this with Global-e.

​

The Workflow

​

Klarna JavaScript Library

• Merchants will need access and editing privileges to the source code of your e-store. This is a good point in time to involve a developer in the process.
• Merchants will also need to know where on the e-store they would like the messaging to appear.

• Communicating with the On-Site Messaging to deliver messaging for placements.
• Optimizing the user experience by leveraging a cache layer.
• Setting cookies in order to assure consistency in delivered messaging.
• Handling interstitial operations to allow user interaction without affecting the website.

• EU - Europe
• NA - North America
• OC - Oceania

​

Supported Countries

• EU (single MID)
  
              <script
              async
              src="https://js.klarna.com/web-sdk/v1/klarna.js”
              data-client-id="
              9c8a7017-ad57-55df-836d-614e67e412ee">
              </script>
  
  
  
• US (single MID)
  
              <script
              async
              src="https://js.klarna.com/web-sdk/v1/klarna.js"
              data-client-id="4e26337f-8723-5a1d-afad-1246c0aa4914">
              </script>
  
  
  
• CA (single MID)
  
              <script
              async
              src="https://js.klarna.com/web-sdk/v1/klarna.js"
              data-client-id="73f3022f-53d7-564a-b876-09be2a1f63af">
              </script>
  
  
  
• OC (single MID)
  
              <script
              async
              src="https://js.klarna.com/web-sdk/v1/klarna.js"
              data-client-id="701243cb-b680-5e01-ae1e-860e6f262912">
              </script>
  
  
  

    
      <script>
      
        window.KlarnaOnsiteService = window.KlarnaOnsiteService || [];
        window.KlarnaOnsiteService.push({ eventName: 'refresh-placements' });
      
      </script>
    
  

​

Placements

    
      <!-- Placement v2 -->
      <klarna-placement
      data-key="credit-promotion-badge"
      data-locale="en-GB"
      data-purchase-amount="90000"
      >
      </klarna-placement>
      <!-- end Placement →
    
  

• data-key="credit-promotion-badge"
• data-key="credit-promotion-auto-size"
• data-key="credit-promotion-small"

• Load new content without page refresh (i.e. Ajax) and this new content contains a placement tag.
• Change the purchase amount for placements dynamically without page refresh.
• Infinity scroll on the page with dynamically loaded content on scroll.

• Configure the placement properly.
• Make sure to fire the impression once a visitor sees the messaging.

    window.KlarnaOnsiteService =
    window.KlarnaOnsiteService || []
    window.KlarnaOnsiteService.push({
    eventName: 'placement-impression',
    placementKey: 'credit-promotion-standard'
    })

​

Common Issues

• OSM requires cookies, if staging does not allow this the placements won’t load.
• Production OSM doesn’t show until there has been a purchase on the credentials.
• Password-protected Staging sites can block the OSM’s ability to load.
• Global modifiers on iframes/restricting the iframe can result in it failing (no OSM showing).
• Playground and production will usually have different data-client-id, so this should be considered when testing and using OSM in Production.
• Amounts must be presented in minor units (i.e. $56 should be 5600), and decimals should not be sent.
• The placement will display the amount fed into it, so if you are displaying both sales and full price ensure you are feeding the correct value into the placement.
• If payment methods shown do not match those available, ensure you are using the production and not playground placement.
• Some placements are only available in certain markets or with certain payment methods - so ensure you are pulling from the correct Merchant Portal and trying to just change the data-client-id to get it to work.
  • Example - credit-promotion-auto-size is not available in the US, and top-strip-banner is not available without pay later).
• It is best to not use css to hide placements on the page (visibility: hidden) this can lead to the placement loading then disappearing, resulting in the placement appearing to ‘flash’ on the page. Credit-based placements which include amounts will dynamically adapt to the amount used when loading the placement.
  • Example - a credit placement implemented on a PDP with the data-purchase-amount =2500 for a en-GB consumer will display wording “Make 3 easy payments. Available for orders above £35. Klarna. Learn more”.

​

Partner marketing legal guidelines - for the United Kingdom