@kaitaku/kaitaku-web-sdk NPM

Kaitaku Web SDK

Install

Getting Started

You can integrate this into your application as a module or a global varibale.

Install as a module in UI framework

To implement this as a module, run:

npm install @kaitaku/kaitaku-web-sdk

Setup a container

The SDK will render in a HTML element. This container must have a specified height and width to show the elements properly. We recommend a minimum height of 400px and minimum width of 400px.

<!doctype html>
<html>

<head>
    <script type="text/javascript" src="./../build/browser/main.js"></script>

    <title>Vanilla JS Example</title>
    <style>
        #feedback-container {
            position: absolute;
            top: 50px;
            left: 50px;
            height: 400px;
            width: 400px;
        }
    </style>
</head>

<body>
    <div id="feedback-container"></div>
    <button id="app-button" type="button">Show Feedback </button>
</body>

<script>
    const container = document.getElementById('feedback-container')
    const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiWmdOS0NBalVIbERoak85bms1bW4iLCJjcmVhdGVkX2F0IjoiMjAyMi0wNC0xN1QxODo1MTo1Ni41OTI2OCswOTowMCJ9.lL2kmWdoAhCfZOe1r7yl-7k4n-5EVdcwj6QhuB-tEek'
    const projectId = 'mVhuSeRl9UXjJevV0sTy'
    const user1 = 'user1'

    document.getElementById('app-button').onclick = function () {
        //click me function!
        console.log("app-button clicked")

        new Kaitaku(container, {
            onError: (err) => {
                console.error(err)
            },
            projectId: projectId,
            token: token,
            userId: user1,
        })
    }
</script>

</html>

API Options

Name	Required	Type	Description	Default Value
onError	Yes	Function	Called when error occurs.
project	Yes	String	project ID
token	Yes	String	Token for the account
userId	Yes	String	Unique user id
showFeedbackButton	No	Boolean	Whether to show the default feedback button	true
showFeedbackUI	No	Boolean	Whether to show the default feedback UI	false

Contributing

Develop

To run this library and make it viewable, it must integrate into an example application.

# 1. clone this repository
git clone git@github.com:kaitakuhq/kaitaku-web-sdk.git

# 2. Go into the project root
cd kaitaku-web-sdk

# 3. Install dependencies
yarn

# 4. To watch and generate CSS builds (if updating Tailwind CSS classes)
yarn run css:build:watch

# 5. To watch and generate a UMD build
yarn run build:watch

# 6a. To watch and serve the UMD build to the application
./node_modules/.bin/serve dist

# alternatively,
yarn add global serve
serve dist

# 7a. To run an example app in ReactJS
cd example/reactjs
yarn
yarn start

# 7b. To run an example app in Vanilla JS
cd example/vanillajs
open index.html

When Tailwind CSS is generated, it creates src/style/generated.css, which is required to be committed to this repository along with the appropriate changed files.

The build will be created from src/lib folder.

Build

Running yarn build generates a UMD file and typings in the dist folder.

Deploy

This will be deployed as a NPM package when a tag is created, and not when merged to main. Please view the Circle CI configuration under publish job for details.