Portals

ChatBotKit Portals provide a powerful way to configure and package ChatBotKit's conversational AI applications, also known as apps, into independent websites with custom domains and configurations. This feature allows you to create dedicated experiences for your users, tailored to their specific needs.

Applications

ChatBotKit has several internal applications that can be used independently from the dashboard:

• Chat: An app that allows users to interact with multiple AI agents in the same canvas.
• Inbox: An app that displays all conversations in a user-friendly format for exploration and review.
• Usage: An app that displays the usage analytics for the associated account (also includes sub-accounts).

Portals

Portals provide a way to configure these applications and package them into independent websites with custom domains and configurations. This allows you to create dedicated experiences for specific user groups or use cases.

Examples

1. Customer Support Portal: If you use the ChatBotKit Widget on your website to support your customers, you can create a dedicated portal for your support team to access the Inbox application. This allows them to review customer conversations periodically, with access limited to specific users.
2. Team of Experts and Bots: If you have multiple agents created for work-related activities, you can assemble your own team of experts and bots to perform tasks for you. By exposing these agents in a portal, your users can log in and interact with them, which is perfect for sales and marketing teams.
3. All-in-One Portal: You can package all applications together in a single portal, exposing either a single application or multiple applications, and grant access to specific users as needed.

General Configuration

To configure a portal, you need to write a config object. The default config object looks like this:

• The apps object defines the exposed applications, each with its own properties.
• The users object defines the users who have access to the portal. You can allow individual users or use wildcards to grant access to multiple users.

Layout

The layout object allows you to customize the portal's appearance and behavior. It includes options for configuring the footer, header, and other visual elements of the portal interface.

The footer properties allow you to customize the footer section of your portal:

• privacy: A URL to your privacy policy. When set, adds a "Privacy Policy" link to the footer.
• terms: A URL to your terms of service. When set, adds a "Terms of Service" link to the footer.
• madeWith: A boolean that controls the visibility of the "Made with ChatBotKit" footer text. Set to false to hide this text.

App-Specific Configuration

Different apps have their own configuration options:

Chat

The Chat app contains a list of exposed bots that users can interact with:

Chat can also contain a list of initial messages to help users perform common tasks:

The Chat app can be customized with additional properties to change its name and description:

Inbox

The Inbox app displays all conversations in a user-friendly format for exploration and review. You can configure which filter sections appear in the Inbox sidebar to control the interface based on your specific needs.

The Inbox app supports filter configuration to control which sidebar sections are displayed to users. By default, all filter types are displayed to provide complete access to all conversation categories.

To customize which filters are shown, you can explicitly configure the filters object:

All filter options are enabled by default when no filters configuration is specified. You only need to explicitly configure filters if you want to hide certain sections:

• integration: Controls visibility of integration-specific conversation filters including Widget, Slack, Discord, Messenger, WhatsApp, Telegram, Email, and Trigger conversations. Default: true
• safety: Controls visibility of safety-related filters such as Moderation conversations. Default: true
• console: Controls visibility of console-related filters for debugging and development purposes. Default: true

When a filter is set to false or omitted, the corresponding sidebar section will be hidden from the Inbox interface. This allows you to create focused experiences for different user groups:

• Customer Support Teams: May only need integration filters to see customer conversations
• Safety Teams: May primarily need safety filters to review moderated content
• Development Teams: May need console filters for debugging purposes

Customer Support Portal (only integration filters):

Safety Review Portal (only safety filters):

Developer Portal (all filters):

Desktop Installation (Progressive Web App)

ChatBotKit portals support installation as desktop applications using Progressive Web App (PWA) technology. This allows users to install your portal directly to their desktop or mobile device for a native-like experience with enhanced functionality.

What are Progressive Web Apps?

Progressive Web Apps (PWAs) are web applications that use modern web capabilities to deliver an app-like experience to users. When installed, PWAs provide:

• Native-like Experience: Full-screen application window without browser chrome
• Offline Capabilities: Enhanced offline functionality and faster loading
• Push Notifications: Desktop and mobile notifications (when supported)
• Home Screen Access: Direct access from desktop or mobile home screen
• Enhanced Performance: Improved loading speeds and smoother interactions
• Cross-Platform Compatibility: Works across all modern browsers and operating systems

Enabling Desktop Installation

To enable the desktop installation feature for your portal, add the install property to your portal configuration:

When enabled, users who meet PWA installation criteria will see an "Install Desktop App" button within the portal interface. This button appears automatically when:

• The user is accessing the portal through a compatible browser
• The portal meets PWA installation requirements
• The user hasn't already installed the portal as a desktop app

Installation Instructions by Browser

Google Chrome (Desktop)

1. Open your portal in Google Chrome
2. Look for the "Install Desktop App" button within the portal interface, or
3. Click the install icon (⊞) in the address bar, or
4. Click the three-dot menu → "Install [Portal Name]"
5. Click "Install" in the confirmation dialog
6. The portal will open as a desktop application

Alternative Method:

• Navigate to Chrome Settings → Apps → Install this site as an app

Microsoft Edge (Desktop)

1. Open your portal in Microsoft Edge
2. Look for the "Install Desktop App" button within the portal interface, or
3. Click the install icon (⊞) in the address bar, or
4. Click the three-dot menu → Apps → "Install this site as an app"
5. Click "Install" in the confirmation dialog
6. The portal will open as a desktop application

Safari (macOS)

Safari doesn't support traditional PWA installation, but users can add portals to the Dock:

1. Open your portal in Safari
2. Click Safari menu → "Add to Dock"
3. Customize the name and icon if desired
4. Click "Add"
5. The portal will be accessible from the Dock as a web app

Firefox (Desktop)

Firefox has limited PWA support but allows pinning to taskbar:

1. Open your portal in Firefox
2. Click the three-line menu → "Pin to Taskbar" (Windows) or "Add to Dock" (macOS)
3. The portal will be accessible from the taskbar/dock

Mobile Browsers

Chrome (Android):

1. Open your portal in Chrome on Android
2. Tap the "Install Desktop App" button within the portal, or
3. Tap the three-dot menu → "Add to Home screen" or "Install app"
4. Tap "Install" or "Add"
5. The portal will be added to your home screen

Safari (iOS):

1. Open your portal in Safari on iOS
2. Tap the Share button (⬆️)
3. Scroll down and tap "Add to Home Screen"
4. Customize the name if desired
5. Tap "Add"
6. The portal will be added to your home screen

Benefits of Desktop Installation

Installing your portal as a desktop application provides several advantages:

Enhanced User Experience

• Full-Screen Interface: Removes browser chrome for distraction-free usage
• Native Window Controls: Standard minimize, maximize, and close buttons
• Taskbar/Dock Integration: Easy access without opening a browser
• System Integration: Better integration with operating system features

Improved Performance

• Faster Startup: Quicker launch times compared to opening in browser
• Reduced Memory Usage: More efficient resource utilization
• Better Caching: Enhanced caching strategies for improved performance
• Offline Support: Better offline functionality and data persistence

Professional Appearance

• Branded Experience: Custom application icon and window title
• Dedicated Window: Appears as a separate application in window switchers
• Professional Integration: Seamless integration with business workflows
• Enhanced Security: Isolated application context for sensitive operations

Web App Manifest

ChatBotKit portals automatically generate a web app manifest (app.webmanifest) that includes:

• Application Name: Uses your portal's configured name
• Description: Portal description for app stores and installation prompts
• Icons: Automatically generated icons in multiple sizes (192x192, 512x512, 180x180)
• Display Mode: Set to "standalone" for full-screen app experience
• Theme Colors: Configured for consistent branding
• Start URL: Optimized entry point for the installed application

The manifest is dynamically generated based on your portal configuration, ensuring consistent branding and optimal installation experience.

Security and Audit Logging

ChatBotKit Portals include comprehensive audit logging for security monitoring and compliance tracking. All user authentication events are automatically logged to provide visibility into portal access and usage.

Audit Logging Implementation

Portal login events are automatically captured with the following information:

Security Information:

• IP address of the login attempt
• User agent string for client identification
• Frontend host information

Portal Context:

• Portal ID and slug identification
• User information and session details
• Authentication method (email-based login)

Session Tracking:

• Session ID for correlation with user activity
• Portal-specific metadata for context
• Timestamp information for chronological tracking

Compliance and Monitoring Benefits

The audit logging system provides:

• Security Monitoring: Track all user login activity across portals
• Compliance Tracking: Maintain logs for audit and regulatory requirements
• Forensic Analysis: Detailed information for security investigations
• Session Correlation: Link login events to subsequent user activity

Data Storage and Access

All audit logs are stored securely in the database with proper timestamps and user attribution. The logging system includes:

• Error Handling: Audit failures never prevent successful authentication
• Environment Awareness: Respects testing environment configurations
• Automatic Capture: No additional configuration required

FAQ