Skip to main content
skill Claude Code CX Codex Cursor GitHub Copilot official · Anthropic

build-zoom-contact-center-app — Claude Code skill: setup & use

Reference skill for Zoom Contact Center architecture. It guides integrations across desktop client apps, web embeds, and native iOS or Android SDKs.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add anthropics/knowledge-work-plugins --skill build-zoom-contact-center-app -a claude-code
npx skills add anthropics/knowledge-work-plugins --skill contact-center -a claude-code
Open on GitHub

What build-zoom-contact-center-app does

This skill provides architecture patterns and routing rules for Zoom Contact Center integrations. It separates logic across Zoom Apps SDK inside the desktop client, web chat or video embeds, and native iOS and Android SDKs. For queue handling and call control, it directs the agent to chain with the REST API skill.

The reference lays out a strict session lifecycle. It requires early platform initialization and channel setup with an entryId or apiKey before registering event listeners. Then the UI starts through fetchUI, startVideo, or web SDK methods. The session ends by calling endChat or releasing resources.

Handling state changes like hold, resume, and context switching is mandatory. That matters when an agent side-panel app must retain notes keyed by engagementId during active call switches.

What it helps with

  • Embed web chat and video campaign widgets into a site
  • Integrate native mobile Contact Center SDKs on iOS and Android
  • Manage contact states across hold, resume, and wrap-up
  • Preserve agent notes by engagementId during context switches
  • Connect Smart Embed CRM softphone flows via postMessage events

Example prompts for the agent

  • Help me handle onengagementstatuschange events in the Zoom Contact Center web embed
  • How do I store agent notes by engagementId across context switches in a Zoom client app?
  • Show the setup lifecycle for the native iOS Contact Center SDK

How to install build-zoom-contact-center-app

1Skills CLI (Vercel)

npx skills add anthropics/knowledge-work-plugins --skill build-zoom-contact-center-app -a claude-code
npx skills add anthropics/knowledge-work-plugins --skill contact-center -a claude-code

2Manually: put the files in place

~/.claude/skills/contact-center/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/contact-center/

From the same set89

The whole set →
data-visualization official anthropics Selects chart types based on data structure and produces Python visualization code in matplotlib, seaborn, and plotly. Useful for reports and research figures. Claude Code CX Codex Cursor +1 13,700installs documentation official anthropics A skill for technical writing that drafts READMEs, API references, runbooks, architecture docs and onboarding guides. Useful when the code exists but the description does not. Claude Code CX Codex Cursor +1 10,300installs build-dashboard official anthropics Builds a self-contained HTML dashboard with Chart.js charts, KPI cards, and filterable tables. Useful for turning raw data or queries into a standalone browser report. Claude Code CX Codex Cursor +1 9,100installs memory-management official anthropics This skill organizes workplace shorthand, names, and project details into files an agent can consult. It fits projects where requests rely on an internal vocabulary and shared context. Claude Code CX Codex Cursor +1 7,400installs task-management official anthropics Tracks commitments, active work, and follow-ups in a local TASKS.md file. Useful when managing project to-dos directly from the AI coding chat. Claude Code CX Codex Cursor +1 7,200installs architecture official anthropics Writes an Architecture Decision Record or reviews a system design: options, trade-offs, consequences. Useful when you have to pick between technologies. Claude Code CX Codex Cursor +1 6,700installs knowledge-synthesis official anthropics Merges search results across chats, emails, and documents into deduplicated answers with source attribution. Flags conflicting facts and scores source reliability. Claude Code CX Codex Cursor +1 6,400installs testing-strategy official anthropics This skill designs testing strategies and test plans for a project. Use it when you need test types, coverage goals, or gaps in existing checks. Claude Code CX Codex Cursor +1 6,400installs

Similar

artifacts-builder nexu-io A skill designed for generating multi-component claude.ai HTML artifacts. It uses React and Tailwind CSS alongside shadcn/ui components. Claude Code CX Codex Cursor +1 2,700installs gsap-framer-scroll-animation official Utkarsh Patrikar This skill helps GitHub Copilot build scroll-driven motion with GSAP ScrollTrigger and Framer Motion. Use it for vanilla JS, React, or Next.js work. GitHub Copilot 3,900installs magic-ui magicuidesign The magic-ui skill teaches Claude Code to work with Magic UI components in React and Next.js: select animations, install via shadcn registry, and check accessibility. Claude Code CX Codex Cursor +1 1,200installs unit-test-vue-pinia official github Writes and reviews unit tests for Vue 3, TypeScript, Vitest and Pinia code. Useful when your tests reach into component internals instead of behavior. GitHub Copilot 1,800installs swiftui-liquid-glass official OpenAI This skill helps build and review SwiftUI Liquid Glass interfaces for iOS 26+. Use it when adopting the API or checking fallbacks, interaction, and design fit. CX Codex GP ChatGPT 121installs react19-test-patterns official github A migration reference for updating test files to work with React 19. Use it when replacing removed test utilities or revising StrictMode call-count assertions. GitHub Copilot 1,200installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about build-zoom-contact-center-app

How to install build-zoom-contact-center-app in Claude Code?

Run npx skills add anthropics/knowledge-work-plugins --skill build-zoom-contact-center-app -a claude-code in your terminal.

What does build-zoom-contact-center-app do?

It provides architecture references, lifecycle patterns, and routing guidelines for building Zoom Contact Center solutions on web, mobile, and client surfaces.

Does this skill handle REST API call controls directly?

No, it delegates call-control and queue operations to the dedicated REST API skill, while focusing on client, web, and native SDK lifecycle flows.

Source text

SKILL.md · Apache-2.0
---
name: build-zoom-contact-center-app
description: "Reference skill for Zoom Contact Center. Use after routing to a contact-center workflow when implementing app, web, or native integrations; engagement context and state handling; campaigns; callbacks; or version-drift troubleshooting."
triggers:
  - "contact center sdk"
  - "zoom contact center"
  - "zcc"
  - "engagement context"
  - "engagement status"
  - "campaign sdk"
  - "scheduled callback"
  - "getengagementcontext"
  - "onengagementstatuschange"
  - "zoom contact center app"
---

# /build-zoom-contact-center-app

Background reference for Zoom Contact Center integrations across app, web, and native mobile surfaces.

Implementation guidance for Zoom Contact Center across:
- Contact Center apps in the Zoom client (Zoom Apps SDK path)
- Web channel embeds (chat/video/campaign)
- Native mobile SDKs (Android/iOS)

Official docs:
- https://developers.zoom.us/docs/contact-center/
- https://developers.zoom.us/docs/contact-center/web/sdk-reference/
- https://marketplacefront.zoom.us/sdk/contact/android/index.html
- https://marketplacefront.zoom.us/sdk/contact/ios/index.html

## Routing Guardrail

- If the user is building an app inside the Zoom Contact Center desktop client, stay on the Zoom Apps SDK path and use this skill plus `zoom-apps-sdk`.
- If the user is embedding chat/video widgets on a website, route to [web/SKILL.md](web/SKILL.md).
- If the user is integrating native Android or iOS SDK binaries, route to [android/SKILL.md](android/SKILL.md) or [ios/SKILL.md](ios/SKILL.md).
- If the user needs Contact Center call-control or queue APIs, chain with [../rest-api/SKILL.md](../rest-api/SKILL.md).

## Quick Links

Start here:
1. [concepts/architecture-and-lifecycle.md](concepts/architecture-and-lifecycle.md)
2. [scenarios/high-level-scenarios.md](scenarios/high-level-scenarios.md)
3. [references/forum-top-questions.md](references/forum-top-questions.md)
4. [references/versioning-and-compatibility.md](references/versioning-and-compatibility.md)
5. [references/samples-validation.md](references/samples-validation.md)
6. [references/environment-variables.md](references/environment-variables.md)
7. [troubleshooting/common-drift-and-breaks.md](troubleshooting/common-drift-and-breaks.md)
8. [RUNBOOK.md](RUNBOOK.md)

Platform skills:
- [android/SKILL.md](android/SKILL.md)
- [ios/SKILL.md](ios/SKILL.md)
- [web/SKILL.md](web/SKILL.md)

## Documentation Structure

```
contact-center/
├── SKILL.md
├── RUNBOOK.md
├── concepts/
│   └── architecture-and-lifecycle.md
├── scenarios/
│   └── high-level-scenarios.md
├── references/
│   ├── versioning-and-compatibility.md
│   ├── samples-validation.md
│   └── environment-variables.md
├── troubleshooting/
│   └── common-drift-and-breaks.md
├── android/
│   ├── SKILL.md
│   ├── concepts/sdk-lifecycle.md
│   ├── examples/service-patterns.md
│   ├── references/android-reference-map.md
│   └── troubleshooting/common-issues.md
├── ios/
│   ├── SKILL.md
│   ├── concepts/sdk-lifecycle.md
│   ├── examples/service-patterns.md
│   ├── references/ios-reference-map.md
│   └── troubleshooting/common-issues.md
└── web/
    ├── SKILL.md
    ├── concepts/lifecycle-and-events.md
    ├── examples/app-context-and-state.md
    ├── references/web-reference-map.md
    └── troubleshooting/common-issues.md
```

## Common Lifecycle Pattern

1. Initialize platform context early.
2. Build a channel item (`entryId` for chat/video/ZVA, `apiKey` for scheduled callback and campaign flows).
3. Get service/client instance.
4. Register listeners/delegates before user interaction.
5. Start flow (`fetchUI`, `startVideo`, or web SDK open/show path).
6. Handle engagement state changes (`start`, `hold`, `resume`, `end`) and context switching.
7. End flow and release resources (`endChat`/`endVideo`, `logout/logoff`, uninitialize/release).

## High-Level Scenarios

- Agent side-panel app that stores notes per `engagementId` and survives context switching.
- Browser chat/video campaigns launched from web tags.
- Native mobile customer app for chat/video/scheduled callback.
- Campaign-driven channel selection (chat, ZVA, video, scheduled callback).
- Rejoin flow for dropped video engagements on mobile.
- Smart Embed CRM softphone with postMessage event contracts.

See [scenarios/high-level-scenarios.md](scenarios/high-level-scenarios.md) for details.

## Chaining

- Auth and in-client app identity: [../zoom-apps-sdk/SKILL.md](../zoom-apps-sdk/SKILL.md) and [../oauth/SKILL.md](../oauth/SKILL.md)
- Contact Center REST workflows: [../rest-api/SKILL.md](../rest-api/SKILL.md)
- Cobrowse on web voice/chat channels: [../cobrowse-sdk/SKILL.md](../cobrowse-sdk/SKILL.md)

## Environment Variables

- See [references/environment-variables.md](references/environment-variables.md) for standardized `.env` keys and where to find each value.

© anthropics · Apache-2.0 · anthropics/knowledge-work-plugins

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor