+ {t('help.api.retrieveServiceDescription', 'Retrieve details of a specific service.')} +
+
+ services:read
+
+ {t('help.api.resourceObjectDescription', 'Resources represent staff members, rooms, equipment, or any bookable entity in your business.')} +
++ {t('help.api.listResourcesDescription', 'Retrieve a list of all resources in your business.')} +
+
+ resources:read
+
+ {t('help.api.retrieveResourceDescription', 'Retrieve details of a specific resource.')} +
+
+ resources:read
+
+ {t('help.api.appointmentObjectDescription', 'Appointments represent scheduled bookings for services with resources.')} +
++ {t('help.api.retrieveAppointmentDescription', 'Retrieve details of a specific appointment.')} +
+
+ bookings:read
+
+ {t('help.api.updateAppointmentDescription', 'Update an existing appointment.')} +
+
+ bookings:write
+
+ {t('help.api.cancelAppointmentDescription', 'Cancel an appointment. This action cannot be undone.')} +
+
+ bookings:write
+
+ {t('help.api.listAppointmentsDescription', 'Retrieve a list of appointments filtered by date range and status.')} +
+
+ bookings:read
+
+ {t('help.api.customerObjectDescription', 'Customers are individuals who book appointments at your business.')} +
++ {t('help.api.createCustomerDescription', 'Create a new customer record.')} +
+
+ customers:write
+
+ {t('help.api.retrieveCustomerDescription', 'Retrieve details of a specific customer.')} +
+
+ customers:read
+
+ {t('help.api.updateCustomerDescription', 'Update customer information.')} +
+
+ customers:write
+
+ {t('help.api.listCustomersDescription', 'Retrieve a list of customers with optional filtering.')} +
+
+ customers:read
+
+ {t('help.api.listWebhooksDescription', 'Retrieve all webhook endpoints configured for your business.')} +
+
+ webhooks:manage
+
+ {t('help.api.retrieveWebhookDescription', 'Retrieve details of a specific webhook endpoint.')} +
+
+ webhooks:manage
+
+ {t('help.api.updateWebhookDescription', 'Update webhook configuration including event subscriptions and active status.')} +
+
+ webhooks:manage
+
+ {t('help.api.deleteWebhookDescription', 'Delete a webhook endpoint. This action cannot be undone.')} +
+
+ webhooks:manage
+
+ {t('help.api.testWebhookDescription', 'Send a test event to your webhook endpoint to verify it is working correctly.')} +
+
+ webhooks:manage
+
+ Manage appointments and bookings programmatically +
++ The Appointments API allows you to programmatically manage appointments, bookings, and scheduling + events in your SmoothSchedule account. Create, retrieve, update, and cancel appointments with + full control over resources, customers, and scheduling. +
+
+ Required OAuth Scopes: bookings:read, bookings:write
+
/api/v1/appointments/
+ Retrieve a list of appointments with optional filtering.
+ +start_date - Filter by start date (YYYY-MM-DD)end_date - Filter by end date (YYYY-MM-DD)status - Filter by status (scheduled, confirmed, completed, etc.)customer_id - Filter by customer UUID
+{`curl -X GET "https://api.smoothschedule.com/api/v1/appointments/?start_date=2025-12-01" \\
+ -H "Authorization: Bearer YOUR_ACCESS_TOKEN"`}
+
+ /api/v1/appointments/{id}/
+ Retrieve a single appointment by ID.
+ +
+{`curl -X GET "https://api.smoothschedule.com/api/v1/appointments/a1b2c3d4-5678-90ab-cdef-1234567890ab/" \\
+ -H "Authorization: Bearer YOUR_ACCESS_TOKEN"`}
+
+ /api/v1/appointments/
+ Create a new appointment.
+ +
+{`{
+ "service_id": "uuid",
+ "resource_id": "uuid", // optional
+ "customer_id": "uuid", // or use customer_email/name/phone
+ "customer_email": "john@example.com", // if customer_id not provided
+ "customer_name": "John Doe",
+ "customer_phone": "+1234567890",
+ "start_time": "2025-12-16T14:00:00Z",
+ "notes": "Customer requested window seat"
+}`}
+
+
+{`curl -X POST "https://api.smoothschedule.com/api/v1/appointments/" \\
+ -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \\
+ -H "Content-Type: application/json" \\
+ -d '{
+ "service_id": "a1b2c3d4-5678-90ab-cdef-1234567890ab",
+ "customer_email": "john@example.com",
+ "customer_name": "John Doe",
+ "start_time": "2025-12-16T14:00:00Z",
+ "notes": "Customer requested window seat"
+ }'`}
+
+ /api/v1/appointments/{id}/
+ Update an existing appointment.
+ +
+{`{
+ "start_time": "2025-12-16T15:00:00Z",
+ "resource_id": "new-resource-uuid",
+ "notes": "Updated notes"
+}`}
+
+
+{`curl -X PATCH "https://api.smoothschedule.com/api/v1/appointments/a1b2c3d4-5678-90ab-cdef-1234567890ab/" \\
+ -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \\
+ -H "Content-Type: application/json" \\
+ -d '{
+ "start_time": "2025-12-16T15:00:00Z",
+ "notes": "Rescheduled to 3 PM"
+ }'`}
+
+ /api/v1/appointments/{id}/
+ Cancel an appointment. Optionally provide a cancellation reason.
+ +
+{`{
+ "reason": "Customer requested cancellation"
+}`}
+
+
+{`curl -X DELETE "https://api.smoothschedule.com/api/v1/appointments/a1b2c3d4-5678-90ab-cdef-1234567890ab/" \\
+ -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \\
+ -H "Content-Type: application/json" \\
+ -d '{"reason": "Customer requested cancellation"}'`}
+
+ + Each appointment object contains the following fields: +
+| Field | +Type | +Description | +
|---|---|---|
| id | +UUID | +Unique appointment identifier | +
| service | +Object | +Service details (id, name, duration, price) | +
| resource | +Object | +Assigned resource (id, name, type) | +
| customer | +Object | +Customer details (id, email, name, phone) | +
| start_time | +ISO 8601 | +Appointment start time (UTC) | +
| end_time | +ISO 8601 | +Appointment end time (UTC) | +
| status | +String | +Current status (see Status Values below) | +
| notes | +String | +Additional notes or instructions | +
| created_at | +ISO 8601 | +When the appointment was created | +
+ Appointments can have one of the following status values: +
++ A typical appointment object in the API response: +
+
+{`{
+ "id": "a1b2c3d4-5678-90ab-cdef-1234567890ab",
+ "service": {
+ "id": "srv-uuid",
+ "name": "Haircut",
+ "duration": 60,
+ "price": 5000
+ },
+ "resource": {
+ "id": "res-uuid",
+ "name": "Sarah Johnson",
+ "type": "STAFF"
+ },
+ "customer": {
+ "id": "cust-uuid",
+ "email": "john@example.com",
+ "name": "John Doe",
+ "phone": "+1234567890"
+ },
+ "start_time": "2025-12-16T14:00:00Z",
+ "end_time": "2025-12-16T15:00:00Z",
+ "status": "confirmed",
+ "notes": "Customer requested window seat",
+ "created_at": "2025-12-01T10:30:00Z"
+}`}
+
+ + API requests are limited to 1000 requests per hour per API key. + Rate limit information is included in response headers: +
+
+{`X-RateLimit-Limit: 1000
+X-RateLimit-Remaining: 987
+X-RateLimit-Reset: 1702742400`}
+
+ + Our support team is ready to help with API integration and technical questions. +
+ ++ Manage customer records programmatically +
++ The Customers API allows you to manage customer records in your SmoothSchedule account. + Create, retrieve, update, and list customer information programmatically. +
+
+ Required Scopes: customers:read for reading,
+ customers:write for creating/updating
+
GET /api/v1/customers/
+ + Retrieve a paginated list of customers. Results are limited to 100 customers per request. +
+Query Parameters:
+email - Filter by exact email addresssearch - Search by name or email (partial match)GET /api/v1/customers/{id}/
+ + Retrieve a specific customer by their UUID. +
+POST /api/v1/customers/
+ + Create a new customer record. +
+Request Body:
+email - *required Email address (must be unique)name - Customer's full namephone - Phone number
+ Note: Returns 409 Conflict if a customer with the email already exists.
+
PATCH /api/v1/customers/{id}/
+ + Update an existing customer's information. +
+Request Body:
+name - Customer's full namephone - Phone number+ Important: Email addresses cannot be changed after creation. +
+| + Field + | ++ Type + | ++ Description + | +
|---|---|---|
+ id
+ |
+ + UUID + | ++ Unique customer identifier + | +
+ email
+ |
+ + string + | ++ Customer's email address (unique) + | +
+ name
+ |
+ + string + | ++ Customer's full name + | +
+ phone
+ |
+ + string | null + | ++ Customer's phone number + | +
+ created_at
+ |
+ + ISO 8601 + | ++ Timestamp when customer was created + | +
+ total_appointments
+ |
+ + integer + | ++ Total number of appointments for this customer + | +
+ last_appointment_at
+ |
+ + ISO 8601 | null + | ++ Timestamp of customer's most recent appointment + | +
+
+{`{
+ "id": "123e4567-e89b-12d3-a456-426614174000",
+ "email": "customer@example.com",
+ "name": "Jane Doe",
+ "phone": "+1234567890",
+ "created_at": "2024-01-01T10:00:00Z",
+ "total_appointments": 5,
+ "last_appointment_at": "2024-12-01T14:00:00Z"
+}`}
+
+
+
+
+{`curl -X GET "https://yourbusiness.smoothschedule.com/api/v1/customers/" \\
+ -H "Authorization: Bearer YOUR_API_KEY" \\
+ -H "Content-Type: application/json"`}
+
+
+
+
+{`curl -X GET "https://yourbusiness.smoothschedule.com/api/v1/customers/?search=jane" \\
+ -H "Authorization: Bearer YOUR_API_KEY" \\
+ -H "Content-Type: application/json"`}
+
+
+
+
+{`curl -X POST "https://yourbusiness.smoothschedule.com/api/v1/customers/" \\
+ -H "Authorization: Bearer YOUR_API_KEY" \\
+ -H "Content-Type: application/json" \\
+ -d '{
+ "email": "customer@example.com",
+ "name": "Jane Doe",
+ "phone": "+1234567890"
+ }'`}
+
+
+
+
+{`curl -X PATCH "https://yourbusiness.smoothschedule.com/api/v1/customers/123e4567-e89b-12d3-a456-426614174000/" \\
+ -H "Authorization: Bearer YOUR_API_KEY" \\
+ -H "Content-Type: application/json" \\
+ -d '{
+ "name": "Jane Smith",
+ "phone": "+1987654321"
+ }'`}
+
+
+ + Our support team is ready to help with any questions about the Customers API. +
+ ++ REST API for third-party integrations +
++ SmoothSchedule provides a comprehensive REST API that allows you to integrate your scheduling + platform with third-party applications, build custom tools, and automate workflows. +
+
+ https://your-subdomain.smoothschedule.com/api/v1/
+
+ + Interactive Documentation: Explore and test API endpoints at{' '} + + /api/v1/docs/ + +
++ All API requests require authentication using Bearer tokens in the Authorization header. +
+ +ss_live_xxxxxxxxx
+ Production environment
+ss_test_xxxxxxxxx
+ Sandbox environment (safe for testing)
+
+{`curl -X GET "https://demo.smoothschedule.com/api/v1/services/" \\
+ -H "Authorization: Bearer ss_live_xxxxxxxxx" \\
+ -H "Content-Type: application/json"`}
+
+ + Security: API tokens are created in Business Settings → API. + Each token has configurable scopes that control access to specific endpoints and operations. +
++ Control which operations your API token can perform by selecting scopes: +
+| Scope | +Description | +
|---|---|
+ services:read
+ |
+ View services and pricing | +
+ resources:read
+ |
+ View resources and staff | +
+ availability:read
+ |
+ Check time slot availability | +
+ bookings:read
+ |
+ View appointments | +
+ bookings:write
+ |
+ Create, update, cancel appointments | +
+ customers:read
+ |
+ View customer information | +
+ customers:write
+ |
+ Create and update customers | +
+ business:read
+ |
+ View business information | +
+ webhooks:manage
+ |
+ Manage webhook subscriptions | +
+ API requests are rate-limited to ensure fair usage and platform stability: +
+1,000 requests per hour
+100 requests per minute
+X-RateLimit-Limit - Maximum requests allowedX-RateLimit-Remaining - Requests remaining in windowX-RateLimit-Reset - Unix timestamp when limit resets+ All errors follow a consistent JSON format: +
+
+{`{
+ "error": "validation_error",
+ "message": "Invalid request data",
+ "details": {
+ "start_time": ["This field is required."],
+ "service_id": ["Invalid service ID."]
+ }
+}`}
+
+ | Code | +Status | +Description | +
|---|---|---|
200 |
+ OK | +Request succeeded | +
201 |
+ Created | +Resource created successfully | +
400 |
+ Bad Request | +Invalid request data | +
401 |
+ Unauthorized | +Missing or invalid token | +
403 |
+ Forbidden | +Insufficient scope permissions | +
404 |
+ Not Found | +Resource does not exist | +
409 |
+ Conflict | +Resource conflict (e.g., double booking) | +
429 |
+ Too Many Requests | +Rate limit exceeded | +
500 |
+ Internal Server Error | +Server error (contact support) | +
+ Test your integration safely without affecting production data: +
+Test Tokens
+
+ Tokens prefixed with ss_test_ work with sandbox data only
+
Safe Testing
++ Create, update, and delete test appointments without affecting real bookings +
+Easy Toggle
++ Switch between test and live modes in Business Settings → API +
++ Tip: Always test with sandbox tokens before using production tokens in your application. +
++ Create, manage, and query appointments +
++ Access service catalog and pricing +
++ Staff, rooms, and equipment data +
++ Customer profiles and contact info +
++ Real-time event notifications +
++ Our support team is ready to help with API integration questions. +
+ ++ Access bookable resources via the public API +
++ The Resources API provides read-only access to your bookable resources including staff members, + rooms, and equipment. Use this API to list available resources and retrieve their details. +
+
+ Required OAuth Scope: resources:read
+
+ Resources are read-only via the public API. To create or modify resources, use the main dashboard. +
++ Returns a list of all active resources in your account. +
+| Parameter | +Type | +Description | +
|---|---|---|
| type | +string | +Filter by resource type (STAFF, ROOM, EQUIPMENT) | +
+ Retrieve details for a specific resource by its ID. +
+| Field | +Type | +Description | +
|---|---|---|
| id | +UUID | +Unique identifier | +
| name | +string | +Resource name | +
| description | +string (nullable) | +Resource description | +
| resource_type | +object | +Resource type object with id, name, category | +
| photo_url | +string (nullable) | +URL to resource photo | +
| is_active | +boolean | +Whether resource is active | +
Team members who provide services
+Physical spaces for appointments
+Tools or equipment needed for services
+
+ {`{
+ "id": "550e8400-e29b-41d4-a716-446655440000",
+ "name": "John Smith",
+ "description": "Senior Stylist with 10 years experience",
+ "resource_type": {
+ "id": "660e8400-e29b-41d4-a716-446655440000",
+ "name": "Stylist",
+ "category": "STAFF"
+ },
+ "photo_url": "https://example.com/photos/john-smith.jpg",
+ "is_active": true
+}`}
+
+
+ {`curl -X GET "https://yourbusiness.smoothschedule.com/api/v1/resources/" \\
+ -H "Authorization: Bearer YOUR_ACCESS_TOKEN"`}
+
+
+ {`curl -X GET "https://yourbusiness.smoothschedule.com/api/v1/resources/?type=STAFF" \\
+ -H "Authorization: Bearer YOUR_ACCESS_TOKEN"`}
+
+
+ {`curl -X GET "https://yourbusiness.smoothschedule.com/api/v1/resources/550e8400-e29b-41d4-a716-446655440000/" \\
+ -H "Authorization: Bearer YOUR_ACCESS_TOKEN"`}
+
+ + The Resources API is just one part of our comprehensive public API. + View the full documentation to learn about appointments, customers, services, and more. +
+ + View Full API Docs ++ Our support team is ready to help with any questions about the API. +
+ ++ Access your service catalog via API +
++ Access your service catalog via the public API to integrate scheduling capabilities into your own applications, websites, or mobile apps. +
+
+ Required scope: services:read
+
+ Note: Services are read-only via the public API. Use the dashboard to create, update, or delete services. +
+
+ /api/v1/services/
+
+
+ Returns all active services ordered by display_order.
+
+ /api/v1/services/{'{id}'}/
+
+ + Returns detailed information for a specific service by UUID. +
+| + Field + | ++ Type + | ++ Description + | +
|---|---|---|
+ id
+ |
+ + UUID + | ++ Unique identifier for the service + | +
+ name
+ |
+ + string + | ++ Service name (e.g., "Haircut", "Oil Change") + | +
+ description
+ |
+ + string | null + | ++ Optional detailed description of the service + | +
|
+
+
+ duration
+ |
+ + integer + | ++ Duration in minutes (e.g., 30, 60, 90) + | +
|
+
+
+ price
+ |
+ + decimal | null + | ++ Price in dollars (null for variable pricing) + | +
|
+
+
+ photos
+ |
+ + array + | ++ Array of photo URLs for the service + | +
+ is_active
+ |
+ + boolean + | ++ Whether the service is currently active + | +
+{`{
+ "id": "550e8400-e29b-41d4-a716-446655440000",
+ "name": "Haircut",
+ "description": "Professional haircut service",
+ "duration": 30,
+ "price": "45.00",
+ "photos": [
+ "https://smoothschedule.nyc3.digitaloceanspaces.com/..."
+ ],
+ "is_active": true
+}`}
+
+
+{`curl -X GET "https://yourbusiness.smoothschedule.com/api/v1/services/" \\
+ -H "Authorization: Bearer YOUR_API_KEY" \\
+ -H "Content-Type: application/json"`}
+
+
+{`curl -X GET "https://yourbusiness.smoothschedule.com/api/v1/services/550e8400-e29b-41d4-a716-446655440000/" \\
+ -H "Authorization: Bearer YOUR_API_KEY" \\
+ -H "Content-Type: application/json"`}
+
+ + Our support team is ready to help with any questions about the Services API. +
+ ++ Receive real-time notifications when events occur in your account +
++ Webhooks allow your application to receive real-time notifications when events occur in your SmoothSchedule account. + Instead of polling the API, webhooks POST JSON payloads to your specified endpoint whenever subscribed events happen. +
+webhooks:manage
+ GET /api/v1/webhooks/
+ + Returns a list of all webhook subscriptions for your account. +
+POST /api/v1/webhooks/
+ + Create a new webhook subscription. Returns the subscription including a secret for signature verification. +
+Request Body:
+
+{`{
+ "url": "https://example.com/webhooks",
+ "events": ["appointment.created", "appointment.cancelled"],
+ "description": "Production webhook endpoint"
+}`}
+
+
+ Important: The secret is only shown once in the response. Store it securely for signature verification.
+
GET /api/v1/webhooks/{`{id}`}/
+ + Retrieve details of a specific webhook subscription. +
+PATCH /api/v1/webhooks/{`{id}`}/
+ + Update an existing webhook subscription (URL, events, or description). +
+DELETE /api/v1/webhooks/{`{id}`}/
+ + Delete a webhook subscription permanently. +
+GET /api/v1/webhooks/events/
+ + Get a list of all available webhook event types. +
+POST /api/v1/webhooks/{`{id}`}/test/
+ + Send a test webhook to verify your endpoint is working correctly. +
+GET /api/v1/webhooks/{`{id}`}/deliveries/
+ + View delivery history and status for a webhook subscription. +
++ Subscribe to one or more of these events to receive notifications: +
+| Event | +Description | +
|---|---|
appointment.created |
+ Triggered when a new appointment is created | +
appointment.updated |
+ Triggered when an appointment is updated | +
appointment.cancelled |
+ Triggered when an appointment is cancelled | +
customer.created |
+ Triggered when a new customer is created | +
customer.updated |
+ Triggered when customer information is updated | +
service.created |
+ Triggered when a new service is created | +
service.updated |
+ Triggered when a service is updated | +
+ All webhook payloads follow this standard format: +
+
+{`{
+ "event": "appointment.created",
+ "timestamp": "2024-12-16T10:00:00Z",
+ "data": {
+ "id": "123",
+ "customer": {
+ "id": "456",
+ "email": "customer@example.com",
+ "name": "John Doe"
+ },
+ "service": {
+ "id": "789",
+ "name": "Haircut",
+ "duration": 30
+ },
+ "start_time": "2024-12-20T14:00:00Z",
+ "end_time": "2024-12-20T14:30:00Z",
+ "status": "confirmed"
+ // ... additional event-specific fields
+ }
+}`}
+
+
+ All webhooks include an X-Webhook-Signature header
+ containing an HMAC-SHA256 signature. Verify this signature to ensure the webhook came from SmoothSchedule.
+
X-Webhook-Signature: sha256=a1b2c3d4...
+ HMAC-SHA256 of the raw request body using your webhook secret
+
+{`import hmac
+import hashlib
+
+def verify_webhook(request, secret):
+ signature = request.headers.get('X-Webhook-Signature', '')
+ expected = 'sha256=' + hmac.new(
+ secret.encode(),
+ request.body,
+ hashlib.sha256
+ ).hexdigest()
+ return hmac.compare_digest(signature, expected)`}
+
+
+{`const crypto = require('crypto');
+
+function verifyWebhook(request, secret) {
+ const signature = request.headers['x-webhook-signature'];
+ const expected = 'sha256=' + crypto
+ .createHmac('sha256', secret)
+ .update(request.rawBody)
+ .digest('hex');
+ return crypto.timingSafeEqual(
+ Buffer.from(signature),
+ Buffer.from(expected)
+ );
+}`}
+
+ + If your endpoint fails to respond with a 2xx status code, SmoothSchedule will automatically retry delivery: +
++ Important: Your endpoint should respond within 5 seconds and return a 2xx status code to acknowledge receipt. + Process the webhook asynchronously if needed. +
+
+{`# Using curl
+curl -X POST https://api.smoothschedule.com/api/v1/webhooks/ \\
+ -H "Authorization: Bearer YOUR_API_KEY" \\
+ -H "Content-Type: application/json" \\
+ -d '{
+ "url": "https://example.com/webhooks",
+ "events": ["appointment.created", "appointment.cancelled"],
+ "description": "Production webhook endpoint"
+ }'
+
+# Response (save the secret!)
+{
+ "id": "wh_abc123",
+ "url": "https://example.com/webhooks",
+ "events": ["appointment.created", "appointment.cancelled"],
+ "description": "Production webhook endpoint",
+ "secret": "whsec_xyz789...", // Only shown once!
+ "is_active": true,
+ "created_at": "2024-12-16T10:00:00Z"
+}`}
+
+
+{`const express = require('express');
+const crypto = require('crypto');
+
+const app = express();
+
+// Important: Use raw body for signature verification
+app.post('/webhooks',
+ express.raw({ type: 'application/json' }),
+ (req, res) => {
+ // Verify signature
+ const signature = req.headers['x-webhook-signature'];
+ const expected = 'sha256=' + crypto
+ .createHmac('sha256', process.env.WEBHOOK_SECRET)
+ .update(req.body)
+ .digest('hex');
+
+ if (!crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(expected))) {
+ return res.status(401).send('Invalid signature');
+ }
+
+ // Parse and process webhook
+ const payload = JSON.parse(req.body);
+ console.log('Received event:', payload.event);
+
+ // Process asynchronously
+ processWebhook(payload).catch(console.error);
+
+ // Respond immediately
+ res.status(200).send('OK');
+ }
+);`}
+
+ + Our support team is ready to help with any questions about webhooks. +
+ ++ Manage multiple business locations with ease. Each location can have its own resources, services, and schedule settings while maintaining centralized control. +
+ +Complete guide to managing multiple business locations
++ SmoothSchedule provides a comprehensive REST API for third-party integrations. Build custom applications, mobile apps, or connect with external services using our secure and well-documented API. +
+ +Authentication, rate limits, and getting started
+ + +Create, update, and manage appointments
+ + +Manage services and availability
+ + +Access and update staff, rooms, and equipment
+ + +Manage customer data and preferences
+ + +Configure real-time event notifications
+ ++ Access interactive API documentation with example requests and responses at{' '} + + /api/v1/docs/ + +
+{t('helpComprehensive.settings.usageQuotaLinkDesc')}
+ +Configure operating hours and availability
+ + +Customize automated email templates
+ + +Embed booking widget on your website
+ + +Manage team permissions and access levels
+ + +Configure SMS and calling features
+ diff --git a/frontend/src/pages/help/HelpLocations.tsx b/frontend/src/pages/help/HelpLocations.tsx new file mode 100644 index 00000000..6df3d822 --- /dev/null +++ b/frontend/src/pages/help/HelpLocations.tsx @@ -0,0 +1,358 @@ +/** + * Help Locations Page + * + * User-friendly help documentation for Locations. + */ + +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { useNavigate } from 'react-router-dom'; +import { + ArrowLeft, + MapPin, + Building2, + Star, + Power, + PowerOff, + Edit, + Trash2, + Phone, + Mail, + Globe, + Clock, + CheckCircle, + HelpCircle, + Users, + Briefcase, +} from 'lucide-react'; + +const HelpLocations: React.FC = () => { + const { t } = useTranslation(); + const navigate = useNavigate(); + + return ( ++ Manage multiple business locations with ease +
++ Locations allow you to manage multiple business sites from a single account. Whether you have + multiple offices, retail stores, or service areas, each location can have its own address, + contact information, timezone settings, and dedicated resources and services. +
++ Assign resources (staff, rooms, equipment) and services to specific locations to keep your + scheduling organized and ensure customers book appointments at the right place. +
++ Each location stores comprehensive information to help customers find and contact you: +
+Location name, street address, city, state, postal code, and country
+Phone number and email address for customer inquiries
+Set the local timezone for accurate appointment scheduling
+Designate one location as your primary business location
++ You can designate one location as your primary location. This is your main + business address and will be used as the default location for new resources and services. +
+Click the star icon next to any location to make it primary. The previous primary location will automatically be unmarked.
+Primary location appears first in lists and is pre-selected when creating new resources or services.
++ Click the Edit button next to any location to update its information. + All changes are saved immediately and will apply to future bookings. +
++ Instead of deleting locations, you can temporarily deactivate them: +
++ Click the Delete button to permanently remove a location. +
++ Warning: You cannot delete a location that has associated resources or services. + Reassign or delete them first, or use the deactivate option instead. +
++ Each location displays counts of associated resources and services to help you understand + how your business is organized: +
++ See how many staff members, rooms, or equipment items are assigned to each location +
++ Track which services are available at each location for accurate booking +
++ Always configure the correct timezone for each location to ensure appointment times are displayed + correctly for both staff and customers in different time zones. +
++ Give locations clear, recognizable names like "Downtown Office" or "West Side Clinic" to help + staff and customers easily identify the right location. +
++ Select your main or headquarters location as primary. This becomes the default for new resources + and services and appears first in location lists. +
++ If a location is temporarily closed or inactive, deactivate it instead of deleting. This preserves + historical data and allows you to reactivate it later if needed. +
++ Regularly update phone numbers and email addresses to ensure customers can reach the right location + if they need to contact you about their appointment. +
++ Our support team is ready to help with any questions about locations. +
+ ++ Configure your operating hours and availability +
++ Business Hours define when your business is open and accepting appointments. Setting accurate + hours is essential for providing a smooth booking experience for your customers. +
++ Customers can only book appointments during your configured business hours. Any time slots + outside these hours will be automatically hidden from the booking interface. +
+Go to Settings → Business Hours from your dashboard.
+Each day of the week can have different hours. Toggle each day on or off.
+For each enabled day, choose when you open and close using the time pickers.
+Click "Save Business Hours" to apply your changes. They take effect immediately.
++ To mark a day as closed, simply toggle it off in the Business Hours settings. Common scenarios: +
+Disable Saturday and Sunday if you're closed on weekends
+Turn off any day you're regularly closed (e.g., Mondays)
+Set different hours for different days (e.g., shorter hours on Friday)
+Use Time Blocks for one-time closures like holidays
++ Your business hours directly control when customers can book appointments: +
++ Only time slots within your business hours will be shown to customers in the booking calendar. +
++ Days that are disabled won't appear as available booking options for customers. +
++ Appointments must end before closing time. A 2-hour service can't start 1 hour before close. +
++ Changes to business hours take effect immediately and apply to all future bookings. +
++ Set closing time 15-30 minutes after your last desired appointment to account for cleanup and staff departure. +
++ For one-time closures (holidays, maintenance), use Time Blocks instead of changing business hours. +
++ If specific staff have different schedules, use Resource availability settings in addition to business hours. +
++ Update your hours seasonally or as your business evolves to ensure accurate availability. +
++ Our support team is ready to help with any questions about business hours settings. +
+ ++ Manage SMS and calling features for your business +
++ Communication settings enable you to send SMS reminders to customers and make masked calls + through your business phone number. The system uses a credit-based model powered by Twilio, + ensuring reliable delivery and professional communication. +
++ Set up automatic appointment reminders, make calls that display your business number, + and manage your communication budget with auto-reload features. +
+Answer a few questions about your business size and communication needs to estimate your monthly usage.
+Add credits to your account based on the wizard's recommendation or choose your own amount.
+Search for and claim a local phone number in your area code for SMS and calls.
+Set up automatic credit top-ups to ensure uninterrupted service.
++ Credits are used for both SMS and calling features. Your balance is displayed prominently + in the Communication Settings page. +
+Approximately $0.01 - $0.02 per SMS depending on destination country. Long messages may use multiple credits.
+Charged per minute of talk time. Pricing varies by country but typically ranges from $0.01 - $0.05 per minute.
+Buy credits in bulk with minimum purchase of $10. Larger purchases may qualify for volume discounts.
++ Auto-reload ensures you never run out of credits during important communications. + Configure threshold and reload amounts to match your usage patterns. +
++ When your balance falls below the threshold amount (e.g., $10), we automatically + charge your payment method and add the reload amount (e.g., $50) to your account. +
++ Your business needs a dedicated phone number for sending SMS and making masked calls. + Search and provision numbers directly through the settings page. +
+Enter your desired area code (e.g., 303 for Denver) to see available local numbers.
+Select from available numbers. Local numbers build trust and improve answer rates.
+Phone numbers have a small monthly fee (typically $1-2) automatically deducted from your credits.
++ Reduce no-shows by automatically sending SMS reminders to customers before their appointments. +
+Sent one day before appointments
+Sent shortly before appointments
++ Only send SMS to customers who have provided their phone number and consented to + receive communications. Respect opt-out requests immediately. +
++ Make calls to customers that display your business phone number instead of personal cell phones. + Protects staff privacy while maintaining professional communication. +
+Your personal phone number remains hidden. Customers see only your business number.
+Customers are more likely to answer calls from recognized local numbers.
+Optional call recording for quality assurance and training purposes.
++ View detailed logs of all communication activity including credit purchases, SMS sends, + and call minutes used. +
++ The wizard provides accurate usage estimates based on your business size and helps + you avoid over or under-purchasing credits. +
++ Prevent service interruptions by setting up auto-reload. Set the threshold to 20-30% + of your typical monthly usage for best results. +
++ Check the transaction history monthly to understand patterns and optimize your + auto-reload settings. Look for opportunities to reduce no-shows. +
++ Local area codes increase trust and answer rates. Customers are more likely to + respond to numbers they recognize as being from their area. +
++ Always obtain customer consent before sending SMS or making calls. Honor opt-out + requests immediately and maintain do-not-contact lists. +
++ Our support team is ready to help with communication settings and troubleshooting. +
+ ++ Customize your automated email communications +
++ Email Templates allow you to customize all automated emails sent from your scheduling platform. + Using our visual drag-and-drop editor powered by Puck, you can create professional, branded + emails without any coding knowledge. +
++ Each template supports dynamic content through template tags, allowing you to personalize + messages with customer names, appointment details, and other relevant information. +
++ Sent when a new customer account is created. Sets the tone for their relationship with your business. +
++ Four templates for the complete appointment lifecycle: +
++ Sent when a contract or agreement needs to be signed by the customer. +
++ Sent for payment confirmations, receipts, or payment reminders. +
++ Sent when support tickets are created, updated, or resolved. +
++ Our email editor uses Puck, a powerful visual drag-and-drop interface that makes email + design simple and intuitive. +
++ Navigate to Settings → Email Templates and choose the template you want to customize. +
++ Add text blocks, images, buttons, dividers, and other elements by dragging them from + the component panel into your email layout. +
++ Click on any element to edit its properties - text, colors, fonts, spacing, alignment, and more. +
++ Use template tags (like {{customer_name}}) to add dynamic content that changes + for each email sent. +
++ Click "Save" to apply your changes. The new template will be used for all future emails + of that type. +
+
+ Template tags are placeholders that get replaced with real data when the email is sent.
+ Wrap tag names in double curly braces: {{tag_name}}
+
+ The editor shows a real-time preview of your email as you make changes. What you see + is what your customers will receive. +
++ Preview both the HTML version (for modern email clients) and plain text version + (for simple email clients or accessibility). +
++ Send a test email to yourself to see how it appears in your actual email client. + Template tags will be filled with sample data. +
++ Toggle between desktop and mobile views to ensure your emails look great on all devices. +
++ Email templates automatically integrate with your business branding settings: +
++ If you want to start over or undo your customizations, you can reset any template to its + default state. +
++ Warning: This action cannot be undone +
++ Resetting a template will permanently delete all your customizations and restore + the original default template. Make sure to save a copy if you want to keep your work. +
++ Our support team is ready to help with any questions about email templates. +
+ ++ Add a booking widget to your website in minutes +
++ The Embed Widget lets you add SmoothSchedule's booking functionality directly to your existing website. + Your customers can book appointments without leaving your site, creating a seamless experience that + matches your brand. +
++ Works on any website platform including WordPress, Wix, Squarespace, Shopify, or custom HTML sites. + No technical expertise required - just copy and paste the code snippet. +
+Simple HTML iframe - works everywhere, fixed size, easy to implement
+Advanced option - responsive sizing, better integration, modal support
++ Recommendation: Use the iframe for quick setup. Use JavaScript snippet for better responsive design + and if you want the widget to appear as a modal/popup. +
+Customize primary color, button styles, and backgrounds to match your website
+Set width and height (iframe) or let it adapt to your page layout (JavaScript)
+Widget automatically adapts to mobile, tablet, and desktop screen sizes
+Choose default service, hide certain options, or pre-select staff members
++ Add a Custom HTML block to your page, paste the embed code, and publish. Works with any page builder. +
++ Click "Add Elements" → "Embed" → "Embed a Widget" → "HTML iframe" or "Custom Code", then paste your code. +
++ Edit your page, add a "Code" block, paste the embed code, and save. Set to HTML mode if prompted. +
++ Go to Online Store → Pages → Create/Edit page → Show HTML editor → Paste code in desired location. +
++ Paste the embed code directly into your HTML file where you want the widget to appear. For JavaScript snippet, add before closing </body> tag. +
++ Head to your Embed Widget settings to customize your widget, preview it, and copy the code snippet. + You'll have it live on your website in just a few minutes. +
+ ++ Having trouble embedding the widget? Our support team can help with installation and customization. +
+ ++ Control staff access and permissions with custom roles +
++ Staff Roles allow you to control what your staff members can see and do in your scheduling platform. + Create custom roles with specific permissions to match your business needs. +
++ Each role defines which menu items staff can access and which dangerous operations (like deleting + customers or appointments) they can perform. Assign roles to staff members to apply these permissions + automatically. +
++ SmoothSchedule comes with three built-in roles to get you started: +
++ Access to all menu items and all dangerous permissions. Best for managers and supervisors. +
++ Access to Scheduler, Customers, and Messages only. No dangerous permissions. Best for general staff. +
++ Access to Scheduler, Services, Customers, and Messages. No delete permissions. Best for reception. +
+Go to Settings → Staff Roles.
+Click the "Create Role" button to open the role creation form.
+Provide a name (e.g., "Technician") and optional description.
+Choose which sidebar menu items this role can access.
+Carefully choose delete permissions for critical operations.
+Save the role and assign it to staff members.
++ Menu permissions control which sidebar items are visible to staff members with this role. + If a permission is not granted, the menu item will be hidden from the sidebar. +
+View and manage the calendar
+Manage offered services
+Manage staff and equipment
+Manage staff members
+View customer information
+Manage availability blocks
+Access messaging features
+Manage support tickets
+View payment information
+Manage contracts and signatures
+View automation tasks
+Edit marketing site pages
+Manage media gallery
+Access business settings
++ Dangerous permissions allow staff to perform irreversible delete operations. + Only grant these permissions to trusted staff members. +
++ Allows staff to permanently delete customer records and all associated data +
++ Allows staff to permanently delete scheduled appointments +
++ Allows staff to permanently delete services from your offerings +
++ Allows staff to permanently delete resources (staff members, rooms, equipment) +
++ Once you've created a role, you can assign it to staff members to apply the permissions: +
++ Navigate to Staff in the sidebar +
++ Click on a staff member to edit their details +
++ Select the desired role from the Staff Role dropdown +
++ Save changes - permissions apply immediately +
++ Note: The Staff Roles page shows how many staff members are assigned to each role. + This helps you track role usage across your team. +
++ Use the built-in roles (Full Access, Limited, Front Desk) as templates when creating custom roles +
++ Only grant permissions that staff members need to do their job - nothing more +
++ Name roles clearly (e.g., "Massage Therapist", "Receptionist") so their purpose is obvious +
++ Be very selective about granting delete permissions - these operations cannot be undone +
++ Periodically review staff roles and permissions to ensure they're still appropriate +
++ Include a description when creating roles to document their intended purpose and use cases +
++ Our support team is ready to help with any questions about staff roles and permissions. +
+ +