Add Chatwith to iOS or React Native with a WebView

Add Chatwith to iOS or React Native with a WebView

You can add a Chatwith Agent to a React Native or native iOS app by loading its shareable link inside a WebView.

Copy the agent link

  1. Select the agent in the Chatwith dashboard.
  1. Open Installation, then choose Website Widget.
  1. Open the shareable-link option and copy the agent URL.
  1. Test the URL in a private browser window before adding it to your app.

React Native

Install the community WebView package:
npm install react-native-webview
Load the copied Chatwith URL in the WebView component:
import { WebView } from 'react-native-webview'

export function SupportAgent() {
  return (
    <WebView
      source={{ uri: 'YOUR_CHATWITH_AGENT_URL' }}
      javaScriptEnabled
      domStorageEnabled
      startInLoadingState
    />
  )
}
For a full-screen agent, make sure the parent view has flex: 1. Follow the react-native-webview installation instructions for any native setup required by your React Native version.

Native iOS with SwiftUI

Use WKWebView from WebKit to load the same shareable link:
import SwiftUI
import WebKit

struct ChatwithAgentView: UIViewRepresentable {
    let url: URL

    func makeUIView(context: Context) -> WKWebView {
        WKWebView()
    }

    func updateUIView(_ webView: WKWebView, context: Context) {
        webView.load(URLRequest(url: url))
    }
}

struct SupportView: View {
    var body: some View {
        ChatwithAgentView(
            url: URL(string: "YOUR_CHATWITH_AGENT_URL")!
        )
        .ignoresSafeArea()
    }
}

Native iOS with UIKit

Create a WKWebView, add it to the view hierarchy, constrain it to the safe area or screen edges, and load a URLRequest using the copied Chatwith URL.
💡
A WebView loads the hosted Chatwith experience using the same shareable link that opens in a browser.

Troubleshooting

  • Blank screen: confirm the device has internet access and the copied link opens in Safari or Chrome.
  • Incorrect height: give the WebView and its parent a full-height layout.
  • Links open inside the agent: intercept navigation events if you want external links to open in the system browser.
  • Custom domain: use the custom-domain share link if it is enabled for the agent.

Related guides