Oracle by Example brandingExpose Your Digital Assistant through a Web Channel

section 0Before You Begin

This 15-minute tutorial shows you how to make a digital assistant available to users through a web page.

Background

You’re part of a project team that just completed a digital assistant (DA). You now want to expose it though multiple channels, including your corporate web site.

In this tutorial, you'll configure and publish your DA through a web channel, download and install the sample client application, and run and test it against your DA. Since this allows users to access your DA through a web page, it’s within easy reach of a multitude of users.

What Do You Need?

  • Access to Oracle Digital Assistant.
  • A digital assistant or skill.
  • Node.js (https://nodejs.org/en/download/) installed on your system.

    You'll use npm, which is distributed with Node.js, to configure, install and host your web channel from your local machine.

    To check if you already have Node.js installed, run this command in your terminal:

    node -v

    To check if npm is installed, run this command:

    npm -v

  • The ODA Client samples for JavaScript.

    To get them, navigate to http://bit.ly/amcedownloads, accept the Oracle Technology Network license agreement, scroll down to the ODA Client SDKs section, and then download bots-client-sdk-js-samples-<Version_Number>.zip.

section 1Configure a New Web Channel for Your DA

  1. With the Oracle Digital Assistant UI open in your browser, click main menu icon to open the side menu.
  2. Click Development and select Channels.
  3. On the Users tab, click + Channel.
    Screenshot showing a small section of the Channels page. The Users tab is selected. The Add Channel button is the first item in the tab.
  4. In the Create Channel dialog, fill in the Name, Description, and App Display Name fields.
  5. From the Channel Type dropdown, select Web.

    The completed dialog might look something like this:

    Screenshot of the Create Channel dialog. It's Name, Description, and App Display name fields are filled out. The Channel Type field is set to Web.
  6. Click Create.

    Once created, you are returned to the page for the channel. At this point you need to route this channel to the digital assistant you created.

    Screenshot of the Channels page with none of the fields filled in. The Route To field is the first field in the list of fields.
  7. Open the Route To dropdown menu, enter your DA name in the Filter box, and select your DA.
  8. Switch Channel Enabled to ON.
  9. Copy the the value of the App Id field to a text file.

    You will use it later on in this tutorial while running the sample client application.

section 2Set Up the Web Channel on Your Local Machine

For purposes of this tutorial, you'll set up using your machine's localhost instead of using a public-facing web server.

  1. Find the bots-client-sdk-js-samples-<Version_Number>.zip file that you downloaded at the beginning of this tutorial and extract its contents.
  2. Open a terminal window or command prompt and navigate to the chat-sample-web directory of the contents of the extracted zip.
  3. Run the following command: 
    npm install
  4. Start the sample ChatSample app by running the following command: 
    node server.js

    After running this command, you should see a message indicating that the server is listening on port 3000.

    Screenshot of a terminal window. It contains a line showing that 'node server.js' has been called and the ensuing output ('listening on port 3000')

section 3Test the DA on the Web Channel

The web channel setup is ready, so let’s move on to testing your DA in the web channel.

  1. Open a new browser window and navigate to http://localhost:3000.
  2. Enter the app id that was generated when you created the channel (and which you copied to a text file) and click Continue.
    Screenshot of a web browser. In the address bar, it shows 'localhost:3000'. The page has some label text ('Mobile Cloud Enterprise' and 'Cloud'), a text field, and a Continue button.
  3. In the next screen, click the Chat with your BOT button.

    The Web Messenger widget should appear in the right side of your browser window.

    Screenshot of a web browser. The page has some label text ('Mobile Cloud Enterprise', 'Cloud', 'Welcome', and 'This sample app shows how to use the Oracle Intelligent BOT SDK to embed chat function in a web app'. Below that are buttons for 'Chat with your BOT' and 'Clear Chat'). To the right is a chat window.
  4. Start communicating with the DA by asking for help and/or making specific requests.
    A screenshot of a chat window showing a conversation starting with 'What can you do for me today?' and continuing with a welcome message and a menu of options provided by the Digital Bank and Pizza King skills (though the latter is cut off on the right margin of the window).

You have now introduced your DA to its public by hooking it up to a web interface.

more informationWant to Learn More?

  • Channels in Using Oracle Digital Assistant