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 Colabo app can be customized with additional properties to change its name and description:

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.

FAQ