@kaitaku/kaitaku-web-sdk
TypeScript icon, indicating that this package has built-in type declarations

0.2.3 • Public • Published

Kaitaku Web SDK

CircleCI

codecov

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.

VanillaJS
<!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.

Readme

Keywords

none

Package Sidebar

Install

npm i @kaitaku/kaitaku-web-sdk

Weekly Downloads

12

Version

0.2.3

License

none

Unpacked Size

1.55 MB

Total Files

115

Last publish

Collaborators

  • taku