BlogSupport

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 Function Blocks 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 block 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 block connects your Gupshup bot to realtime data streams, to trigger actions based on an input.
Some Blocks require 3rd Party Service Sign-up

When Blocks integrate with 3rd party services, e.g. Amazon, Librato, MapBox or RingCentral, the 3rd party service often requires account setup in order to use. Please make sure to visit each BLOCK's documentation page, located at Blocks Catalog, in order to know what is required.

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 BLOCK 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. Make note of the bot name from the bots section of the dashboard.

Setting up the PubNub Function

To add the PubNub Function, do the following:

  1. Click Try it Now on the Gupshup BLOCK page to import the code directly into a new or existing app as a new Function called gupshup.

  2. Once you've added the Function to an app, go to your app's Functions list, and click the Chat_Handler function.

  3. Update the botname constant with the identifier from the last Gupshup setup step, above, and click the red Save button.

  4. Click Start Module to start the Function, and test it using the Publish button and payload 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:

    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:

    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);
});
←Profanity FiltersLanguage Translation→