Overview
The Watermelon chat widget can be embedded in any mobile app using a WebView. The steps are similar across platforms:- Create a basic HTML shell.
- Inject the Watermelon chat widget script.
- Provide your
widgetIDandsettingsID. - Embed the view or present it in your app.
- Customize appearance in the watermelon dashboard
iOS Implementation
You can embed the Watermelon chat widget using aWKWebView. Below are minimal SwiftUI and UIKit implementations.
SwiftUI Example
import SwiftUI
import WebKit
struct ChatWidgetView: UIViewRepresentable {
let widgetID: String
let settingsID: String
func makeUIView(context: Context) -> WKWebView {
let webView = WKWebView()
let html = """
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
<body></body>
</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 = """
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
<body></body>
</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
InInfo.plist, allow HTTPS content (optional):
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
Android Implementation
Below is the minimal implementation using a standardWebView.
1. Enable WebView JavaScript
`AndroidManifest.xml`:
`<uses-permission android:name="android.permission.INTERNET" />`
2. Add the WebView to your layout
res/layout/activity_chat_widget.xml:
<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/chatWebView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
3. Load the widget
class ChatWidgetActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_chat_widget)
val webView = findViewById<WebView>(R.id.chatWebView)
webView.settings.javaScriptEnabled = true
val html = """
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
<body></body>
</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-inWebView 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<ChatWidget> createState() => _ChatWidgetState();
}
class _ChatWidgetState extends State<ChatWidget> {
late final WebViewController controller;
@override
void initState() {
super.initState();
controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..loadHtmlString("""
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
<body></body>
</html>
""")
..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);
}
}