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.
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.
1. Create a index.html file, and edit it with VS code or any IDE you prefer
2. Edit the content to be:
3. Copy the Webchat script and replace <script></script> in the index.html file, make the content to be like:
4. Save it
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.
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:
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 🙂
Part 1: Train
Part 2: Build
Part 3: Connect to Webpage (Current article)
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)
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)
- SAP Managed Tags:
2 Comments
