Documentation

How to add Quidget to your Android & iOS apps using WebView

Easily add Quidget Web Chat to your mobile apps using WebView. Follow these quick steps to start chatting with users in no time! 🚀

🤖🟢 Android Integration

  1. Add WebView to Layout:

    <WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="16dp" />

  2. Initialize WebView in Activity:

    val webView: WebView = findViewById(R.id.webview)
webView.settings.javaScriptEnabled = true
webView.settings.domStorageEnabled = true
webView.settings.allowContentAccess = true

val chatScript = """
<html>
<head></head>
<body>
	<script async src="https://w.quidget.ai/quidget.loader.js" 
    data-id="34c4fda9-45f5-1111-af3d-6fbe0fe2222d"></script>
</body>
</html>
"""

webView.loadDataWithBaseURL(null, chatScript, "text/html", "UTF-8", null)

  3. Handle WebView Navigation (Optional):

    webView.webViewClient = WebViewClient()

🔗 Android WebView Documentation

🍏🔵 iOS Integration

  1. Add WKWebView:

    import WebKit

let webView = WKWebView(frame: view.bounds)
webView.configuration.preferences.javaScriptEnabled = true
view.addSubview(webView)

  2. Load Quidget Chat Script:

    let htmlString = """
<html>
<head></head>
<body>
	<script async src="https://w.quidget.ai/quidget.loader.js" 
    data-id="34c4fda9-45f5-1111-af3d-6fbe0fe2222d"></script>
</body>
</html>
"""

webView.loadHTMLString(htmlString, baseURL: nil)

  3. Handle Navigation (Optional):

    webView.navigationDelegate = self

🔗 iOS WKWebView Documentation

✅ Final Steps

  • Replace the data-id with your unique Quidget ID.
  • Test the WebView in different screen sizes and devices.
  • Optimize for performance (e.g., caching, lazy loading).

Need help? Contact our support team at [email protected] — we’ve got your back! ✨

Now your app is ready to connect with users in real-time! 🚀