Settings

Page Overview

What the page is for

The Settings area allows you to configure various aspects of the application, including cloud storage providers, notification settings, media library, billing address, and more.

When a user would use it

• When you need to configure cloud storage for file uploads
• When you want to set up email, SMS, or Slack notifications
• When you need to manage your media files
• When you want to configure a notification banner for all users
• When you need to update your billing address
• When you want to customize notification preferences

How to Access This Page

Navigation path from the main app

1. Log in to the application
2. From the main dashboard, use the sidebar navigation to click on "Settings"
3. Or, directly navigate to /settings in your browser

Permissions or prerequisites

• You must be logged in to access Settings
• Some settings sections require administrator or manager permissions
• If you don't have permission to view a section, you'll see an error message

Page Layout

The Settings area is organized into multiple sections:

1. Storage Settings: Configure cloud storage providers
2. App Settings:
   • Current Plan Features
   • Notification Banner
   • Notification Settings
3. Media Library: Manage your media files
4. Billing Address: Set your billing information

---

Storage Settings

What it's for

Configure cloud storage providers to store files uploaded through the application. You can use either Amazon S3 or Azure Blob Storage.

Page Layout

• Header: Title and description
• Storage Provider Tabs: Switch between AWS S3 and Azure Blob
• Storage Providers Status: Overview card showing active/inactive status

AWS S3 Configuration

1. Enable/Disable Toggle: Turn S3 storage on or off
2. AWS Region: Select your AWS region from the dropdown
3. Bucket Name: Enter your S3 bucket name
4. Access Key ID & Secret Access Key: Enter your AWS credentials (only shown if not already configured)
5. Save S3 Configuration: Save your settings
6. Test Email: Send a test to verify

Azure Blob Configuration

1. Enable/Disable Toggle: Turn Azure Blob storage on or off
2. Azure Region: Select your Azure region from the dropdown
3. Container Name: Enter your blob container name
4. Connection String: Enter your Azure Storage connection string (only shown if not already configured)
5. Save Azure Configuration: Save your settings

Storage Providers Status

Shows a card for each provider with:

• Provider name
• Region (if configured)
• Active/Inactive badge

Step-by-Step Tasks for Storage Settings

Configuring AWS S3

1. Go to Storage Settings
2. Click the "AWS S3" tab
3. Toggle "Enable S3 Storage" on
4. Select your AWS region from the dropdown
5. Enter your bucket name
6. If not already configured, enter your Access Key ID and Secret Access Key
7. Click "Save S3 Configuration"
8. (Optional) Send a test notification to verify

Configuring Azure Blob

1. Go to Storage Settings
2. Click the "Azure Blob" tab
3. Toggle "Enable Azure Blob Storage" on
4. Select your Azure region from the dropdown
5. Enter your container name
6. If not already configured, enter your connection string
7. Click "Save Azure Configuration"

Resetting Storage Configuration

1. If credentials are already configured, you'll see a yellow warning box
2. Click "Reset S3 Configuration" or "Reset Azure Configuration"
3. Then you can enter new credentials

---

App Settings

Current Plan Features

Shows which features are included in your current subscription plan.

Notification Banner

What it's for

Create and manage a notification banner that appears at the top of the application for all users.

Page Layout

• Header: Title and description
• Configuration Form:
  • Enable Banner toggle
  • Banner Message textarea (max 500 characters)
  • Preview of how the banner will look
  • Save/Update Banner button
  • Reset Changes button
• Information Cards:
  • Banner Status (Active/Inactive)
  • Message Length (character count)
  • Changes (unsaved changes or all saved)

Step-by-Step Tasks for Notification Banner

Creating/Updating the Banner

1. Go to App Settings > Notification Banner
2. Toggle "Enable Banner" on if you want it visible
3. Type your message in the "Banner Message" field (max 500 characters)
4. Check the preview to see how it will look
5. Click "Create Banner" or "Update Banner"
6. The banner will appear at the top of all pages for all users

Disabling the Banner

1. Go to App Settings > Notification Banner
2. Toggle "Enable Banner" off
3. Save your changes

Notification Settings

What it's for

Configure how the application sends notifications via email, SMS, and Slack.

Page Layout

• Header: Title and description
• Tabs:
  1. SMTP: Email configuration
  2. SMS: SMS provider configuration
  3. Slack: Slack webhook configuration
  4. History: View past notifications
  5. Preferences: Personal notification preferences
  6. Templates: Manage notification templates

SMTP (Email) Settings

• SMTP Host
• SMTP Port
• Username
• Password
• From Email
• From Name
• Use TLS toggle
• Save SMTP Settings button
• Test Email section

SMS Settings

• SMS Provider dropdown (AWS, Twilio, MSG91, Kaleyra, Africa's Talking, Generic HTTP)
• Provider-specific configuration fields
• Save SMS Settings button
• Test SMS section

Slack Settings

• Webhook URL
• Save Slack Settings button
• Test Slack section

Notification History

• Table showing past notifications with:
  • Type
  • Channel
  • Recipient
  • Status (Sent, Failed, Pending)
  • Sent At
  • Error message (if failed)

Notification Preferences

• Table showing your notification preferences by channel
• Add Channel button
• For each channel:
  • Channel name
  • Enabled toggle
  • Frequency (Immediate, Hourly, Daily)
  • Quiet Hours (start and end times)
  • Delete button

Notification Templates

• Create Template button
• Table showing all templates
• Actions for each template (Edit, Delete, View)

---

Media Library

What it's for

Browse, upload, and manage your media files (images, audio, video).

Page Layout

• Header: Title and description
• Tabs:
  1. Browse Library: View and manage existing files
  2. Upload Files: Upload new files

Browse Library Tab

• Filters:
  • Search bar
  • File type buttons (All, Image, Audio, Video)
  • Tag filters (click tags to toggle, Clear button)
• Asset Grid: Thumbnail grid showing files
• Pagination: Previous/Next buttons, page number
• Asset Cards: Each file shows:
  • Preview (image, audio player, video, or icon)
  • Filename
  • File type badge
  • File size
  • Delete button (appears on hover)

Upload Files Tab

• Drop Zone: Drag and drop files here, or click to browse
• Supported file types: JPEG, PNG, GIF, WebP, MP3, WAV, OGG, MP4, WebM

Preview Modal

When you click an asset, a modal opens showing:

• Full preview
• Metadata (file size, created date)
• Description (if any)
• Tags (if any)
• Edit Details button

Edit Metadata Modal

• Filename
• Description
• Tags (comma-separated)
• Cancel and Save Changes buttons

Step-by-Step Tasks for Media Library

Uploading Files

1. Go to Media Library
2. Click the "Upload Files" tab
3. Drag and drop files into the drop zone, or click to browse
4. Wait for upload to complete
5. You'll be taken back to the Browse Library tab automatically

Browsing Files

1. Go to Media Library
2. Stay on the "Browse Library" tab
3. Browse the grid of files
4. Use filters to narrow down:
   • Type keywords in the search bar
   • Click file type buttons
   • Click tags to filter by tag
5. Use pagination if there are many files

Previewing a File

1. Find the file you want to preview
2. Click on it
3. The preview modal will open
4. View the file and its metadata
5. Click outside or close to exit

Editing File Details

1. Preview the file
2. Click "Edit Details"
3. Update the filename, description, or tags
4. Click "Save Changes"

Deleting a File

1. Hover over the file
2. Click the X (delete) button in the top-left
3. Confirm the deletion
4. The file will be removed

---

Billing Address

What it's for

Set your billing address for tax calculation and invoicing.

Page Layout

• Header: Title and description
• Billing Address Form:
  • Individual Name (required)
  • Business Name (optional)
  • Address Line 1 (required)
  • Address Line 2 (optional)
  • City (required)
  • State/Province (required)
  • Postal Code (required)
  • Country (required)
  • Tax ID (optional, depends on country)
• Save Changes button

Step-by-Step Tasks for Billing Address

Updating Your Billing Address

1. Go to Billing Address
2. Fill in all required fields
3. (Optional) Enter your business name
4. (Optional) Enter your tax ID (format validated based on country)
5. Click "Save Changes"

---

Field & Button Reference

Storage Settings

Notification Banner

Media Library

---

Tips & Notes

Storage Settings

• Credentials are hidden once saved: After saving, you can't see credentials - you have to reset to update them
• Only one active provider: Only one storage provider can be active at a time
• Test before relying: Send a test to make sure your configuration works

Notification Banner

• Keep messages short: Max 500 characters - be concise
• It's visible to everyone: The banner appears on all pages for all users
• Disable when not needed: Turn it off when the message is no longer relevant

Media Library

• Supported formats: Images (JPEG, PNG, GIF, WebP), Audio (MP3, WAV, OGG), Video (MP4, WebM)
• Use tags to organize: Tags make it easy to find files later
• Delete carefully: Deleted files can't be recovered

Billing Address

• Tax ID format is validated: Make sure it matches your country's format
• Business name appears on invoices: If provided, it replaces the individual name on invoices
• Keep it updated: Changes affect tax calculation on all future invoices