DEV Community

Cover image for Collect Feedback with Canny.io - #30DaysOfSwift
Vaibhav Dwivedi
Vaibhav Dwivedi

Posted on • Edited on

Collect Feedback with Canny.io - #30DaysOfSwift

Day 7: Stay in the Loop with Canny.io! ๐Ÿ”„

In the seventh post of #30DaysOfSwift series, I am sharing about Canny.ioโ€”a great tool for collecting user feedback and tracking feature requests.

Hereโ€™s how you can easily add Canny.io to your app:

Steps to Integrate Canny.io:

1. Set Up Your Canny.io Account:

  • If you havenโ€™t already, sign up at Canny.io and create a new board for your app to track feedback.
  • Go to Settings > Installation and copy the Board ID youโ€™ll need to integrate Canny.
  • Open Canny in a WebView: Since Canny operates as a web-based service, weโ€™ll add a simple WebView to your SwiftUI app to open the feedback form.

import SwiftUI
import WebKit

struct CannyView: UIViewRepresentable {
    let urlString: String

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

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

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Got feedback? Weโ€™d love to hear it!")
                    .padding()

                Button("Submit Feedback") {
                    // Open the Canny feedback form
                    openCannyForm()
                }
                .padding()
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(10)
            }
        }
    }

    func openCannyForm() {
        if let window = UIApplication.shared.windows.first {
            let rootView = CannyView(urlString: "https://yourapp.canny.io/feedback") // Replace with your Canny feedback URL
            window.rootViewController = UIHostingController(rootView: rootView)
            window.makeKeyAndVisible()
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

3. Customize Your Feedback Form:

  • Replace "https://yourapp.canny.io/feedback" with the actual URL of your Canny feedback board.
  • You can also add parameters like userID and email to pre-fill information for users who are logged in.

Happy Coding!

Top comments (0)