> ## Documentation Index
> Fetch the complete documentation index at: https://watermelon.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Chat Widget, Mobile App Integration Guide
> Integrate the Watermelon chat widget directly into your Android, iOS, or Flutter app. Follow the setup guide to embed the widget, configure authentication, and adjust the layout to fit your app’s design.
## Overview
The Watermelon chat widget can be embedded in any mobile app using a **WebView**. The steps are similar across platforms:
1. Create a basic HTML shell.
2. Inject the Watermelon chat widget script.
3. Provide your `widgetID` and `settingsID`.
4. Embed the view or present it in your app.
5. Customize appearance in the watermelon dashboard
## iOS Implementation
You can embed the Watermelon chat widget using a `WKWebView`. Below are minimal SwiftUI and UIKit implementations.
## SwiftUI Example
```swift theme={null}
import SwiftUI
import WebKit
struct ChatWidgetView: UIViewRepresentable {
let widgetID: String
let settingsID: String
func makeUIView(context: Context) -> WKWebView {
let webView = WKWebView()
let html = """
"""
webView.loadHTMLString(html, baseURL: nil)
let script = """
const s = document.createElement('script');
s.src = 'https://chatwidget-prod.web.app/embed/init.iife.js';
s.type = 'module';
s.async = true;
s.setAttribute('data-watermelon-widget-id', '\(widgetID)');
s.setAttribute('data-watermelon-settings-id', '\(settingsID)');
document.body.appendChild(s);
"""
webView.evaluateJavaScript(script, completionHandler: nil)
return webView
}
func updateUIView(_ uiView: WKWebView, context: Context) {}
}
```
### Usage
```
struct ChatScreen: View {
var body: some View {
ChatWidgetView(
widgetID: "YOUR_WIDGET_ID",
settingsID: "YOUR_SETTINGS_ID"
)
}
}
```
## UIKit example
```
import UIKit
import WebKit
class ChatWidgetViewController: UIViewController {
private var webView: WKWebView!
let widgetID: String
let settingsID: String
init(widgetID: String, settingsID: String) {
self.widgetID = widgetID
self.settingsID = settingsID
super.init(nibName: nil, bundle: nil)
}
required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .systemBackground
webView = WKWebView()
webView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(webView)
NSLayoutConstraint.activate([
webView.topAnchor.constraint(equalTo: view.topAnchor),
webView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
webView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
webView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])
let html = """
"""
webView.loadHTMLString(html, baseURL: nil)
let script = """
const s = document.createElement('script');
s.src = 'https://chatwidget-prod.web.app/embed/init.iife.js';
s.type = 'module';
s.async = true;
s.setAttribute('data-watermelon-widget-id', '\(widgetID)');
s.setAttribute('data-watermelon-settings-id', '\(settingsID)');
document.body.appendChild(s);
"""
webView.evaluateJavaScript(script, completionHandler: nil)
}
}
```
### Usage
```
let vc = ChatWidgetViewController(
widgetID: "YOUR_WIDGET_ID",
settingsID: "YOUR_SETTINGS_ID"
)
navigationController?.pushViewController(vc, animated: true)
```
### iOS — App Transport Security
In `Info.plist`, allow HTTPS content (optional):
```
NSAppTransportSecurity
NSAllowsArbitraryLoads
```
## Android Implementation
Below is the minimal implementation using a standard `WebView`.
### 1. Enable WebView JavaScript
```
`AndroidManifest.xml`:
``
```
### 2. Add the WebView to your layout
`res/layout/activity_chat_widget.xml`:
```
```
### 3. Load the widget
```
class ChatWidgetActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_chat_widget)
val webView = findViewById(R.id.chatWebView)
webView.settings.javaScriptEnabled = true
val html = """
"""
webView.loadDataWithBaseURL(null, html, "text/html", "UTF-8", null)
val script = """
const s = document.createElement('script');
s.src = 'https://chatwidget-prod.web.app/embed/init.iife.js';
s.type = 'module';
s.async = true;
s.setAttribute('data-watermelon-widget-id', 'YOUR_WIDGET_ID');
s.setAttribute('data-watermelon-settings-id', 'YOUR_SETTINGS_ID');
document.body.appendChild(s);
"""
webView.evaluateJavascript(script, null)
}
}
```
## Flutter Integration
Flutter apps can load the Watermelon chat widget using the built-in `WebView` widget.
### 1. Add dependency
In pubspec.yaml: `dependencies: webview_flutter: ^4.7.0`
### 2. Implement the widget
```
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class ChatWidget extends StatefulWidget {
final String widgetID;
final String settingsID;
const ChatWidget({
required this.widgetID,
required this.settingsID,
super.key,
});
@override
State createState() => _ChatWidgetState();
}
class _ChatWidgetState extends State {
late final WebViewController controller;
@override
void initState() {
super.initState();
controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..loadHtmlString("""
""")
..runJavaScript("""
const s = document.createElement('script');
s.src = 'https://chatwidget-prod.web.app/embed/init.iife.js';
s.type = 'module';
s.async = true;
s.setAttribute('data-watermelon-widget-id', '${widget.widgetID}');
s.setAttribute('data-watermelon-settings-id', '${widget.settingsID}');
document.body.appendChild(s);
""");
}
@override
Widget build(BuildContext context) {
return WebViewWidget(controller: controller);
}
}
```