- By Ankit Guria Technology Engineer, IBM Ecosystem Engineering, Blue Partners Lab
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.
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
- 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.
Completing this tutorial should take about 10 minutes.
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:
- 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:
- The following is the architecture of a SAP UI5 application, we are using VS code for the development purpose, we can use other IDEs as well as per our requirement.
Note: The above is an SAP UI5/Fiori application project architecture. We are supposed to play around the “Index.html” file of the 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 (Line 30 to Line 49).
- Now we need to run our application and the Watson Assistant is now available at the bottom right corner of the screen to answer your queries.
NOTE: And the above 4 steps can get Watson Assistant Chatbot ready in any SAP UI5/Fiori application.
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.
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




