Integrate ODA with Oracle APEX

female software engineer coding on computer — Photo by ThisIsEngineering on Pexels.com

Article originally published in the Oracle Digital Assistant blog

The Oracle Web SDK is a JavaScript library that you can use to integrate Oracle Digital Assistant into your website or web application. The library provides a customizable messenger that communicates with the Oracle Digital Assistant web channel via the Oracle Digital Assistant message server.

Oracle APEX is the world’s most popular enterprise low-code application platform that enables you to build scalable, secure enterprise apps, with world-class features. These apps can be deployed anywhere – cloud or on-premises

Using APEX, developers can quickly develop and deploy compelling apps that solve real problems and provide immediate value. You don’t need to be an expert in a vast array of technologies to deliver sophisticated solutions. Focus on solving the problem and let APEX take care of the rest.

This article explains how to configure and integrate the Oracle Web SDK messenger in Oracle APEX web applications. It is expected that you already have an APEX application and knowledge of the ODA Web SDK.

Create an ODA channel

As with any other channel, we need to start by creating an ODA channel, in this case, it will be the type of Oracle Web.

Choose the Skill or DA you wish to expose. I have an APEX FAQ skill for this purpose.

We store the Channel Id and as well the ODA URI that will be required at a later stage.

Configure settings.js

At this point, you should have downloaded the Oracle Web SDK. If that is not the case, please check this page. If this is the first time using this channel, this tutorial offers a quick way into it.

You can configure the ODA widget as much as you want (check here), but for this particular example, only the fundamental fields will be updated, and those are the URI and the Channel ID from the settings.js file.

var chatWidgetSettings = {

            URI: 'oda-xxxx-da4.data.digitalassistant.oci.oraclecloud.com/',
            channelId: '86e89a76-3053-44c5-bd18-6b47ee238134'

Open your APEX Application

You should have an APEX application so that we can add the ODA widget. I created one from the existing APEX samples and it is just for the purpose of this article.

Add shared components to the APEX Application

We need to add settings.js and web-sdk.js as shared components in the APEX application. This will allow us to reference them from the web page.

Once you press Shared Components, click Static Application Files

Then upload both settings.js and web-sdk.js files.

Make note of their respective references as they will be needed:

settings_apex.js : #APP_FILES#settings_apex.js

web-sdk.js : #APP_FILES#web-sdk#MIN#.js

PS: I do have a settings file with a modified name but that makes no difference as long as the references to the file are correct

Decide on the page to display the widget

We can decide where to add the ODA widget, but in this case, we will add it to the global page, so that it is configured once and then can be added to any page as desired without further work.

Add static content

The static content is the block that will hold the HTML code we need in order to enable the ODA widget. You can choose the application region where to add this content.

Add the HTML that references settings.js and web-sdk.js

Below is the code that references both the settings.js and the web-sdk.js which has an initialization method triggered with the onload event.

You may also want to have an invisible block (there is no need to have a visible element surrounding the widget), and that can be achieved with the Appearance Template as seen below.