03 · Les recettes
Trois façons de l'ouvrir
Chacun de ces exemples constitue l'intégralité de l'intégration. Les deux paramètres essentiels sur chaque plateforme sont JavaScript et le stockage DOM — c'est le stockage DOM qui conserve la conversation d'un visiteur entre deux ouvertures de l'application.
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>
)
}
Donnez tout l'écran à la WebView et laissez-la gérer son propre défilement — la page est déjà dimensionnée pour un téléphone, y compris la zone de sécurité en bas.
Restreignez la liste d'autorisations à votre propre adresse, avec la barre oblique finale. Un motif comme https://* permet à n'importe quel site de s'afficher dans votre écran de support, et un motif sans barre oblique — https://support.votremarque.com* — correspond aussi à support.votremarque.com.example.net. Si vous vérifiez également l'URL vous-même, comparez l'origine analysée plutôt que de tester un préfixe.
