Talk
Talk is a web app built by react for handling POD chating use cases
Installation
npm install podchatweb --save
Development
git clone https://github.com/act1gmr/talk.git
npm install
Required Post installation (UI kit)
git clone https://github.com/act1gmr/talk-ui-kit.git
npm install
After packages installation:
__ |_ Talk |_ Talk-ui-kit
npm run startUsage
React component:
import {ReactTalk} from "podchatweb";
class MyApp extends Component {
render() {
const {token} = this.props;
return <ReactTalk token={token}/>
}
}Programmatic calling:
Module loader:
import {Talk} from "podchatweb"
class MyApp extends Component {
componentDidMount() {
const {token} = this.props;
Talk({token}, "myChat")
}
render() {
return <div id="myChat"/>
}
}Old school:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="dist/index-old-school.js"/>
</head>
<body>
<div id="app"></div>
<script>
Talk({token: "YOUR_INITIAL_TOKEN", ...ANOTHER_OPTIONS }, "app" /*div ID*/, function (instance) {
//SET TOKEN WHEN YOU GOT FRESH TOKEN
instance.setToken("REFRESH_TOKEN")
});
</script>
</body>
</html>Support mode
You can use Talk as support mode module with this simple config.
import {ReactTalk} from "podchatweb";
class MyApp extends Component {
render() {
const {token} = this.props;
const supportMode = {
threadId: 0,
autoShowing: true,
hideBadge: false,
onClose() {
console.log("Closed")
},
onOpen() {
console.log("Opened")
},
onLoading(result) {
//result === false: loading stoper || result === true: loading for getting thread
console.log("Loading", result)
},
onReady(chatFunctions) {
//store chatFunctions function then you can use it later
/*
* you have:
* chatFunctions.open() || open chat programmatically
* chatFunctions.close() || close chat programmatically
* chatFunctions.changeThread(newThreadId) || change thread by thread if
* chatFunctions.setToken(newThreadId) || set token when you got fresh token
* */
window.chatFunctions = chatFunctions;
}
}
return <ReactTalk supportMode={supportMode} //SUPPORT THREAD ID
token={token}/>
}
}Or in old school mode:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="dist/index-old-school.js"></script>
</head>
<body>
<div id="app"></div>
<script>
window.Talk({
token: "TOKEN",
supportMode: {
threadId: 0,
autoShowing: true,
hideBadge: false,
onClose() {
console.log("Closed")
},
onOpen() {
console.log("Opened")
},
onLoading(result) {
//result === false: loading stoper || result === true: loading for getting thread
console.log("Loading", result)
},
onReady(chatFunctions) {
//store chatFunctions function then you can use it later
/*
* you have:
* chatFunctions.open() || open chat programmatically
* chatFunctions.close() || close chat programmatically
* chatFunctions.changeThread(newThreadId) || change thread by thread if
* chatFunctions.setToken(newThreadId) || set token when you got fresh token
* */
window.chatFunctions = chatFunctions;
}
}
}, "app" /*div ID*/);
</script>
</body>
</html>Props
| Prop | Usage | Type |
|---|---|---|
| supportMode | Mentioned earlier | Object |
| small | Look like loading Talk on mobile device | Boolean |
| disableNotification | No notification | Boolean |
| routerLess | No changes on browser route by chat | Boolean |
| onRetryHook | While retrying for a new connection if you set this prop chat will call your function and wait for a Promise return. Resolve that promise with a fresh token | Func |
| onSignOutHook | Click on sign out button and this props will make you a decision maker to what to do after that. | Func |
| onTypingHook | While typing in a thread you will get the content | Func |
| onNotificationClickHook | You can make yourself notify when a user click on a browser default notification that generated by chat. | Func |
Destroy talk
You can destroy Talk by using a global variable
window.DestroyTalk();License
This project is open-sourced software licensed under the MIT license.