03 · Le soluzioni
Tre modi per aprirlo
Ciascuna di queste opzioni rappresenta l'intera integrazione. Le due impostazioni fondamentali su ogni piattaforma sono JavaScript e il DOM storage — quest'ultimo è ciò che conserva la conversazione del visitatore tra un avvio e l'altro dell'app.
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>
)
}
Concedi alla WebView l'intero schermo e lascia che gestisca lo scorrimento — la pagina è già dimensionata per smartphone, inclusa l'area di sicurezza in basso.
Fissa la lista dei domini consentiti al tuo indirizzo, includendo lo slash finale. Un pattern come https://* consente a qualsiasi sito di integrarsi nella schermata di assistenza, mentre uno senza slash — https://support.yourbrand.com* — corrisponde anche a support.yourbrand.com.example.net. Se verifichi l'URL autonomamente, confronta l'origine analizzata anziché controllare solo il prefisso.
