Podchatweb NPM

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:

npm run start

Usage

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

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.

chat podchat web fanap

@everything-registry/sub-chunk-2452 podchatwebapp

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago