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',
            zinTags: 'tag1, tag2',
            useZinFont: true // optional, defaults to true — see "Font" below
        });
    }, []);

    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"
  data-zin-tags="tag1, tag2"
  data-use-zin-font="true" 
  async
></script>

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

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

🔤 Font

Zin ships its own font and uses it for the text it renders.

| Value | Behaviour | |---|---| | omitted | Default — the Zin font is used | | true | The Zin font is used | | false | No font is downloaded at all. Rendered text falls back to the browser's default font |

Set it to false if your site already defines its own font and you don't want the extra download.

<!-- script tag -->
data-use-zin-font="false"

// npm
initZin({ zinKey: 'your-zin-key-here', useZinFont: false });