This article will share some custom designs and examples of how to translate them into Apptentive interactions.

Our objective with this is to encourage more UI customization within your app while using our Apptentive SDK!

We are hoping this might also inspire some new UI within your app and break down some of the barriers to implementing some more complicated Apptentive interaction UIs.

Note about WCAG / ADA Accessibility Compliance

Apptentive’s Out-of-Box UI theme for iOS SDK 6.0 is WCAG 2.0 AA and WCAG 2.1 compliant. Apptentive cannot guarantee compliance for customized UI themes. If you customize any UI elements in our iOS SDK 6.0, please use https://webaim.org/resources/contrastchecker/ to confirm that your text colors, selector colors, and icon colors meet or exceed WCAG 2.0 AA and WCAG 2.1 minimum contrast levels.

Overview

We have 3 app styles with Apptentive interactions custom-tailored to fit that app’s specific theme.

We’ll split up each design by interaction type and provide code snippets for each.

Reminder

Refer to our iOS customization docs which will walk you through how to configure custom interactions if you’re having trouble implementing the code snippets provided for these themes.

Design 1

This design is created in a generic “streaming app” style.

The images below show:

• Home screen (no Apptentive interactions)
• Apptentive Love Dialog
• Apptentive Note
• Apptentive Survey
• Apptentive Message Center

This design highlights custom UI configurations like:

• All Interactions
  • Gradient button backgrounds
  • Rounded buttons
• Survey
  • Gradient header and footer survey background
  • Text box outline color and text color as well as font
  • Gradient divider between questions
  • Segmented control selected/unselected color as well as range text font

Design 2

This design is created in a generic “banking app” style.

The images below show:

• Home screen (no Apptentive interactions)
• Apptentive Love Dialog
• Apptentive Note
• Apptentive Survey
• Apptentive Message Center

This design highlights custom UI configurations like:

• Love Dialog
  • Header image
  • Separator line colors
  • Rectangle buttons
• Notes
  • Small header image
• Survey
  • Custom Navigation Bar background
  • Small header within the Navigation Bar
  • Rounded submit button with border color

Design 3

This design is created in a generic “food service app” style.

The images below show:

• Home screen (no Apptentive interactions)
• Apptentive Love Dialog
• Apptentive Note
• Apptentive Survey
• Apptentive Message Center

This design highlights custom UI configurations like:

• Large header image for notes and love dialog