1. How do I use Computer Telephony Integration (CTI)?
  2. Build the CTI toolbar as a Visual Builder App UI

Build the CTI toolbar as a Visual Builder App UI

So far, you've seen how to build your own CTI toolbar as a JET application in a standalone web server. Now, we'll look at using Oracle Visual Builder to implement your own CTI toolbar application without the need for a using a standalone web server for the deployment.

For the following steps, see the Oracle Visual Builder page on Help Center for information.

Overview

To integrate a Visual Builder application with your CTI provider, complete the following steps:

  1. Create a new Visual Builder application.
  2. Import the media-toolbar app workspace.
    1. Review the application structure.
  3. Publish the application.
  4. Load the application in the media toolbar of your Fusion application.
  5. Test the integration with a dummy supplier.
  6. Verify your progress.

1. Create a new Visual Builder application

  1. Set up your Visual Builder instance if you haven't already done so, and sign in as a Service Developer.
  2. Create a new application.
  3. When finished creating your application, click + Web Application to create a new App UI.

2. Import the Media Toolbar App Workspace

After creating the Visual Builder application:

  1. Click the ellipsis icon, and select Import.
  2. Import the media_toolbar.zip workspace file.

After the import completes, the mediatoolbarapp App UI is added to the Web Apps section.

2a. Application Structure

The imported application has the following structure:
  • mediatoolbarapp is the Visual Builder App UI used for the media toolbar application.
    • main is the primary flow in the application.
      • admin-page is used as an admin page to test the dummy supplier.
      • embedded-page is the actual media toolbar application page. This page is rendered inside the media toolbar window in Fusion.

JavaScript Resource Files

The application includes several JavaScript files contained in the Resources/js/ folder.
  • fusionHandler.js: Contains the FusionHandler class. This class includes functions that use UEF API calls to handle Fusion-related CTI scenarios.
  • integrationActionHandler.js: Contains the IntegrationActionHandler class. This class acts as a bridge between your CTI supplier and the CTI accelerator application.
  • integrationEventsHandler.js: Contains the IntegrationEventsHandler class. This class acts as a bridge between FusionHandler and the CTI accelerator application.

Supplier Handler Files

The supplier handler files contain supplier-specific logic for handling calls.

genesysHandler.js contains logic for handling calls in Genesys.

twilioHandler.js contains logic for handling calls in Twilio.

dummyHandler.js is used as a dummy supplier to test CTI flows.

3. Publish the Application

After importing the compressed file, publish the application to get the URL needed for media toolbar configuration.

To publish the application:

  1. Click the ellipsis icon and select Stage.
  2. Click the ellipsis icon again, and select Publish.
  3. Click the ellipsis icon again and select Open Published Application to preview the application.

4. Load the Application in the Fusion Media Toolbar

Use the published or preview Visual Builder application URL to configure the media toolbar in your Fusion application.

This URL allows the Visual Builder application to load directly inside the Fusion media toolbar window.

5. Test with a Dummy Supplier

After completing the setup, test the integration using the dummy supplier.

  1. Sign in to Fusion as an agent.
  2. Click the phone icon to open the media toolbar.
  3. In the media toolbar, select Dummy from the Choose Vendor drop-down list.
  4. Click the agent button to make the agent available for calls.
  5. Open the admin page using the following URL:

    https://<your_visual_builder_instance>/ic/builder/rt/media_toolbar/live/webApps/mediatoolbarapp/?page=shell&shell=main&main=admin-page

  6. Enter a phone number.
  7. Click the phone icon to start a call.
  8. Accept the call from Fusion or from the media toolbar.
  9. End the call from Fusion or from the media toolbar.
  10. Save the wrap-up.

6. Verify Your Progress

After loading the application in the media toolbar, sign in to your Fusion application and click the phone icon.

The media toolbar window should open, and the Visual Builder media toolbar application should load inside the Fusion application.