How DingTalk Mini‑Program Cards Transform Enterprise Apps with Immersive UI

Overview of Mini‑Program Cards

DingTalk has introduced a mini‑program card capability that turns traditional H5 applications into lightweight, immersive card experiences directly within the IM, search, and workbench contexts.

Case Study 1: Happiness Bus One‑Click Seat Reservation

Previously, users had to search for "Happiness Bus", click a link, connect to a VPN, and open a full‑screen H5 page to reserve a seat. The new card flow reduces this to a single search for "Happiness Bus抢座" and a one‑click reservation, saving about two minutes per user.

Case Study 2: ICBU Client Invitation Card

The ICBU system uses a card to let salespeople receive automated invitations, select visit dates, fill out forms, and see invitation status directly on the card, eliminating back‑and‑forth navigation between the IM and business system.

Why Cards Work: Badge Concept and Immersive Interaction

Inspired by the badge UI pattern, cards surface information directly on the icon layer, shortening the information‑retrieval path and enabling immersive interaction without leaving the current context.

Technical Foundations

The backend services remain unchanged; only the frontend UI is transformed into a card.

Cards are built like mini‑program components; developers familiar with mini‑programs can create cards.

A unified DSL (a subset of the mini‑program DSL) defines card UI and behavior, ensuring standardization and cross‑platform consistency.

Data Synchronization

Cards include an efficient data‑sync mechanism that updates all instances of a card in real time, avoiding costly polling or multiple simultaneous requests.

Integration with DingTalk IM

Cards are sent as a special message type, allowing users to interact directly within the chat window. Features such as pinning cards support long‑running interactions like location sharing or data dashboards.

Development Experience

IDE integration provides one‑stop creation, development, testing, preview, and upload of cards.

Low‑code templates and a card‑specific DSL reduce the learning curve.

Official IDE plugins validate DSL code and offer real‑time feedback.

Future Roadmap

Upcoming enhancements include full‑platform support (native, H5, mini‑program), richer components (map, video, audio, canvas), custom component support, and broader “Anywhere” execution beyond the DingTalk client.