Seamless Integration: Empowering Web Applications with IBM Watson Assistant

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 

• An IBM Watson Assistant Service instance IBM Watson Service on IBM Cloud. 

• SAP BTP Account– If you prefer to deploy on SAP BTP HANA Cloud. 

• Microsoft Visual Studio Code as the Integrated Development Environment (IDE). 

• SAP Business Application Studio (recommended) if deploying to SAP BTP HANA Cloud. 

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