Breadcrumbs

1o.js Script

1o.js script tag facilitates integrating Katalys shops into your content.

Here is the script:

<script type="text/javascript" src="https://1o.io/js/1o.js"></script>


The following illustrates how to place the 1o.js script, and how to place Shop URL in several use cases:

  • Launched from hyperlinked text

  • Launched from a button or image

  • Launched from within a custom application

<head>
  <!-- Place it in your head tag -->
  <script type="text/javascript" src="https://1o.io/js/1o.js"></script>
</head>
<body>
  <!-- Link intercepted by 1o.js -->
  <a href="https://1o.io/checkouts/:id">Open Katalys Shop</a>

  <!-- Button opening a shop 1o.js -->
  <button onclick='OneO.openStorefront(":id", {mode: "popup"})'>
    Javascript works too.
  </button>

  <!-- Custom function opening a shop -->
  <div id="katalys-shop-here">
    <button id="katalys-shop-here" onclick='replaceMeWithOneO(self)'>
      Insert a Katalys Shop here.
    </button>
  </div>

  <!-- Custom function opening a shop -->
  <script>
    function replaceMeWithOneO(toReplace) {
      OneO.openStorefront(
        ":id",
        { parentNode: toReplace.parentNode,
          insertBeforeNode: toReplace,
          preload: false,
          open: false,
          mode: "inline",
          width: 350,
          height: 200 }
      )
    }
  </script>

</body>

Key Points

  1. Sets up Katalys Shop iframes. Passes initial parameters via URL Options.

  2. Listens for events coming from Katalys shop iframe via Post Message.

  3. Both mechanisms can be leverage to build integrations without the script.

  4. Provides a simple Javascript API to open Katalys Shops programmatically.