03 · Die Anleitungen
Drei Wege zum Öffnen
Jedes davon ist bereits die vollständige Integration. Die zwei wichtigsten Einstellungen auf jeder Plattform sind JavaScript und DOM-Storage — DOM-Storage sorgt dafür, dass die Unterhaltung eines Besuchers auch nach Neustarts der App erhalten bleibt.
iOS — WKWebView
import UIKit
import WebKit
final class SupportViewController: UIViewController {
private let webView = WKWebView(frame: .zero, configuration: WKWebViewConfiguration())
override func viewDidLoad() {
super.viewDidLoad()
webView.frame = view.bounds
webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
webView.scrollView.bounces = false
view.addSubview(webView)
var url = URLComponents(string: "https://support.yourbrand.com/chat")!
url.queryItems = [
URLQueryItem(name: "token_id", value: user.supportToken),
URLQueryItem(name: "email", value: user.email),
URLQueryItem(name: "name", value: user.fullName)
]
webView.load(URLRequest(url: url.url!))
}
}
Android — WebView
class SupportActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val webView = WebView(this)
setContentView(webView)
webView.settings.javaScriptEnabled = true
webView.settings.domStorageEnabled = true // keeps the conversation across launches
webView.webViewClient = WebViewClient() // keep navigation inside the WebView
val url = Uri.parse("https://support.yourbrand.com/chat")
.buildUpon()
.appendQueryParameter("token_id", user.supportToken)
.appendQueryParameter("email", user.email)
.appendQueryParameter("name", user.fullName)
.build()
webView.loadUrl(url.toString())
}
}
React Native — react-native-webview
import { SafeAreaView } from 'react-native'
import { WebView } from 'react-native-webview'
const params = new URLSearchParams({
token_id: user.supportToken,
email: user.email,
name: user.fullName
})
export function SupportScreen() {
return (
<SafeAreaView style={{ flex: 1 }}>
<WebView
source={{ uri: `https://support.yourbrand.com/chat?${params}` }}
javaScriptEnabled
domStorageEnabled
originWhitelist={['https://support.yourbrand.com/*']}
/>
</SafeAreaView>
)
}
Gib der WebView den gesamten Bildschirm und lass sie das Scrollen selbst übernehmen — die Seite ist bereits für Smartphones optimiert, einschließlich des Safe-Area-Bereichs am unteren Rand.
Beschränke die Erlaubnisliste auf deine eigene Adresse samt abschließendem Schrägstrich. Ein Muster wie https://* erlaubt jeder Website die Darstellung in deinem Support-Fenster, und eines ohne Schrägstrich — https://support.deinebrand.de* — passt auch auf support.deinebrand.de.example.net. Wenn du die URL selbst prüfst, vergleiche den geparsten Origin statt eines Präfix-Tests.
