Mock CRM Setup

Run the Generic Mock CRM locally to develop and test a new Host CRM integration or a from-scratch implementation of the postMessage contract — without embedding the bridge in a production CRM shell.

Use mock mode to exercise dial-out, screen pop, directory RPC, agent state, and pop-out Agent Desktop while you build. It is not part of the Zendesk sample integration path — see Introduction — Mock CRM (local development).

What the mock CRM provides

Implementation details: src/app/crm/mock/README.md in resources/zendesk_sample-app.zip.

Prerequisites

Setup

1. Install dependencies

From the repository root:

npm install

2. Point mock mode at your Agent UI URL

Edit MOCK_AGENT_UI_URL in src/app/crm/mock/mock-client.bootstrap.ts (in resources/zendesk_sample-app.zip):

const MOCK_AGENT_UI_URL = 'https://<tenant>/app/agent/';

Replace with the Agent UI URL for your Infinity lab or tenant.

3. Configure Infinity for the test user

In Avaya Infinity Configuration, for the agent account you sign in with:

• Assign a CRM Configuration with the features you want to test (click-to-dial, omnichannel, and so on)
• Assign the CRM Directory Infinity Element if testing directory
• Configure screen pop workflow if testing screen pop — see Feature Walkthroughs — Screen Pop

Run the mock CRM

Start the dev server

npm start

This runs ng serve with HTTPS on port 4200 using the certificates in certs/ (create them first — see README in the sample ZIP).

Open the mock CRM

In a top-level browser tab (not embedded in an iframe), open:

https://localhost:4200/

The app detects local standalone mode and loads the Mock CRM shell (mock-crm-shell). Avaya Infinity Agent opens in the main panel after the configured Agent UI URL loads.

Accept the browser warning for the local self-signed certificate if prompted.

Mock vs Zendesk sample on localhost

Both the Mock CRM and the Zendesk sample integration can use https://localhost:4200. Mode is resolved in src/app/crm/host-crm-mode.ts in the sample ZIP:

To force mock mode:

https://localhost:4200/?hostCrm=mock

To test the Zendesk sample integration path on localhost (embedded iframe behavior):

https://localhost:4200/?hostCrm=zendesk

Using the mock CRM UI

Contacts and click-to-dial

The sidebar lists sample contacts from src/app/crm/mock/mock-directory.port.ts. Click the phone icon to post a voice:dialout event through the bridge.

Edit MOCK_DIRECTORY to add or change test contacts:

export const MOCK_DIRECTORY: CrmDirectoryEntry[] = [
  { name: 'Alex', phone: '+15550100' },
  { name: 'Test', phone: '+12007983414' },
];

Screen pop

When an interaction update includes CRM screen pop data, the Active Interaction card shows the payload JSON. Dismiss with × to clear the card.

Agent state (omnichannel)

When omnichannel is enabled in CRM Configuration, agent state changes from Avaya Infinity Agent appear in the header badge.

Pop-out Agent Desktop

Use Pop-out Agent Desktop to open the Agent UI in a separate window. The mock CRM remains the integration host; the popup loads ?mockAgentShell=popup and reconnects the bridge when ready.

Event log

The bottom Event log panel records screen pop, agent state, dial-out, and bridge events for debugging.

Architecture (local dev)

Mock CRM shell (top-level tab)
  ├─ Mock Host CRM integration — postMessage on infinity-crm-bridge
  ├─ Generic CRM interface — crm/core/
  └─ Agent UI iframe — Avaya Infinity Agent (Element API)

Pop-out window (?mockAgentShell=popup)
  └─ mock-agent-shell — Agent iframe + bridge back to opener

See Overview & Architecture for the full integration model.

Troubleshooting

Resources

Host CRM Integration | Feature Walkthroughs | Configuration | Zendesk Setup | Resources — Sample app ZIP