How to offer direct links to buy from social media with Instant Shopping

During the next steps you will learn how to leverage Instant Shopping to enable smooooth and quick purchases from Social Media links.

Gain more from your social media posts by linking them to your product pages where Instant Shopping is available.

To achieve this you will need to have Instant Shopping available on the product page, as per the guidelines here.

You can then use the simple JavaScript snippet below and identify that the consumer is coming from Instagram or Facebook. When identified so, you can leverage open to automatically open up Instant Shopping flow and skip a click.

If you need customers to choose between product characteristics, like color, size, etc., you can make sure that you load Instant Shopping with a different set of options, as shown below:

  <script>
    window.klarnaAsyncCallback = function () {
      const ua = navigator.userAgent || navigator.vendor || window.opera;
      const isInstagram = (ua.indexOf('Instagram') > -1)

      if (isInstagram) {
        Klarna.InstantShopping.load({
          "setup": {
            "instance_id": "button-123abc456",
            "key": "123e4567-e89b-12d3-a456-426655440000",

When the products sold have attributes, like color and size that the customer needs to choose from, you can setup Instant Shopping to show these attribute selectors within its purchase flow.

It is a common scenario for direct links to the product pages from instagram and other social media posts, or when your products are being sold completely offsite, like in a blogger’s site.

To leverage this feature you will need to specify all the available product variations either when supplying the options to the Javascript load API, or when setting up a new button key for offsite use. Note that a product variation needs to include the information an order line item should have and additionally some information for its attributes.

The example below refers to selling a T-shirt and allowing customers to choose between available colors (black, white and green) and sizes (medium and large). The schema allows the flexibility to define that:

• The T-Shirt in black and medium is not available
• The T-shirt in large costs more
• The T-shirt in green has a discount

The properties that control how Instant Shopping will present the selectors of the different product specifications are group_identifier and product_attributes:

• group_identifier: is a string that MUST NOT include the character _, a unique identifier of grouping all product variations into one product_attributes
• product_attributes: is an array of items, each one representing a specific product attribute. So for a product of specific color and size, this array should contain two items.
• product_attributes[].identifier: is a string that MUST NOT include the character _, a unique identifier of this product attribute, e.g. “clr”
• product_attributes[].identifier_label: is a string, a human redable, localized text of the product attribute, e.g. “Color” in English or “Färg” in Swedish
• product_attributes[].value: is a string that MUST NOT include the character _, a unique identifier of this product attribute value, e.g. “w”
• product_attributes[].value_label: is a string, a human redable, localized text of the product attribute value, e.g. “White” in English or “Vit” in Swedish

{
  // the rest of parameters goes here...
  "items": [
    {
      "type": "physical",
      "available": true,
      "reference": "19-402-USA-MW",
      "name": "T-Shirt",
      "unit_price": 11000,
      "total_amount": 11000,