Introductory topics
- Integrating communication channels brings synergies and efficiencies to business applications throughout the enterprise and makes innovative solutions possible.
- Building channel solutions has been difficult and limited to paired integrations between channels of a single provider and a single business application, best suited for contact centers.
- AMC DaVinci is a flexible cloud-based integration platform that dynamically assembles multi-point simple or complex integrations to support a best-of-breed channel strategy.
- The DaVinci SDK and API enable developers to build component apps that integrate new and legacy applications and communication channels, and to add new functionality to communication solutions.
Introducing the DaVinci Platform SDK
Building communication integrations used to require the great effort of three integrations: separate integrations into the CRM application API and the contact channel provider API, and a final complex functional integration that stitches these two systems together: building common services such as authentication and logging, weaving the interaction workflow, and reconciling real-time event-driven communication interactions with business application transactions.
Now, creating a DaVinci app component requires two much simpler integrations: integrating the application requests and services through the application API; and integrating into the DaVinci Framework through its JavaScript APIs. This greatly simplifies the integration effort and extends the market reach of any app. The integrated app becomes shared functionality of the DaVinci Platform accessible as a component of any customer solution.
Purpose and features of the DaVinci SDK
Joining communication channels with business applications together forms the foundation of powerful interaction-oriented applications. Such assemblies bring synergies and efficiencies that range from contact centers to integrated business relationship processes to enterprise collaboration. They simplify and guide common tasks to speed customer interactions. They coordinate information and actions to speed knowledge workers in their efforts. They capture details and trends in business processes and relationships throughout the enterprise. They make possible new, previously unanticipated or impossible solutions, such as bots that automate common business interactions, whether simple or complex.
Since the advent of the call center, these business communication solutions have been constricted to static paired integrations. Each integrates a single communication channel provider into a CRM application, either as a fixed integration or as a tightly coupled configuration. Most are pre-built integrations; many are check-the-box integrations given away as add-ons by channel providers and application vendors. For unsupported pairs, channel and application vendors open their products with DIY APIs, including RESTful and JavaScript web APIs.
But developing these integrations is difficult. It requires skills in traditional computing languages, arcane real-time, event-driven, and multi-threaded programming techniques. Developers must have sophisticated domain knowledge of the application, the integrated communication channel, and the contact center and collaboration processes.
It is a narrow and expensive group of developers who have the skills to do all that.
Today there is a great need to open up the contact center to broader commercial and bespoke functionality. Integration complexity becomes a barrier to new CRM / CSM application vendors and channel providers. It becomes a costly impediment to systems integrators and enterprises who wish to integrate legacy applications or diversify integrated communication throughout the enterprise, to innovative automated and collaborative solutions, and to industries with sophisticated customer interaction workflow requirements (such as telemedicine).
Those unwilling or unable to assume the cost and effort of building integrations are orphaned in the marketplace. And those who do assume the burden of custom integrations are trapped into the narrow set of application and communication channel vendors they have selected.
The entire consumer community suffers because dominant vendors leverage this integration complexity to impose their hegemony on the application and communication channel markets.
Overview of DaVinci
AMC DaVinci is a flexible contact center solution platform. It unites communication channels with business applications within a single application browser session, “a single pane of glass.” It may be deployed in the cloud, on premise, or in hybrid configurations, with cloud and premise components.
The power of the DaVinci platform lies in its distributed, component web architecture. Instead of implementing tightly coupled paired integrations, customers assemble solutions from the DaVinci ecosystem, a growing collection of autonomous apps integrated into the DaVinci Framework.
Each independent app is a web application responsible for discrete functionality. CRM application apps integrate business applications; channel apps integrate contact channel providers, etc.
Apps can add functionality to the solution. They can incorporate external data sources. They can perform common services such as coordinated presence, or common tasks such as speed dial. They can bring new capabilities such as acting as agent assistants presenting scripts or recommending knowledgebase resources. In the future they may serve as single-purpose or artificial intelligent bots, automated agents.
Developers no longer need to create a complete contact channel integration. They need only incorporate their functionality through a DaVinci app component.
The DaVinci SDK
The DaVinci SDK publishes the same APIs and deployment tools AMC developers use to build CRM application and contact channel apps. This initial release includes the API documentation and simplistic sample integrations on GitHub that show how to build CRM application integrations using JavaScript and React, and contact channel integrations using TypeScript and Angular.
How the DaVinci Platform works
Before delving into the API and integration effort, let’s first understand how DaVinci works; how it uses the web development stack to simplify and expedite communication integrations.
DaVinci Agent is a container, a single-page application, that does three things:
- It presents the user interface, the agent toolbar (softphone).
- It serves the core services and message broker of the Framework integration engine and the DaVinci API.
- It hosts solution apps, each within its own iframe.
Figure 1: DaVinci Agent web application
DaVinci uses web development stack iframes and cross-window messaging to maintain the integrity of the solution. Iframes give each app a private display space while isolating and securing their processes. Cross-window messaging glues them together, sharing events and information, into a gestalt solution.
Table 1: DaVinci foundational components
| Component | Role and Use |
| DaVinci Agent | Agent is a single page web application. It is a container which hosts the integrated solution: the DaVinci Framework and the deployed solution apps.Agent itself is hosted by a CRM application as the integral toolbar within an application iframe. (For example, Agent is configured into and launched by Salesforce Open CTI as its “softphone.”) Agent may also be accessed directly, through the agent.contactcanvas.com URL for testing, or deployed as a stand-alone toolbar or multi-application user interface. |
| DaVinci Framework | Framework is the backbone of the integration. It consists of core services, housekeeping services, the message broker and the DaVinci API. Each is described more completely here. |
| Core Services | Core services are inherent functionality that reduces the effort of building apps and handles the complexity of transforming real-time event driven systems into transactional apps. As shown in Figure 1, it handles events and data sharing, manages security and user authentication, enables app logging, effects the interaction workflow, etc.. |
| Housekeeping Services | Housekeeping services maintain the DaVinci application. They display the agent login page on startup, authenticating users within the DaVinci platform; retrieve user solution configurations; dynamically load apps into their iframes; and handle the shutdown of apps and the agent user session. |
| Message Broker | Message broker distributes messages to subscribing apps. Messages bind the decoupled apps together. All actionable functions, tasks and information, are converted into and raised as messages. Message broker receives the actionable messages raised by an app and broadcasts them to all subscribing apps.Apps subscribe for messages by registering with message broker. Each message registration passes in an event handler callback function reference invoked by the message broker. |
| DaVinci API | Application programming interface that enables functional development to integrate real-time, event driven services. consisting of classes, interfaces, enumerations and functions used to integrate into the DaVinci Framework. |
Customers assemble their solution by selecting and configuring apps within the Creators Studio administration utility. On login, Agent authenticates users, retrieves their solution and dynamically launches each app from its web site into its hosted iframe, passing in configuration settings. Once initialized each app registers for the messages of its supported events. The solution functionality spans across its assembled apps, aggregating into operations, interactions and activities bound by message flows: ordered message exchanges.
Message flows and functional processes
This makes DaVinci a message driven platform. Apps raise messages on internal and external events, on state and information changes, and to request actions. Message broker receives and broadcasts the messages to subscribed apps. Apps respond to their supported messages by executing actions and by relaying results and information as new messages. These message exchanges organize flows of common functional processes such as executing click-to-dial, receiving and handling an inbound call, and maintaining and tracking a customer interaction.
Sequential flow diagrams clarify the transcending processes, identifying the participating apps and external services, and breaking down and ordering the constituent messages and actions of the flows. It’s important for developers to understand these diagrams. They help identify the roles and responsibilities of each app. They layout the sequential order of the process: the triggering events or requests, and the actions performed, or functions executed.
Below is an annotated example of a sequential flow diagram for click-to-dial.
Example sequence flow diagram – Click-to-Dial
Click-to-Dial is a process that executes a dial when a user clicks on a phone number link within the CRM application. Figure 2 shows the sequential flow diagram for click-to-dial.
Boxed across the top are the participating solution components, from left to right:
- channel – the communication channel, here a voice platform, typically a PBX;
- channel app – the hosted channel app that integrates the channel with DaVinci;
- DaVinci – all DaVinci Platform components, the API, the framework, message broker, etc. are represented as the DaVinci “black box;”
- CRM app – the hosted CRM app that integrates the CRM application with DaVinci;
- CRM application – the integrated CRM application, which typically hosts the toolbar in its iframe.
- Not represented – the user working within the application and the telephone network
Figure 2: Click-to-Dial sequential flow diagram
The box represents the integrated solution domain, everything outside the box is an external event or action. The vertical lines demark the boundaries between the solution components, each aligning with the labeled component above the lines. The dashed horizontal line indicates precursor processes, here the channel app must register for the DaVinci click-to-dial event messages. The horizontal arrows represent the solution events, actions and messages. The arrow direction indicates the process flow, and the vertical staggering indicates the process sequence. (For simultaneous occurrences, the arrows would be aligned instead of staggered.)
Reading this process execution is as follows:
• As a precursor to click-to-dial, the channel app registers with message broker to subscribe to click-to-dial messages – registerClickToDial() – passing in its callback function.
• A user (external) working within the CRM clicks on an application link to place a phone call dial request;
• The application invokes its click-to-dial API to the integrating CRM app function;
• The CRM app invokes the DaVinci API clickToDial() function, which propagates within the DaVinci framework, message broker broadcasts the event message to all subscribing apps through their callback functions;
• The channel app callback function, invoked by message broker, executes the channel API make call function to dial the call;
• The channel executes the dial.
Preparing yourself and your development system
With this background, you should be comfortable developing a DaVinci app. In my next posts, I will explore the DaVinci SDK by stepping through the sample channel and CRM app source code. But first you must prepare your development environment to follow along with that discussion.
You should feel comfortable with the list of skills in Table 2: DaVinci App Development Skills. Truth is, if you have the core web application knowledge and know what the rest are, you should be able to follow along and appreciate the effort necessary to build a DaVinci app. You will also need to prepare your development machine, downloading and installing tools and source code (see Table 3: Development Tools and Utilities).
Skills
Developing DaVinci apps requires mid-level web development skills. You should have a good understanding of the web development stack and tools: HTML5, CSS, JavaScript, and the browser DOM and development tools. You should also be familiar with single page applications, message driven applications and the distributed nature of web applications.
Apps may be written in pure JavaScript. Using an application framework and TypeScript eases and speeds the development effort. AMC uses and recommends developing apps with TypeScript and Angular or React. Most AMC sample apps and other examples from AMC will mostly be TypeScript and Angular; a few will use the React framework.
You should also understand how to use these common and popular web development tools: node.js, npm package management, git and GitHub. If you haven’t used them before, they are easy to install and understand.
Table 2: DaVinci App development skills
| Skill | Use |
| HTML5 | Displaying app information within the Agent Toolbar. |
| CSS | Formatting display of app information within the Toolbar |
| JavaScript | Creating the app, integrating into the application and DaVinci APIs. |
| TypeScript | AMC recommended JavaScript variant. It uses object-oriented constructs and applies strict type checking to help bulletproof code. |
| Development framework: AMC uses Angular and React | Simplifies web development effort. They handle things such a promises and observer patterns. |
| Node.js | Run apps as web application under node.js. |
| npm package management. | Package resources are accessed through npm |
| GitHub and git. | Public and enterprise and personal version control system. AMC publishes code examples to GitHub. |
Resources – installed on your development machine
DaVinci apps are web applications. They run under node,js. You must install node.js on your development machine. Development resources are distributed through npm package management. Although npm is included with node.js, you should update your npm after installing node.
You should install and use TypeScript. It just makes programming easier, especially with type checking which reduces errors. (You will notice that JavaScript does not require any installation. It’s part of the browser.)
You should use a version control system. Most web developers use git for local repositories and GitHub to publish their code. AMC uses and recommends both. We publish our code samples through our public GitHub repository. You will download the sample app source from GitHub.
You will need a source editor. AMC uses and recommends Visual Studio Code IDE with added packages to support for TypeScript, git and other common utilities.
Finally, development frameworks such as Angular and React save time and reduce effort. You should be familiar with Angular and React, at least enough to read and follow along their use in the sample code apps.
Table 3: Development tools and utilities
| Resource | Required | Minimum version | Source |
| node.js | Yes | 10.9.0 | https://nodejs.org/en/download/ |
| npm | Yes | 6.9.0 | https://ww w.npmjs.com/get-npmupdate [after installing node.js]: npm install npm@latest -g |
| TypeScript | Recommended | Latest | npm install -g typescripthttps://www.typescriptlang.org/index.html#download-links |
| Visual Studio Code | Recommended | Latest | https://code.visualstudio.com/download |
| Angular CLI | Recommended | Latest | npm install -g @angular/clihttps://angular.io/ |
| React | Recommended | https://reactjs.org/ | |
| GitGitHub | Recommended | Latest | https://git-scm.com/https://github.com/ |
SDK resources
There are two SDK resources. The DaVinci API documentation, which you may open in the browser window. And the sample app source, which you will retrieve from GitHub.
| SDK Resource | Location | Special Instructions |
| DaVinci API documentation | https://apidocs.contactcanvas.com/ | Click on the link, open the document. |
| Sample CRM App | https://github.com/amctechnology/SampleCrmApp | See below. |
| Sample Channel App | https://github.com/amctechnology/SampleChannelApp |
To retrieve a copy of the source code. These instructions will duplicate the repository source directories within a named subdirectory.
1. Follow the link to GitHub in Table 3. This will open the AMC GitHub repository for the sample app.
2. The repository should look like Figure 3: GitHub Repository. If it looks different, click on the “Code” tab (upper left).
Figure 3: GitHub repository
3. Use the green Clone or Download button to retrieve a copy of the sample app source.
a. If you have git on your development machine, clone the repository.
i. Click the clipboard icon to copy the URL (see Figure 4).
ii. Open a command prompt window, navigate to your development directory and enter the “git clone” and paste the repository URL.
iii. If you clone the repository, the source directory will be named either “SampleCRMApp” or “SampleChannelApp.”
b. If you do not have git, download the zipped distribution.
i. Use the Download Zip button to download a zipped distribution of the source code (see Figure 4).
ii. Save the zip file to your development directory
iii. Then extract the source directories.
iv. If you extract the zipped download, the source directory will be named “SampleCRMApp – Master” or “SampleChannelApp – Master”. And the actual source directory may be in a second identically named subdirectory. You will want to clean this up.
Figure 4: GitHub clone or Download zip
