Skip to Content
Technical Articles
Author's profile photo Dipper Zheng

Build SAP Conversational AI Chatbot for Creating Sales Orders – Part 3: Connect to Webpage

In previous blog post, you have learnt how to build the business process logic and let bot call the API to create a sales order. Okay, now let’s try to consume this bot in a webpage.

Step 1: Enable the Webchat Channel

1. Open bot and switch to “Connect” tab, here you can see there are several channels supported by SAP Conversational AI platform:

In this blog post, we are going to use the “Webchat” channel. You can find more details about it in here.

2. Click the “Webchat” channel, you can customize the bot appearance (e.g., color scheme) in the opened-up dialog, then click “Create” button.

3. Note down the generated Webchat script.

Step 2: Prepare a index.html File

1. Create a index.html file, and edit it with VS code or any IDE you prefer

2. Edit the content to be:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Chatbot</title>
</head>

<body>
    <h1>Use SAP Conversational AI Chatbot in Webpage</h1>
    <script></script>
</body>

</html>

3. Copy the Webchat script and replace <script></script> in the index.html file, make the content to be like:

4. Save it

Step 3: Test the index.html File

1. Open the index.html file with a browser (e.g., Chrome), and you will see the webpage:

There is a “Click on me!” button in the right bottom of the webpage.
2. Click the button and input the test sentence “I want to create sales order for customer 10100001, 5 PC of product TG11, sales area 1010/10/00”:

Okay now we can chat with the bot in a webpage. But what if we want to open this webpage online rather than locally? Let’s deploy it to BTP.

Step 4: Deploy the index.html File to BTP

1. Get a BTP account. SAP provide a trial plan of BTP, so you can try it freely. For how to get a free BTP account, see tutorial Get a Free Account on SAP BTP Trial.

2. Install Cloud Foundry CLI in your PC. You can refer tutorial Install the Cloud Foundry Command Line Interface (CLI) to install it and login to the API endpoint.

3. Create a manifest.yml file in the root directory of the index.html file, and add the following content:

applications:
- name: sales-order-helper-chatbot
  path: .
  instances: 1
  buildpacks: 
    - https://github.com/cloudfoundry/staticfile-buildpack.git
  random-route: true
  memory: 128M

4. Open your terminal, and navigate to the directory of the index.html file, the structure will look like:

├── index.html
└── manifest.yml

5. Execute “cf push” in the terminal

Now we can open the online webpage by the route mentioned in the execution log:

We can also check this application in BTP:

Okay that’s all for the part 3 of this blog series. In this blog post, we learned how to consume a chatbot in webpage and how to deploy it to BTP. If you have any questions or ideas, please feel free to leave your comments below.

If you follow the entire blog series, you now have an online chatbot that can help you create sales orders in the SAP S/4HANA Cloud system. And, you also have a better understanding of the first picture showed in part 1 blog post:

Hope you enjoy the blog series and hope my experiences could help you. See you in next blog post soon 🙂

Series Navigation

Part 1: Train

Part 2: Build

Part 3: Connect to Webpage (Current article)

Related Information

SAP Conversational AI

SAP Conversational AI – Webchat | SAP Help Portal

Tutorial – Get a Free Account on SAP BTP Trial

Tutorial – Install the Cloud Foundry Command Line Interface (CLI)

 

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.