You can create pages for chat agents and chat bots that support both smartphones and PCs.
For PC, show chat in a window that does not disturb existing content
For mobile dvices like smartphones and tablets, chat UI will be overlaid on existing pages to avoid disturbing existing content

DEMO

https://riversun.github.io/chatux/

How to play demo.

This demo is simple echo chat. But a few command available.If you write "show buttons", you can see action buttons in chat. Or you write "show image", you can see image in chat.

Quick start

Check this example.


<!DOCTYPE html>
<html lang="en">
<head>
    <title>chatux example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body style="padding:0px;margin:0px;">
<div style="padding:40px">
    <h1>chatux example</h1>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<script src="https://riversun.github.io/chatux/chatux.min.js"></script>
<script>

    const chatux = new ChatUx();

    const opt = {
        api: {
            //URL of chat server
            endpoint: 'https://script.google.com/macros/s/AKfycbwpf8iZfGXkJD6K__oCVQYF35HLBQjYxmKP0Ifrpe_piK4By4rh/exec',
            //HTTP METHOD
            method: 'GET',
            //DATA TYPE
            dataType: 'jsonp'
        },
        window: {
            title: 'My chat',
            infoUrl: 'https://github.com/riversun/chatux'
        }
    };

    //initialize
    chatux.init(opt);
    chatux.start(true);

</script>
</body>
</html>

Show on PC

Show on mobile

install and minimal code

using npm

install

npm install chatux --save

code

import {ChatUx} from 'chatux';

const chatux = new ChatUx();

chatux.init({
    api: {
        endpoint: 'http://localhost:8080/chat',//chat server
        method: 'GET',//HTTP METHOD when requesting chat server
        dataType: 'json'//json or jsonp is available
    }
});

chatux.start();

using with script tag

<script src="https://riversun.github.io/chatux/chatux.min.js"></script>

code

const chatux = new ChatUx();

chatux.init({
    api: {
        endpoint: 'http://localhost:8080/chat',//chat server
        method: 'GET',//HTTP METHOD when requesting chat server
        dataType: 'json'//json or jsonp is available
    }
});

chatux.start();

How it works

The system of chatux is very simple.

Let's look at the execution sequence of chatux.

Suppose you have a chat server for chatux at http://localhost:8080/chat Specify server endpoint like this.

chatux.init({
    api: {
        endpoint: 'http://localhost:8080/chat',
        method: 'GET',
        dataType: 'json'
    }
});

The following is the sequence.

1.　chatux sends user input text to chat server.
GET http://localhost:8080/chat?text=hello
2.　The server processes user input text and returns a response as JSON.

{
  "output": [
    {
      "type": "text",
      "value": "You say 'hello'"
    }
  ]
}

3.　According to the response, chatux renders the result on the chat screen.

So, if you create chat server that can do this kind of interaction, you can easily create chatbots etc.

Next, let's see how to render.

How to render a chat UI

Rendering is indicated by simple JSON generated by chat server.

Show text

JSON

{
  "output": [
    {
      "type": "text",
      "value": "Hello world!"
    }
  ]
}

RESULT

Show image

JSON

{
  "output": [
    {
      "type": "image",
      "value": "https://avatars1.githubusercontent.com/u/11747460"
    }
  ]
}

RESULT

Show action buttons

JSON

{
  "output": [
    {
      "type": "option",
      "options": [
        {
          "label": "label1",
          "value": "value1"
        },
        {
          "label": "label2",
          "value": "value2"
        },
        {
          "label": "label3",
          "value": "value3"
        }
      ]
    }
  ]
}

RESULT

Show html

{
  "output": [
    {
      "type": "html",
      "value": "Click <a href=\"https://github.com/riversun\" target=\"_blank\" >here</a> to open a page.",
      "delayMs": 500
    }
  ]
}

Show youtube

JSON

{
  "output": [
    {
      "type": "youtube",
      "value": "TP4lxliMHXY", //youtube video id
      "delayMs": 500
    }
  ]
}

RESULT

Show multiple elements

JSON

{
  "output": [
    {
      "type": "text",
      "value": "What is this?",
      "delayMs": 500
    },
    {
      "type": "image",
      "value": " https://upload.wikimedia.org/wikipedia/commons/a/a3/Aptenodytes_forsteri_-Snow_Hill_Island%2C_Antarctica_-adults_and_juvenile-8.jpg"
    },
    {
      "type": "option",
      "options": [
        {
          "label": "bob",
          "value": "value1"
        },
        {
          "label": "riversun",
          "value": "value2"
        },
        {
          "label": "john",
          "value": "value3"
        }
      ]
    }
  ]
}

RESULT

Open sub window (ex.Url you want to see)

JSON

{
  "output": [
    {
      "type": "window",
      "title": "iframe page",
      "url": "https://riversun.github.io/i18nice",
      "left": 20,
      "top": 20,
      "width": 400,
      "height": 250,
      "addYOffset": true,
    }
  ]
}

RESULT

Open sub window (ex.Video on Youtube)

JSON

{
  "output": [
    {
      "type": "window",
      "title": "youtube movie",
      "html": "<div style=\"position: relative; width: 100%; padding-top: 56.25%;background:black;overflow: hidden\"><iframe style=\"position: absolute;top: 0;right: 0;width: 100% !important;height: 100% !important;\" width=\"400\" height=\"300\"  src=\"https://www.youtube.com/embed/nepdFs-2V1Y\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe></div>",
      "mobileUrl": "https://www.youtube.com/embed/nepdFs-2V1Y",
      "left": 60,
      "top": 60,
      "width": 400,
      "height": 250,
      "addYOffset": true,
      "overflow": "hidden",
      "backgroundColor": "black",
      "delayMs": 10
    }
  ]
}

RESULT

Open sub window (ex.Video on Google Drive)

JSON

{
  "output": [
    {
      "type": "window",
      "title": "google drive movie",
      "html": "<div style=\"position: relative; width: 100%; padding-top: 56.25%;background:black;overflow: hidden\"><iframe  style=\"position: absolute;top: 0;right: 0;width: 100% !important;height: 100% !important;\"  src=\"https://drive.google.com/file/d/something_id/preview\" width=\"400\" height=\"300\"></iframe></div>",
      "mobileUrl": "https://drive.google.com/file/d/something_id/preview",
      "left": 100,
      "top": 100,
      "width": 400,
      "height": 250,
      "addYOffset": true,
      "overflow": "hidden",
      "backgroundColor": "black",
      "delayMs": 10
    }
  ]
}

RESULT

FAQs

What is chatux?

Is chatux popular?

Is chatux well maintained?

Package last updated on 17 Mar 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

chatux

Overview

What is 'chatux' like?

DEMO

Quick start

install and minimal code

using npm

using with script tag

How it works

How to render a chat UI

Show text

Show image

Show action buttons

Show html

Show youtube

Show multiple elements

Open sub window (ex.Url you want to see)

Open sub window (ex.Video on Youtube)

Open sub window (ex.Video on Google Drive)

Related posts

Introducing Reachability for PHP

Introducing Data Exports