push-webchat v2.14.0

Weni Webchat

A simple webchat widget to connect with Weni 💬platform. Originally forked from rasa-webchat and react-chat-widget and optimized for Weni.

Features

• Text Messages
• Quick Replies
• Images and Videos
• Markdown support
• Easy to import in a script tag or as a React Component
• Persistent sessions
• Typing indications
• Smart delay between messages

Usage

In a <script> tag

In your <body/>:

<div id="webchat"/>
<script src="https://storage.googleapis.com/push-webchat/wwc-latest.js"></script>
// Or you can replace latest with a specific version
<script>
  WebChat.default.init({
    selector: "#webchat",
    initPayload: "Hello",
    channelUuid: '05221ba1-e9c5-4ead-82fe-9e1086e54258', // External Channel UUID from Weni
    host: 'https://flows.weni.ai', // Host URL from Weni
    socketUrl: "https://websocket.weni.ai",
    title: "Title",
    subtitle: "Subtitle",
  })
</script>

About images: width and height define the size in pixels that images in messages are crop-scaled to. If not present, the image will scale to the maximum width of the container and the image.

It is recommended to use a particular version (i.e. "widget-.js") however the file "widget-latest.js" is also available and is updated continuously with the latest version.

As a React component

Install the package from GitHub by running:

npm install push-webchat

Then once it is installed it can be implemented as follows.

import { Widget } from 'push-webchat';

function CustomWidget = () => {
  return (
    <Widget
      initPayload={"/get_started"}
      socketUrl={"https://websocket.weni.ai"}
      title={"Title"}
    />
  )
}

• Make sure to have the prop embedded set to true if you don't want to see the launcher.

Parameters

Additional Examples

customMessageDelay

(message) => {
    let delay = message.length * 30;
    if (delay > 2 * 1000) delay = 3 * 1000;
    if (delay < 400) delay = 1000;
    return delay;
}

customAutoComplete

(currentInput) => {
    // you can gather strings in any manner to use as input suggestions
    return ['first message', 'second message', 'third message', 'fourth message', 'fifth message'];
}

onSocketEvent

onSocketEvent={{
  'connect': () => console.log('connection established'),
  'disconnect': () => doSomeCleanup(),
}}

params

The params props only allows to specify custom image dimensions:

params={{
        images: {
          dims: {
            width: 300,
            height: 200
          }
        }
      }}

suggestionsConfig

The suggestionsConfig props contains the configuration for the suggestions request made to the given url:

• url: The API Url for the requests
• datasets: The datasets IDs for the suggestions
• language: The language that the suggestions should be returned from the API call
• excludeIntents: The intents that should be excluded from the suggestions
• automaticSend: If set to true, when the user clicks the suggestion, it will send it automaticaly instead of changing only the input

suggestionsConfig = {
    url: 'https://api.bothub.it/v2/repository/examples/search_repositories_examples/',
    datasets: [
      "xxxxxxxx-yyyy-zzzz-wwww-yyyyyyyyyyyy",
      "yyyyyyyy-xxxx-wwww-zzzz-wwwwwwwwwwww",
      "aaaaaaaa-cccc-dddd-bbbb-aaaaaaaaaaaa"
    ],
    language: "en",
    excludeIntents: ['bias'],
    automaticSend: false,
  }

Customize the Widget interface

• All colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
• All dimension values can be any of the standard css lenght unit types.

Other features

Tooltip

Text messages received when the widget is closed will be shown as a tooltip.

Sending a message on page load

When reconnecting to an existing chat session, the bot will send a message contained in the localStorage key specified by the NEXT_MESSAGE constant. The message should be stringified JSON with a message property describing the message and an expiry property set to a UNIX timestamp in milliseconds after which this message should not be sent. This is useful if you would like your bot to be able to offer your user to navigate around the site.

API

Backends

The widget can be used with Push socket server. Contact contato@ilhasoft.com.br if you want to use it.

Push

The Push Webchat was forked from an open source project rasa-webchat team and it works with Push.

Sending messages from the backend to the chat widget

sending plain text

emit(session_id, {"text": "hello"})

sending quick replies

message = {
  "text": "Happy?",
  "quick_replies":[
    {"title":"Yes", "payload":"/affirm"},
    {"title":"No", "payload":"/deny"}
  ]}
emit(session_id, message)

sending a link Snippet

Admittedly a bit far fetched, thinking that Snippets would evolve to carousels of generic templates :)

message = {
  "attachment":{
    "type":"template",
    "payload":{
      "template_type":"generic",
      "elements":[
        {
          "title":"Title",
          "buttons":[ {
            "title":"Link name",
            "url": "http://link.url"
          }
        ]
      }
    ]
  }
}
}
emit(session_id, message)

sending a Video Message

message = {
  "attachment":{
    "type":"video",
    "payload":{
      "title":"Link name",
      "src": "https://www.youtube.com/watch?v=f3EbDbm8XqY"
    }
  }
}
emit(session_id, message)

sending an Image Message

message = {
      "attachment":{
        "type":"image",
        "payload":{
          "title":"Link name",
          "src": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_IX5FSDQLrwm9qvuXu_g7R9t_-3yBSycZ8OxpRXvMDaTAeBEW"
        }
      }
    }
emit(session_id, message)

sending a message with custom data

message = {
      "data":{
        "customField1": 'anything you want',
        "customField2": 'other custom data, 
      }
    }
emit(session_id, message)

sending a message to be displayed as a tooltip

The prop tooltipMessage will define what message should be displayed as a tooltip.

The prop tooltipDelay lets you set a delay before calling the payload. It default to 500ms.

message = {
  "text": "Hi!",
  "metadata":{
    "tooltip": true
   }
 }
emit('bot_uttered', message, room=socket_id)

Styles

hierarchy:

.push-conversation-container
  |-- .push-header
        |-- .push-title
        |-- .push-close-function
        |-- .push-loading
  |-- .push-messages-container
        |-- .push-message
              |-- .push-client
              |-- .push-response
        |-- .push-replies
              |-- .push-reply
              |-- .push-response
        |-- .push-snippet
              |-- .push-snippet-title
              |-- .push-snippet-details
              |-- .push-link
        |-- .push-imageFrame
        |-- .push-videoFrame
  |-- .push-sender
        |-- .push-new-message
        |-- .push-send

Distributing

If you want to fork this repository to create your own distribution, you can reuse some build files and enable Google Cloudbuild to do so. Just follow these steps:

1. Create a project in Google Cloud Console and follow these instructions;
2. Once you've connected and selected the right project in your terminal for Google Cloud project, just setup your npm user by running npm adduser;
3. Update package.json file and cloudbuild.yaml with proper name of your app;
4. Once everything is ready, you can just run gcloud builds submit --config=cloudbuild.yaml --substitutions=TAG_NAME="replace_with_tag_name"

Contributors

@Ilhasoft @johncordeiro @PHLF @znat @TheoTomalty @Hub4IT @dliuproduction @MatthieuJnon @mofortin