Integrating ADT inside web page

Follow the steps below to integrate Five9 Agent Desktop Toolkit Plus to your CRM web page

Add iframe with Five9 Adapter inside your page

<iframe src="https://app.five9.com/clients/integrations/adt.main.html?f9crmapi=true&f9verticalthreshold=300px" style="position: relative; height: 500px;width: 100%"></iframe>

Load Five9 CRM SDK inside your page

<script type="text/javascript" src="https://app.five9.com/dev/sdk/crm/latest/five9.crm.sdk.js"></script>

Implement CrmApiCallbacks callbacks for search , screen pop and saveLog functionality

//define callbacks 
const crmApi = window.Five9.CrmSdk.crmApi();
crmApi.registerApi({
    getAdtConfig: () => {
      const config = {
        providerName: 'Demo CRM ADT adapter',
        myCallsTodayEnabled: true,
        myChatsTodayEnabled: true,
        myEmailsTodayEnabled: true,
        showContactInfo: false
      };
      return Promise.resolve(config);
    },
    search: (params) => {
      const crmObjects = [{id: "123", label: "Contact", name: "Joe", isWho: true, isWhat: false, fields:[{displayName: "Company", value: "ABC"}]}];
      return Promise.resolve({crmObjects: crmObjects, screenPopObject: crmObjects[0]}); 
    },
    saveLog: (params) => {},
    screenPop: (params) => {},
    getTodayCallsCount: () => {
      return Promise.resolve(77);
    },
    getTodayChatsCount: () => {
      return Promise.resolve(77);;
    },
    getTodayEmailsCount: () => {
      return Promise.resolve(11);;
    },
    openMyCallsToday: () => {},
    openMyChatsToday: () => {},
    enableClickToDial: () => {},
    disableClickToDial: () => {}
});

Use CrmApi methods to send events to Five9 adapter

crmApi.click2dial({click2DialData: {clickToDialNumber: "9250000111"}});