Customizing Survey Appearance

The survey UI is fully customizable and can be tailored to fit the design of your app. Since the current implementation uses WKWebViews to present surveys, only some parts of what is visible to the user can be customized by the app developer using the SDK. Other parts of the survey must be customized by the InMoment Graphics Team using HTML, CSS, and Javascript.

Customization Matrix:

App Developer:	InMoment Graphics Team:
Modal presentation style	Company logo
Modal transition style	Page header and footer
Navigation bar colors	Page background colors and images
Navigation bar fonts	Prompt fonts and colors
Progress bar colors	Rating prompt images
Navigation bar title	Next/previous button fonts and colors
Additional custom navigation bar items	Next/previous button images
Navigation bar title	Next/previous button look and feel
Much more…	Much more…

Customizing Survey Appearance using the SDK

Using your app’s FeedbackManagerDelegate, make changes to a Survey‘s appearance before it is presented:

extension ViewController: FeedbackManagerDelegate {

    func feedbackManager(willPresent survey: Survey, _ animated: Bool) {

        // Makes the survey slide up from the bottom of the screen when appearing
        survey.modalTransitionStyle = .coverVertical

        // Makes the survey appear in the middle of the screen on iPad devices
        survey.modalPresentationStyle = .formSheet 

        // It's important to set these properties on the navigation controller, if present
        survey.navigationController?.modalTransitionStyle = .coverVertical
        survey.navigationController?.modalPresentationStyle = .pageSheet

        // Makes the navigation bar's 'style' be darker and glassy
        survey.navigationController?.navigationBar.barStyle = .darkTranslucent

        // Makes the navigation bar's buttons and text appear yellow instead of the default blue
        survey.navigationController?.navigationBar.tintColor = .yellow

        // Makes the navigation bar's background color appear as a darker gray
        survey.navigationController?.navigationBar.barTintColor = .darkGray

        // Makes the progress view's filled-in part appear red
        survey.progressView?.barTintColor = .red

        // Adds a custom bar button item to the right side of the navigation bar
        survey.navigationItem?.setRightNavigationBarItems(items, animated: animated)

    }

}

For a complete list of customization points and their descriptions, take a look at the reference documentation for NavigableSurvey and InteractiveSurvey.

Next Steps

Reacting to Lifecycle Events