@kaitaku/kaitaku-web-sdk
v0.2.3
Published
[](https://circleci.com/gh/kaitakuhq/kaitaku-web-sdk/tree/main)
Downloads
12
Readme
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 [email protected]: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.