Adding Quack AI to your Swift app

This is a simple guide to adding the Quack AI Chatbot to your iOS/Swift app. Broadly, all we need to do is display a WebView pointing to your custom company URL where you want the chatbot to appear.

Step 1:

Make sure you have the WebKit framework installed. If not, here's how you do it:

  • In Xcode, click on your project in the Project Navigator.

  • Select your app's target.

  • In the tab bar, click on General.

  • Scroll down to the Frameworks, Libraries, and Embedded Content section.

  • Click the + button and search for WebKit.framework. Add it to your project.

Step 2:

Set up your WebView. You can do this many ways, but here's an example of creating a UIViewRepresentable wrapper for WKWebView:

struct WebView: UIViewRepresentable {
    let urlString: String

    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        return webView
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        if let url = URL(string: urlString) {
            let request = URLRequest(url: url)
            uiView.load(request)
        }
    }
}

Step 3:

Display the WebView where you want your chatbot interface to appear, and point it to your URL. Here's an example of displaying the chatbot in a drawer that slides up when you tap a button:

struct ContentView: View {
    @State private var showWebView = false

    var body: some View {
        NavigationView {
            Button("Open Google") {
                showWebView = true
            }
            .sheet(isPresented: $showWebView) {
                WebView(urlString: "https://m.thequack.ai/sdk/<YOUR_TOKEN>")
            }
        }
    }
}

That's it. You're done!

Step 4 (Optional):

If you want to pass in user ID and metadata, simply add them on as URL params, like so:

WebView(urlString: "https://m.thequack.ai/sdk/<YOUR_TOKEN>?userId=123&name=bob&type=9")

This metadata will be saved along with each conversation. User ID is what unique identifies a user and allows conversation history to be saved across sessions.

Step 5 (Optional):

If you want to enable authentication for your users, you may pass in your authentication signature and epoch via the HTTP Headers. See here for more info.

Push Notifications

To set up push notifications, you should follow these steps:

Step 1:

Securely share your Apple key id, bundle id, and .p8 certificate with your Quack Account Manager.

Step 2:

Pass in the user's device token via metadata as ios_device_token. You should do this as specified above, like:

WebView(urlString: "https://m.thequack.ai/sdk/<YOUR_TOKEN>?ios_device_token=...")

And you're all set! Push notifications will now be sent to the user's device when new messages are sent when the user does not have the chat interface open.

Get Unread Messages Per User

To fetch the unread messages for a user (to display as a badge or indicator), we expose an external REST API that simple returns the total number of unread messages.

GET https://api.thequack.ai/external/num_unread_messages

Params:

  • token: Your company's unique API key

  • user_id: The ID of the user who's unread message count you'd like to look up

Example with curl:

curl -H "Content-Type: application/json" \
 "https://api.thequack.ai/external/num_unread_messages?token=<YOUR_API_KEY>&user_id=123456"

The response will be of the form:

{
    "count": 2 // An integer
}

Last updated