03 · De recepten
Drie manieren om het te openen
Elk hiervan is de volledige integratie. De twee instellingen die op elk platform van belang zijn, zijn JavaScript en DOM-opslag — DOM-opslag zorgt ervoor dat het gesprek van een bezoeker bewaard blijft wanneer de app opnieuw wordt geopend.
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>
)
}
Geef de WebView het volledige scherm en laat deze het scrollen zelf afhandelen — de pagina is al op formaat gemaakt voor een telefoon, inclusief de safe area aan de onderkant.
Koppel de allowlist aan je eigen adres, met de schuine streep aan het einde. Een patroon zoals https://* zorgt ervoor dat elke site in je supportscherm kan worden weergegeven, en een patroon zonder schuine streep — https://support.yourbrand.com* — komt ook overeen met support.yourbrand.com.example.net. Als je de URL zelf ook controleert, vergelijk dan de geparste herkomst in plaats van een voorvoegsel te testen.
