The Challenge
Onboarding a new VoIP customer meant weeks of coordination. Sales sends a spreadsheet template. Customer fills it out with extension numbers, user names, phone numbers, call routing preferences. Someone emails it back. The provisioning team opens it, realizes half the fields are wrong or missing, sends clarifying questions. Customer replies. Provisioning team manually creates users in NetSapiens one by one, configures ring groups, builds auto attendants by hand.
The process was error-prone and slow. Spreadsheets had no validation. Customers entered invalid extension numbers, duplicate phone numbers, ring group configurations that didn't make sense. Provisioning teams caught mistakes late, after they'd already started building the system. Fixes required more email rounds and rework.
Auto attendant configuration was the worst part. Describing a call flow in prose or a spreadsheet never works. "Press 1 for sales, press 2 for support, but only during business hours, otherwise go to voicemail, unless it's a holiday." Translating that into NetSapiens menus and routing rules required expertise and guesswork. Customers ended up with IVRs that didn't match what they actually wanted.
The Approach
The solution is a 7-step wizard that guides customers through configuring their entire VoIP setup. Each step validates input before letting them proceed. The wizard collects everything needed for provisioning: company info, extensions, phone numbers, ring groups, queues, auto attendants, and business hours. At the end, the customer submits their configuration for admin review.
The Seven Steps
- Company Info: Seats, DIDs, optional features (call recording, SMS compliance, e911)
- Extensions: Users with extension numbers, names, departments, PINs. Real-time duplicate detection.
- Phone Numbers: E.164 formatted DIDs with validation. Assign to users or auto attendants.
- Ring Groups: Group extensions together with ring strategy (simultaneous, round-robin, sequential).
- Queues: Call queues with timeout settings, fallback destinations, hold music.
- Auto Attendants: Visual IVR builder using React Flow for drag-and-drop call flow design.
- Timeframes: Business hours and holiday schedules that control call routing.
The auto attendant builder is the standout feature. Instead of describing call flows in text, customers build them visually using a node-based editor. Drag a "Menu" node onto the canvas, connect it to "Extension" nodes for each menu option, add "Voicemail" as a fallback. The flow renders as a diagram in real time. What you see is what you get.
Wizard Flow Diagram
Visual IVR Builder
The auto attendant step uses React Flow, a library for building node-based interfaces. Customers drag nodes onto a canvas and connect them with edges. Each node represents a call flow component: menus, extensions, voicemail, queues, time conditions. Connecting nodes defines the routing logic.
For example, a main menu node has 5 outputs labeled "Press 1" through "Press 5" and one for "Timeout." The customer drags extension nodes onto the canvas for sales, support, and billing, then draws edges from the menu outputs to the corresponding extensions. They add a voicemail node and connect the timeout edge to it. The visual representation makes it obvious how calls will route.
The builder validates configurations in real time. You can't connect a menu option to nothing. You can't create circular loops. If a time condition references business hours that haven't been defined yet, the system flags it. Validation errors block submission until they're fixed.
Admin Review & Provisioning
When a customer submits their configuration, it enters the admin review queue. The admin sees a diff-style view: what will be created in NetSapiens if they approve. Extensions with names and numbers, phone number assignments, ring group memberships, queue configurations, auto attendant call flows rendered as diagrams.
If something looks wrong, the admin can reject the project with comments. The customer gets notified, makes changes, and resubmits. If everything checks out, the admin approves it and proceeds to provisioning.
Provisioning is a one-click operation protected by TOTP. The admin enters their 2FA code, clicks "Provision to NetSapiens," and a background job creates everything: users, DIDs, groups, queues, auto attendants, timeframes. The job runs in BullMQ with retry logic and progress tracking. When it completes, the customer's phone system is live.
Architecture Overview
Technical Stack
- Frontend: React 18, React Flow for visual IVR builder, Framer Motion for animations
- API: Fastify with tRPC for end-to-end type safety, TOTP middleware for sensitive operations
- Database: PostgreSQL 16 with row-level security for multi-tenant isolation
- Queue: Redis + BullMQ for background job processing with retry logic
- Auth: JWT with RS256, Argon2id password hashing
- Deployment: systemd services on Ubuntu, Caddy for reverse proxy and SSL
The Outcome
Customers configure everything themselves. No spreadsheets, no email rounds, no guessing. They walk through the wizard, enter their extensions and phone numbers, build their auto attendants visually, and submit the project. The system validates everything before submission, so admins never see incomplete or malformed configurations.
Admin review is a clean diff. Instead of parsing spreadsheets or translating prose descriptions into NetSapiens configs, admins see exactly what will be provisioned. Extensions listed with names and numbers. Phone number assignments. Ring group memberships. Auto attendant call flows rendered as diagrams. They approve or reject, and provisioning happens with one TOTP-protected click.
The visual IVR builder eliminated the translation gap. Customers design call flows by dragging nodes and connecting them. What they see on screen is what gets provisioned. No more "press 1 for sales" described in text that gets interpreted wrong. The diagram is the source of truth.
Provisioning became deterministic. The background job takes the customer's configuration and creates NetSapiens resources one by one: users, DIDs, groups, queues, auto attendants. If something fails, the job retries with exponential backoff. Progress tracking shows which steps completed and which are pending. When the job finishes, the phone system is live and matches the configuration exactly.