Overview

DaVinci is a cloud based platform used to integrate communication and CRM applications through a programmable framework. You can find more information on DaVinci at www.amctechnology.com/DaVinci. Each communication or CRM application is integrated into DaVinci through a DaVinci App. The following document provides instructions on how to build your own App.

Table of contents

Architecture
Creating an app
Sample apps

Architecture

Each app in DaVinci is loaded inside an iframe by our Agent Site. This allows us to dynamically load many aps and to limit what each app can do. When then provide javascript APIs in the form of this library to allow each app to communicate with DaVinci and other apps. This also allow apps to be hosted anywhere and to use any framework. Frequently the Agent Site will also be embed inside a CRM, normally using an iframe. alt text

Here are some common flows: alt text

Creating an app

To create a DaVinci App you will need to create a web application. This can be done with any library but we recommend Angular. Next you'll have to install this npm package and then make some minimum calls to the api. Lastly you'll have to create an app in Creators Studio. Details of the API and creating an app in Creators Studio are below.

Important API calls:

initializeComplete - All apps must call this before they can receive any events they have registered for. This also provide the app with any configuration defined in Creators Studio
setAppHeight - This sets the height of your app
setAppWidth - This sets the width of your app

If you integrate with a CRM we recommend using the following:

If the toolbar(agent.contactcanvas.com) is embeded in the CRM:
- registerSetSoftphoneHeight - To set the height of the iframe containing agent.contactcanvas.com
- registerSetSoftphoneWidth - To set the width of the iframe containing agent.contactcanvas.com
- registerIsToolbarVisible - To allow other apps to ask if the iframe containing agent.contactcanvas.com is currently visible
- loadBridgeScripts - If you need to use a Javascript library that relays on being in the iframe closest to the CRM
registerOnInteraction - To perform actions when a interaction(phone call, chat, etc..) occurs
onFocus - Inform other apps of CRM records the agent is viewing
registerGetPageInfo - Allow other apps to ask what CRM records are on the current page
clickToDial - to start interactions(phone calls) when the agent clicks on a phone number in CRM
We recommend your app having three parts to the UI to produce something like this:
- A 'Caller Information' section to display any record matching the active interaction
- An 'Activity Information' section for agent to save notes(to CRM) about each interaction Ex:
- A 'Create New' section for agents to be able to quickly create new records in CRM

If you integrate with some channel(phone, chat, etc..) we recommend using the following:

setInteraction - to inform DaVinci and other apps that the agent is on an interaction(phone call, chat, etc...)
onPresenceChanged - to keep your channel's presence in sync with DaVinci's presence
registerClickToDial - to allow other apps to initiate a interaction(phone call) when the agent click on a phone number in CRM
For the UI we recommend having controls that resemble the following:

Finally you'll have to go to Creators Studio and create an app listing in the 'Edit Apps' page. When you do that you'll have to specify the URL of your app(localhost works fine) in the config tab. Once you are done creating the listing then you'll have to go to the 'Apps' page and add your app so you can make use of it. Now you can load agent.contactcanvas.com and begin testing!

Sample Apps

The following app have be created to provide working examples of the DaVinci api: