Skymark AI-Powered Customer Support & Engagement SaaS Platform

IMPORTANT: AI Usage Costs

This platform uses AI-powered features (content generation, subject line suggestions, analytics insights) that connect to external AI providers. AI API usage costs are NOT included in the purchase price. You will need to provide your own API keys and manage associated costs separately. Typical costs vary based on usage volume.

Skymark – AI-Powered Customer Support & Engagement SaaS Platform

Skymark is a production-ready, multi-tenant AI-powered customer support and engagement SaaS platform built with React 18, TypeScript, Tailwind CSS, shadcn/ui, and Supabase. It unifies AI voice calls, live chat, ticketing, CRM contacts, knowledge base, analytics, and an embeddable chat widget into a single, beautifully designed dashboard — perfect for SaaS businesses, agencies, startups, and support teams of any size.

Whether you're launching a customer support platform, building a white-label helpdesk, or adding AI-powered engagement to your existing product — Skymark gives you everything out of the box, with a guided setup wizard that gets you from zero to running in under 5 minutes.

Live Demo

Demo URL: https://skymark.wrapcoders.com

User: user@demo.com / User123!

Agent: agent@demo.com / Agent123!

Admin: admin@demo.com / Admin123!

Why Choose Skymark?

• Complete SaaS Foundation — Multi-tenant architecture with organizations, roles, invitations, and billing-ready structure
• AI-First Design — Built-in AI chat, automatic call transcription & summarization, sentiment analysis, and knowledge-powered responses
• Production-Ready — Row-Level Security on every table, SECURITY DEFINER functions, encrypted API keys, email verification
• Beautiful UI — 40+ shadcn/ui components, Framer Motion animations, responsive design, light/dark theme
• Zero Backend Code Needed — Supabase handles auth, database, storage, realtime, and edge functions
• Feature Toggles — Enable/disable any feature via environment variables for flexible deployment
• Demo Mode — Built-in demo mode with test accounts for client presentations and trade shows

Complete Feature List

Setup Wizard (First-Run Onboarding)

• 4-step guided production setup: Environment Check → Super Admin Creation → Organization Config → Launch
• Automatic redirect to setup wizard when no admin exists
• Environment validation (backend connectivity, service role key, database)
• Blocks progression on errors with clear explanations
• Edge function (`check-setup-status`) for secure first-run detection

Dashboard & Overview

• 4 KPI stat cards with real-time trend indicators (conversations, calls, tickets, contacts)
• Recent conversations feed with AI/human handler badges
• Pending team invitations display
• Recent AI-generated call summaries
• Responsive collapsible sidebar with keyboard shortcut (Ctrl+B)
• Role-filtered navigation — users only see what they can access
• Feature-flag-filtered sidebar — hide features via .env toggles
• Notification bell dropdown with per-type preferences

AI Conversations (Unified Inbox)

• Multi-channel messaging: web, email, WhatsApp
• AI-handled and agent-handled conversation modes
• Emoji reactions with real-time sync
• Read receipts per message
• Reply threading (quote-reply)
• Message pinning, editing, and deletion
• File attachments with drag-and-drop upload
• Image lightbox preview for attached images
• Full-text message search across all conversations
• Keyboard shortcuts for power users
• Conversation pinning, archiving, and soft-delete
• Canned responses with /shortcut triggers
• Visitor name and email capture

AI Voice Calls

• Inbound and outbound call logging and management
• AI vs. human handler classification
• Automatic transcription from call recordings
• AI-powered call summarization via edge function
• Sentiment analysis (positive / neutral / negative)
• Call recording URL tracking
• Advanced filtering: status, direction, handler, date range
• Sortable table with configurable pagination
• Call analytics charts with date range picker (Recharts)
• Outbound call initiation via Twilio integration
• ElevenLabs voice AI integration with voice preview, connection testing, and status indicator
• Voice ID selection (auto-detected from ElevenLabs account)
• Language and max call duration configuration

Ticketing System

• Full CRUD with slide-out detail drawer
• 4 priority levels: low, medium, high, urgent
• 4 status stages: open, in_progress, resolved, closed
• Threaded comments per ticket
• Activity timeline audit log (who changed what, when)
• Bulk operations: status change, assign, delete
• Auto-notifications via database trigger on status/assignment changes
• Available to all roles (users can submit tickets)

CRM Contacts

• Contact management with detail drawer and notes
• Source tracking: manual, chat, call, import
• Status management: lead, active, inactive
• CSV import and export
• Search and filter

Knowledge Base

• Rich text editor (TipTap) with full formatting toolbar
• Image embedding and link insertion
• File upload with automatic text extraction (PDF, DOCX, TXT)
• Tag system with bulk tag operations and filtering
• Card-based display with search
• Import/export capabilities
• Feeds AI context — KB articles power chat widget responses

Analytics Dashboard

• Call volume trends over time
• Average call duration metrics
• Sentiment distribution charts
• Configurable date range picker
• Interactive Recharts-powered visualizations

IVR Builder (Visual Flow Editor)

• Drag-and-drop flow builder using React Flow (@xyflow/react)
• Custom node types for IVR steps
• Connect nodes to build call routing logic
• Visual representation of phone menu trees

Embeddable Chat Widget

• Configurable widget appearance (colors, position, greeting)
• In-dashboard widget preview
• Widget served via edge function (widget-loader)
• AI-powered responses using knowledge base context
• Visitor name and email capture
• Standalone preview at /widget route
• Embed with a single script tag on any website

Live Chat (Agent Interface)

• Real-time agent interface for handling escalated widget conversations
• Seamless handoff from AI to human agent

Notifications

• Bell icon dropdown in dashboard header
• Notification types: info, warning, message, team
• Per-user toggle preferences (enable/disable by type)
• Mark as read / delete
• Auto-generated from ticket changes via database trigger

Team & User Management

• Team page: view members, send email invitations, manage invite codes
• User management: assign/change roles across the platform
• Organization settings: name, AI greeting, business hours, widget config
• Email invitation with 7-day expiry and unique token
• Invite code system for quick team onboarding

Settings & Profile

• ElevenLabs API configuration: API key, agent ID, voice ID, language, max duration, voice preview, connection test
• AI provider selection: OpenAI, Google Gemini, Anthropic Claude, Custom, or built-in AI Gateway
• Model selection, temperature, max tokens, system prompt customization
• Encrypted API key storage in database
• Profile: display name, avatar upload (2MB limit), company name
• Theme toggle: light/dark with persistent preference

Architecture & Tech Stack

Frontend

React 18, TypeScript 5, Vite 5, Tailwind CSS 3, shadcn/ui (40+ components)

Animation

Framer Motion 12

State Management

TanStack React Query 5, React Context

Routing

React Router 6

Rich Text

TipTap 3

Flow Builder

@xyflow/react (React Flow) 12

Charts

Recharts 2

Backend

Supabase (Auth, PostgreSQL, Edge Functions, Realtime, Storage)

Voice AI

ElevenLabs

Telephony

Twilio

AI Models

OpenAI GPT, Google Gemini, Anthropic Claude (provider-agnostic)

Database Architecture (19 Tables)

• `organizations` — Multi-tenant workspaces with AI greeting, business hours, widget config
• `org_members` — User ↔ organization mapping with role (admin/agent/user)
• `org_invitations` — Email invitations with token, role, and 7-day expiry
• `profiles` — User profiles (display name, avatar, theme preference)
• `user_roles` — Global platform roles (separate from org roles for security)
• `conversations` — Chat conversations with channel, AI handling, visitor info
• `messages` — Messages with attachments, reply threading, pinning, editing
• `message_reactions` — Emoji reactions per message
• `message_read_receipts` — Read tracking per user per message
• `calls` — Call records with transcript, summary, sentiment, recording URL
• `tickets` — Support tickets with priority, status, assignment
• `ticket_comments` — Threaded comments on tickets
• `ticket_activity` — Audit log for ticket changes
• `contacts` — CRM contacts with source and status tracking
• `knowledge_base` — Articles with rich text, tags, file attachments
• `canned_responses` — Reply templates with shortcuts
• `org_integrations` — Third-party integration configs (encrypted keys)
• `notifications` — In-app notification system
• `notification_preferences` — Per-user notification toggles

Security

• Row-Level Security (RLS) enabled on every table
• 11 SECURITY DEFINER functions to prevent recursive RLS
• Role separation: `user_roles` (global) + `org_members` (per-org) — prevents privilege escalation
• Email verification required by default (auto-confirm disabled)
• Encrypted API key storage for third-party integrations
• Setup wizard validates environment before allowing admin creation
• Password strength validation (minimum 8 characters)
• Protected routes with auth guards and role gates

9 Edge Functions (Serverless Backend)

• `check-setup-status` — First-run setup wizard detection
• `chat` — Dashboard AI chat responses
• `widget-chat` — Widget AI chat responses using KB context
• `widget-loader` — Serves embeddable widget JavaScript
• `auto-summarize-call` — Auto-triggered call summarization on completion
• `summarize-call` — On-demand call summarization
• `twilio-call` — Twilio telephony integration
• `extract-text` — Document text extraction (PDF, DOCX, TXT)
• `cleanup-conversations` — Scheduled cleanup of soft-deleted conversations

Environment-Based Feature Toggles

Every major feature can be independently enabled or disabled via `.env` variables. Perfect for offering tiered pricing plans or customizing deployments per client:

• `VITE_ENABLE_AI_CHAT` — AI Conversations
• `VITE_ENABLE_CALLS` — AI Calls + Twilio
• `VITE_ENABLE_TICKETS` — Ticketing System
• `VITE_ENABLE_KNOWLEDGE_BASE` — Knowledge Base
• `VITE_ENABLE_IVR_BUILDER` — IVR Flow Builder
• `VITE_ENABLE_CHAT_WIDGET` — Embeddable Widget
• `VITE_ENABLE_LIVE_CHAT` — Live Chat Agent Interface
• `VITE_ENABLE_ANALYTICS` — Analytics Dashboard
• `VITE_ENABLE_CONTACTS` — CRM Contacts
• `VITE_DEMO_MODE` — Demo/test mode with sample accounts

Landing Page

• Hero section with animated dashboard mockup and product tour
• Feature showcase with animated cards
• How-it-works section with step indicators
• Pricing section with tier comparison
• Testimonials carousel
• FAQ accordion
• Social proof marquee ticker
• CTA section and comprehensive footer
• Fully responsive (mobile, tablet, desktop)

Design & UX

• Light and dark theme with persistent user preference
• 40+ shadcn/ui components with consistent design tokens
• Framer Motion animations throughout
• Animated splash screen on app load
• Responsive across all breakpoints
• Semantic HTML with accessibility considerations

Documentation

• Comprehensive HTML documentation included (`docs/` folder)
• Interactive sidebar navigation with search
• Copy-to-clipboard code blocks
• Step-by-step installation, configuration, and deployment guides
• Database schema reference with all 19 tables
• Complete environment variable reference
• Detailed update/re-deploy procedures (4 scenarios + rollback)
• Troubleshooting guide with common issues and solutions
• Changelog with version history

Requirements

• Node.js 18+ (recommended: 20 LTS)
• Supabase project (free tier works for development)
• Modern browser (Chrome 90+, Firefox 90+, Safari 15+, Edge 90+)
• Optional: ElevenLabs API key (for voice AI), Twilio account (for telephony)

What You Get

• Complete source code (React + TypeScript)
• 19 database migration files (ready to deploy)
• 9 edge functions (serverless backend)
• Interactive documentation site
• Landing page with pricing, features, testimonials
• Setup wizard for first-run configuration
• Demo mode for presentations
• Light and dark themes
• 6 months of support

Legal Notice

AI Voice Calling Disclaimer: The AI voice calling feature is designed for legitimate business communication. Buyers are responsible for complying with all applicable laws and regulations regarding automated calls, including TCPA (US), GDPR (EU), and local telemarketing laws. Always obtain proper consent before initiating automated calls. This product is a tool — the buyer is solely responsible for how it is used.

Built with ❤️ by WRAPCODERS

Questions? Reach out through the item comments or our support channel. We typically respond within 24 hours.