Mobile App Integration
Embed your AIChatVault agent directly inside a native mobile app. The Mobile SDK adds a floating chat bubble to any iOS, Android, Flutter, or React Native app — no backend changes needed. Visitors tap the bubble to open a full-screen chat powered by your trained agent.
Supported platforms
| Platform | Language | What you get |
|---|---|---|
| Android | Kotlin | AcvChat.kt SDK — drop two files into your project, call one method |
| iOS | Swift / SwiftUI | AcvChat.swift SDK — UIKit FAB or SwiftUI view, works with both UIKit and SwiftUI apps |
| Flutter | Dart | acv_chat.dart SDK — wraps WebView with an animated loader |
| React Native | JavaScript | AcvChat.js SDK — works with Expo and bare React Native |
How the integration works
The SDK renders your AIChatVault widget inside a native WebView. The widget is served from AIChatVault's servers, so it always reflects your latest agent settings, knowledge base updates, and chat interface customisations — no app update required.
- •The floating action button (FAB) sits in the bottom-right corner of any screen you attach it to.
- •Tapping the FAB opens your chat widget in a full-screen sheet.
- •The agent's brand colour, icon, welcome message, and notification bubble are all loaded live from your Deploy → Settings configuration.
- •Any link your agent shares (source documents, product pages, "Powered by" badge) opens in the device's default browser — not inside the app.
- •The chat is stateful: the conversation persists for the duration of the app session.
Features included
| Feature | Description |
|---|---|
| Floating chat bubble | Branded FAB with your agent's colour and icon, always on top of your UI |
| Notification bubble | A small prompt card that appears above the FAB showing your configured welcome message |
| Animated loading overlay | AIChatVault branded spinner shown while the widget loads — keeps the experience polished |
| Full-screen chat | Opens as a modal sheet with a grab handle on iOS, a full activity on Android |
| External link handling | Sources, product links, and the "Powered by" badge open in the browser, not the WebView |
| Event callbacks | Receive events like chat_ready, user_message, bot_reply, and lead_captured in your native code |
| SwiftUI support | AcvChatBubbleView is a native SwiftUI view; async/await config loading; sheet presentation |
Getting started — step by step
1
Open Deploy → Mobile App
Go to your agent's Deploy page and click the Mobile App tab. This is where you download the SDK files and sample apps.
2
Download the SDK files for your platform
Each platform has one or two small source files to download (e.g. AcvChat.kt + AcvLoaderHtml.kt for Android). Drop them into your project — no package manager or pod install needed for iOS and Android. Flutter and React Native require adding two packages listed on the page.
3
Add the internet permission (Android only)
Add
<uses-permission android:name="android.permission.INTERNET" /> to your AndroidManifest.xml. iOS, Flutter, and React Native do not need an extra permission.4
Initialise the chat bubble
Create an instance of the chat bubble SDK object, passing your Agent Slug (shown on the Deploy → Mobile App page) and an optional event callback. Then call
attach() (Android/iOS) or return the widget in your build method (Flutter/React Native). The SDK fetches your agent's live configuration automatically.5
Run the sample app to verify
Each platform has a ready-made sample app you can download and run immediately with your agent pre-configured. Use it to verify the integration before adding it to your own app.
💡
Your Agent Slug is the unique identifier shown on the Mobile App tab. It looks like
your-agent-name-XXXXXX. Keep it — you use it every time you initialise the SDK.Customising the chat bubble appearance
You do not configure visual options in the SDK — everything is controlled from the AIChatVault dashboard:
- •Bubble colour — set in Settings → Chat Interface → Primary Colour. The SDK reads this at launch.
- •Chat icon — upload a custom icon in Settings → Chat Interface → Avatar. Displayed as a circular crop inside the FAB.
- •Welcome notification — toggle "Show notification bubble" on or off and edit the message text in Settings → Chat Interface.
- •Agent name and persona — controlled from your agent's main settings.
ℹ️
Changes you make in the dashboard are reflected in the mobile app the next time the SDK fetches the config (on every app launch). No app update or rebuild is needed.
Handling chat events
The SDK exposes an optional event callback so your app can react to things that happen inside the chat:
| Event | When it fires | Common use |
|---|---|---|
| chat_ready | Widget has finished loading | Hide a custom loading screen |
| user_message | User sends a message | Analytics / logging |
| bot_reply | Agent sends a response | Analytics / logging |
| lead_captured | Agent collects a visitor's contact details | Push lead to your CRM or analytics |
| chat_close | User closes the chat | Dismiss the modal (handled automatically by the SDK) |
Fullscreen vs bubble mode
The SDK supports two integration patterns. Choose the one that fits your app architecture:
- •Bubble mode (recommended) — the SDK manages the FAB and opens the chat automatically. One line of code to attach, zero layout work.
- •Fullscreen mode — you control when and how to present the chat screen. Useful if you want to embed the chat inside a bottom tab, a navigation drawer, or trigger it from your own UI button.
Both modes use the same agent slug and produce the same chat experience. The Manual Code tab on the Deploy → Mobile App page shows copy-paste snippets for both patterns on all four platforms.
Platform-specific notes
Android
- •Minimum SDK: API 24 (Android 7.0).
- •Requires material and appcompat dependencies (already in most Android projects).
- •The chat opens as a new Activity — add AcvChatActivity to your AndroidManifest.xml (shown in the Deploy tab).
- •Dark mode is handled automatically — the widget always renders on a white background regardless of system theme.
iOS
- •Minimum deployment target: iOS 14.
- •No CocoaPods or Swift Package Manager setup — just drag two .swift files into your Xcode target.
- •Works with both UIKit and SwiftUI apps.
- •External links open in Safari via UIApplication.shared.open().
- •Download the complete Xcode sample project (.zip) from the Deploy tab to see a working integration instantly.
Flutter
- •Requires webview_flutter: ^4.0.0 and url_launcher: ^6.2.0 in pubspec.yaml.
- •Add both packages with flutter pub add webview_flutter url_launcher.
- •Works on iOS and Android from a single Dart codebase.
React Native
- •Requires react-native-webview (install with npm install react-native-webview).
- •Works with Expo (managed and bare workflow) and plain React Native CLI.
- •Linking (for opening external URLs in the browser) is built into React Native — no extra install.
⚠️
The Mobile SDK requires your device to have a working internet connection. The chat widget is served remotely from AIChatVault's servers, so it cannot be used in a fully offline scenario.
Where to find the SDK files and sample apps
Everything is available from your agent's Deploy → Mobile App page:
- •SDK source files for each platform (downloadable individually)
- •Ready-to-run sample apps — Android APK and Xcode project ZIP for iOS
- •Your agent slug and the widget URL for manual integration
- •Copy-paste code snippets for bubble and fullscreen modes on all platforms
💡
If you have multiple apps (iOS and Android), you use the exact same agent slug on both platforms. One agent powers all your mobile surfaces.
Was this page helpful?