03 · Las recetas
Tres formas de abrirlo
Cada una de estas opciones es la integración completa. Los dos ajustes que importan en cualquier plataforma son JavaScript y el almacenamiento DOM — el almacenamiento DOM es lo que conserva la conversación del visitante entre inicios de la 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>
)
}
Dale a la WebView la pantalla completa y deja que gestione su propio desplazamiento — la página ya está adaptada para teléfonos, incluida el área segura inferior.
Restringe la lista de permitidos a tu propia dirección, incluyendo la barra final. Un patrón como https://* permite que cualquier sitio se muestre dentro de tu pantalla de soporte, y uno sin la barra — https://soporte.tumarca.com* — también coincide con soporte.tumarca.com.ejemplo.net. Si también compruebas la URL por tu cuenta, compara el origen analizado en lugar de probar con un prefijo.
