PubNub Chat

Chatbots

Chatbots can understand and respond to user requests automatically. Chatbot integrations can be useful in a variety of situations, such as customer service, new user registration, e-commerce, and anywhere you want a system to be able to respond to user requests.

With PubNub Functions, you can create a custom chatbot or connect to existing chatbot services, helping you to create real-time interactive conversations for your users. Select from a list of prebuilt Integrations or build an integration with a service of your choice. Here are a few suggestions:

  • IBM Watson Assistant allows you to build a chatbot or virtual agent that can carry out conversations with end users in real time. The integration includes a number of cognitive techniques, making your chatbot fully customizable to suit your needs.
  • Amazon Comprehend uses natural language processing (NLP) to extract insights about the content of documents without needing any special preprocessing.
  • Gupshup is an advanced bot and messaging platform. It enables you to quickly and easily build, test, deploy, and manage chatbots across all messaging channels. The PubNub Gupshup integration connects your Gupshup bot to realtime data streams, to trigger actions based on an input.

Gupshup Chatbot tutorial

The following is a simple example of how to build a chatbot and enable bot integration in a web app with the Gupshup integration and a few lines of HTML and JavaScript.

Getting started with the Gupshup bot API

First, you’ll need to get started with a Gupshup account to take advantage of the Bot API.

  1. Go to the Gupshup signup form and sign up for a free trial using your GitHub or Facebook account.

  2. Follow the wizards to create a new bot integration using the IDE, ensuring that there is an HttpEndpointHandler function to respond to HTTPS requests from the Function.

  3. Copy the bot name from the bots section of the dashboard.

Gupshup Function Code

Go to SDK

export default (request) => {
    const pubnub = require('pubnub');
    const xhr = require('xhr');

    const botname = request.message.botname; // or hard-coded botname
    const responseChannel = request.message.responseChannel; // or hard-coded channel

    const message = JSON.stringify(request.message.text);
    const url = "https://www.gupshup.io/developer/bot/" + botname + "/public";
    console.log('URL is ' + url);

    const http_options = {
        "method": "POST",
        "body": "text=" + message
    };

    return xhr.fetch(url, http_options).then((response) => {
        console.log(response.body);
        pubnub.publish({
            "channel": responseChannel,
            //"message": JSON.parse(response.body)
            "message" : response.body
        });
          return request.ok();
    }).catch((reason) => {
        console.log(reason);
    });
};

Setting up the PubNub Function

  1. Create a new function. Go to your Admin Portal and create a new module, and then create a new Before Publish function. The function should be set up to trigger on a specific set of channels (such as chat.*) or on all channels using wildcards (*).

  2. Copy the function code from above. You'll need to update the API key for the service from your account.

  3. Click Start module to start the function, and test it using the Test Payload field and Publish button on the left.

Tip

For a more detailed overview of writing a function, refer to these instructions on the Functions Overview page.

Connecting your code to a UI

Now that the Function is ready, you can connect it to a user interface. This example uses the PubNub Angular SDK, but feel free to use any of PubNub's JavaScript SDKs as appropriate.

  1. In your HTML file's <head> section, reference the PubNub scripts:

    <script src="https://unpkg.com/pubnub/dist/web/pubnub.js"></script>
<script src="https://unpkg.com/pubnub-angular2/dist/pubnub-angular2.js"></script>

  2. Define your Angular constructor to initialize a PubNub instance and subscribe to the gupshup-input channel:

    Go to SDK

    constructor: [PubNubAngular, function(pubnubService){
    var self = this;
    self.pubnubService = pubnubService;
    self.channelName = 'gupshup-input';

    pubnubService.init({
        publishKey:   'YOUR_PUB_KEY',
        subscribeKey: 'YOUR_SUB_KEY',
        ssl:true
    });

    pubnubService.subscribe({channels: [self.channelName], triggerEvents: true});

    self.messages = pubnubService.getMessage(this.channelName,function(msg){
        // no handler necessary, dynamic collection of msg objects
    });
}];

  3. Replace YOUR_PUB_KEY and YOUR_SUB_KEY with your app's publish and subscribe keys.

  4. Set up your PubNub publish function to query your Gupshup bot for the time of day:

    Go to SDK

    publish: function(){
    this.pubnubService.publish({channel: this.channelName,message:{text:"get time"}});
}
});

    You'll want to have a button set up in your template to call that function:

    <button class="btn btn-primary" (click)="publish()">Get Time from Bot!</button>

  5. Add PubNubAngular to your main class's @NgModule decorator:

    providers: [PubNubAngular]

  6. Finally, add a DOM event listener to get your code running:

    document.addEventListener('DOMContentLoaded', function(){
    ng.platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(app.main_module);
});
←GIFsLanguage Translation→