03 · As receitas
Três maneiras de abrir
Cada uma destas opções é a integração completa. As duas configurações que importam em todas
as plataformas são JavaScript e DOM storage — o DOM storage é o que mantém a
conversa do visitante ao abrir o aplicativo novamente.
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>
)
}
Dê à WebView a tela inteira e deixe que ela gerencie a própria rolagem —
a página já tem o tamanho ajustado para celular, incluindo a área de segurança na parte inferior.
Restrinja a lista de permissões ao seu próprio endereço, com a barra no final. Um padrão
como https://* permite que qualquer site seja renderizado dentro da sua tela
de suporte, e um sem a barra —
https://support.yourbrand.com* — também é compatível com
support.yourbrand.com.example.net. Se você também verificar a URL
por conta própria, compare a origem analisada em vez de testar um prefixo.
