Zin SDK

Zin SDK is a lightweight JavaScript library that allows you to easily integrate Zin's interactive content into your website or app. It supports both direct <script> embedding and modern npm-based integration with ESM/UMD builds.

🔧 Installation

1. Using NPM (for React or modern JS apps)

Install the package:

npm install zin_sdk

Initialize Zin with your API key. Call it once in a top-level component like App.jsx. Then place Zin placement whenever you want to display Zin content.

import { useEffect } from 'react';
import { initZin } from 'zin_sdk';

function App() {
    useEffect(() => {
        initZin({
            env: 'prod',
            zinKey: 'your-zin-key-here',
        });
    }, []);

    return (
        <>
            <div id="placement-id" data-placement-type="placement-type"></div>
        </>
    );
}

2. Using Script Tag (UMD - for direct HTML usage)

Put the script on the html head

<script
  src="https://api.zin.co.com/assets/as/zin-loader.js"
  id="zin"
  data-env="prod"
  data-zin-key="your-zin-key"
  async
></script>

Put the placement whenever you want to display the zin content.

<div id="placement-id" data-placement-type="placement-type"></div>