Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
ankitguria
Explorer
5,917
In this tutorial, we will show how to add IBM Watson Assistant to multiple web applications and the steps on how to integrate our Watson Assistant using IBM Cloud to any web application. In this comprehensive detailed tutorial, we will show how to seamlessly integrate Watson Assistant into multiple web applications, using the powerful capabilities of IBM Cloud. You’ll see how Watson Assistant, enables not only developers but also  data scientists to directly integrate the Chatbot into the UI HTML of web applications, making it a versatile tool for enhancing user experiences.

As a data scientist cannot directly integrate Watson Assistant chatbot directly into the UI frontend of the web applications, it is essential that the Watson Assistant Embedded configuration is done before building the Chatbot.With the help of Watson Assistant on IBM Cloud or Watson Studio on IBM Cloud, you can easily connect the built Watson Assistant Chatbot service into a website or a browser-dependent web applications or mobile applications, analyse the data, and enhance the data according to the user/business requirements.



Learning objectives 


When you have completed this tutorial, you will understand how to: 

  • Add Watson Assistant to a SAP UI5/Fiori application 

  • Add Watson Assistant to a JavaScript web application 

  • Save the Watson Assistant chatbot to IBM Cloud 


 

Prerequisites 






 

Estimated time 


Completing this tutorial should take about 10 minutes. 

 

Steps 


Following this tutorial, you can deploy the Watson Assistant Chatbot on any of the web dependent applications. 

Steps to integrate Watson Assistant Chatbot on Web Applications or SAPUI5/Fiori Applications: 


Step 1: Create an IBM Watson Assistant service instance using the following: 



  • Go to the IBM Cloud website (cloud.ibm.com) and sign into your account. 

  • Create a new Watson Assistant service instance or use an existing one. 

  • Make note of the credentials or API key that allows you to access the service. 

  • Copy the embedded part of the Watson Assistant:  





Figure 1: Watson Assistant Embedded Part 


 

Step 2: Loading the Structure of the SAPUI5 application


The following is the architecture of a SAP UI5 application. We are using VS code for the development purpose but we can use other IDEs as well, per our requirement. 

 


Figure 2: SAP UI5 Project Architecture



Note: The above picture shows an SAP UI5/Fiori application project architecture. We are supposed to play around the “index.html” file of the application.


Step 3: Adding Embed part to the Project of SAPUI5 Application 


We need to embedded part of IBM Watson Assistant service to “index.html” file. 

  • Adding the copied part from Step 1 to the <script> tag of index.html.


<script>
window.watsonAssistantChatOptions = {
integrationID: "***-bc18-4a67-a017-**", // Replace this with the integration ID of your Watson Assistant here.
region: "us-south", // The region your integration is hosted in.
serviceInstanceID: "****-db18-4353-95fe-*****", // Replace this with ID of your service instance.
onLoad: function(instance) {
instance.render();
}
};
setTimeout(function(){
const t=document.createElement('script');
t.src="https://web****.global.assistant.watson.appdomain.cloud/*****/" + (window.watsonAssistantChatOptions.clientVersion || 'latest') + "/WatsonAssistantChatEntry.js";
document.head.appendChild(t); // replace the t.src with your code
});
</script>

 

Code: Adding the embedded part to index.html (to be replaced by the actual embed part- add in the commented part)



Step 4: Testing the Chatbot and checking the UI


Now we need to run our application and the Watson Assistant is now shown at the bottom right corner of the screen to answer your queries.



Figure 3: Watson Assistant in the UI


 

Note: The above 4 steps make the Watson Assistant chatbot ready to use in any SAP UI5/Fiori application.


 


Figure 4: IBM Watson Assistant Chatbot


 

Summary


This tutorial serves as a comprehensive guide for data scientists and developers, providing the necessary steps to integrate IBM Watson Assistant seamlessly across different web applications. By leveraging the capabilities of IBM Cloud, users can enhance their web applications with intelligent conversational agents that deliver exceptional user experiences and valuable insights.


 

Next Steps


As next steps, this project can now be used as a base to build and add more features on top of it to create chatbots for different use cases.


Watson Assistant Documentation:


https://cloud.ibm.com/docs/assistant?topic=assistant-getting-started

Labels in this area