Add the Oracle Digital Assistant to Your Web App

You can integrate the Oracle Digital Assistant (ODA) into your Visual Builder web app simply by importing the Oracle Web SDK into your project and adding just a few lines of code.

Before you begin:

Set up the Oracle Web SDK channel in your Digital Assistant (DA) instance and associate it with a skill. See Overview of the new Oracle Web SDK and its customization features in Oracle Digital Assistant 19.10 and later
Record the following Oracle Web channel parameter settings: URI (your chat server URL) and Channel ID (the Web channel Id). You'll need to add these values to your code when you integrate the digital assistant.
Download the Oracle Web SDK 1.0 from the Oracle Digital Assistant (ODA) and Oracle Mobile Cloud (OMC) Downloads page.

To import the Oracle Web SDK and add required code:

Import the Oracle Web SDK into your project:
1. Extract the oda-native-client-sdk-js-1.0.0.zip file downloaded from the ODA download page.
2. Compress native-client-sdk-js folder where the web-sdk.js file is saved.
3. From your project, right-click the resources node in the navigation tree and click Import.
4. Import the compressed native-client-sdk-js.zip and click Import.
  Your imported files appear in the resources branch.
Add code to a page of your web app to invoke the Oracle Web SDK to connect and invoke the web-widget.
1. Select index from the navigation tree and select HTML (</>) to display the index page in HTML.
2. Add the following code before closing the </head> tag, including your URI and channelID values where indicated:
```
<script src="resources/native-client-sdk-js/web-sdk.js"></script> 
<script> 
    var chatWidgetSettings = { 
        URI: 'YOUR_URI', 
        channelId: ‘YOUR_CHANNELID’ 
  };
        setTimeout(() => { 
            window.Bots = new WebSDK(chatWidgetSettings); 
            Bots.connect().then(() => { 
                console.log("Connection Successful"); 
            }, (reason) => { 
                console.log("Connection failed"); 
                console.log(reason); 
            }); 
        }, 2000); 
</script>
```
  Line 1 points to the web-sdk.js file stored in the resources/native-client-sdk-js folder.
  
  Line 3-6 sets the URI and channelID which are passed as a parameter.
  
  Line 7 calls the functionality after 2 seconds. This is done to ensure that the page gets loaded.
  
  Line 8 initializes the library with the configuration.
  
  Line 9 establishes the connection with the server.
  
  Line 15 defines the delay between the rendering of a page and the display of the messenger icon or widget. The default setting is 2 seconds.
Run the project to test the integration:
1. Click Run to start the web application in a separate tab.
2. Click the Chat widget icon to start your chat bot.