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

Our objective with this is to encourage more UI customization within your app while using our Alchemer Mobile 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 Alchemer Mobile interaction UIs.

Note about WCAG / ADA Accessibility Compliance

Alchemer Mobile's Out-of-Box UI theme for iOS SDK 6.0 is WCAG 2.0 AA and WCAG 2.1 compliant. Alchemer Mobile 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 Alchemer Mobile 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.

Alchemer Mobile Rating Dialog Alchemer Mobile Message Center

Alchemer Mobile Love Dialog Alchemer Mobile Note

Alchemer Mobile Survey Home Screen ( No interaction)

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.

Alchemer Mobile Rating DialogAlchemer Mobile Message Center

Alchemer Mobile Love DialogAlchemer Mobile NoteAlchemer Mobile SurveyHomepage (No interaction)

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.

Alchemer Mobile Rating DialogAlchemer Mobile Message CenterAlchemer Mobile Love DialogAlchemer Mobile NotesAlchemer Mobile SurveysHomepage (No interaction)