Exploring WishKit: Creating Your First Wish! ✨

Capture and analyse product feedback and feature requests in one place.

Photo by Caspar Camille Rubin on Unsplash

When I was working on the Gradient Game, I used to get a lot of feedback and product requests via mail. I usually got overwhelmed and never got to work on them, and unfortunately not capitalise on it either. I want to change that with my newest app, Fusion.

Fortunately, I stumbled upon Martin’s WishKit! It helps to capture and analyse product feedback and feature requests in one place. And that’s what I want!

I have already implemented more than a few in the app and have a lot of happy TestFlight users! I am improving and customising the UI of the WishKit screen, so I wanted to pen down my experience using it in my app! In this article, I walk you through getting started with WishKit and configuring it to fit your app’s needs.

Introduction

WishKit lets you easily add feature request functionality to your app, allowing users to suggest and vote on new features. This is what my current screen looks like for using the framework in my app:

Adding WishKit as a Dependency

The first step in getting started with WishKit is to add it as a dependency in Xcode. When managing via Swift Package Manager, add WishKit as a dependency by adding it to the dependencies value of your Package.swift:

dependencies: [
 .package(url: “https://github.com/wishkit/wishkit-ios.git", .upToNextMajor(from: “4.0.0”))
]

Configuring WishKit with your API Key

Once you have added WishKit as a dependency, you must configure it with your API Key. You can find your API Key in your admin dashboard on wishkit.io. In the first view of your app, add the following code to configure WishKit with your API Key:

@main
struct FusionApp: App {

  init() {
    WishKit.configure(with: "<#App-API-Key#>")
  }

  var body: some Scene {
    WindowGroup {
      // Your app's content here
    }
  }
}

Using WishKit in Your Views

Now that you have configured WishKit, you can use it in any of your views. Simply import the WishKit framework and use WishKit.view. This is how I am using it in my app:

struct SettingsView: View {
    var body: some View {
      NavigationStack {
        List {
          Section("Make a Wish! ✨") {
            NavigationLink(destination: WishKit.view, label: {
              Label("Request feature", systemImage: "wand.and.stars")
            })
          }
        }
      }
    }
}

Note: If one of the parent views does not have a NavigationView/NavigationStack, you must call withNavigation() on WishKit.view.

Configuring WishKit UI Elements

WishKit provides several configuration options to customise its UI elements. You can configure options such as the status badge, description display, segmented control, drop shadow, comment section, and more. Here is an example of how I am using some of these options:

// Show the status badge of a feature request (e.g. pending, approved, etc.).
WishKit.config.statusBadge = .show

// Shows full description of a feature request in the list.
WishKit.config.expandDescriptionInList = true

// Remove drop shadow.
WishKit.config.dropShadow = .hide

// Change the corner radius.
WishKit.config.cornerRadius = 12

Feel free to experiment with other configuration options WishKit provides to further customise the UI elements according to your app’s needs. Explore the static property config to know more about them.

Theming WishKit

You can also theme WishKit to match your app’s colour scheme. Another example of how I am theming the view for my app:

// Set the primary color for WishKit theme
WishKit.theme.primaryColor = .primary

// Set the text color for the Add button
WishKit.config.buttons.addButton.textColor = .set(light: .white, dark: .black)

// Set the text color for the Save button
WishKit.config.buttons.saveButton.textColor = .set(light: .white, dark: .black)

By setting the primary colour for the WishKit theme, I customise the overall colour scheme of WishKit to match my app’s primary colour.

Additionally, by setting the text colour for the Add and Save buttons, I ensure that the text is visible and readable against the background colour of the buttons. Similarly, you can also update the colour of the upvote button.

Feel free to adjust these colours according to your app’s design and colour scheme.

Conclusion

With WishKit, I can easily add feature request functionality to my app and engage with the users.

I hope this small introduction will encourage you to use it in your app, too! Make sure you actually work on the feedback gathered from your users and iterate on your app’s features. Share your experience with WishKit and tag Martin on X (formerly Twitter). Happy coding!