App UI Customization

Integrations guide

Setup

This page sets out how to customize your App Drop-in UI to match the look and feel of your brand by creating an OrcaFlavor object:

  • Specify the colors
  • Set the fonts
  • Localize the text
  • Style the layout

The following is a complete example for Android and iOS:

import com.fourthline.networking.NetworkEnvironment.Sandbox import com.fourthline.orca.core.flavor.OrcaFlavor import com.fourthline.orca.core.flavor.OrcaFonts import com.fourthline.orca.Orca import com.fourthline.orca.workflow.WorkflowConfig import com.fourthline.orca.workflow.WorkflowCustomizationConfig import com.fourthline.orca.workflow.workflow // generated by calling POST https://{{baseUrl}}/v1/workflows/{{workflowId}}/validationcode val validationCode: String // choose `Mock` to test Workflow locally or `Sandbox`/`Production` to test networking val config = WorkflowConfig(networkEnvironment = Sandbox) val customFlavor = OrcaFlavor( fonts = OrcaFonts( screenHeader = OrcaFonts.Font.FromFontRes(fontRes = R.font.roboto_medium, size = 20), primaryButton = OrcaFonts.Font.FromFile(file = File(...), size = 18 ), ) val customisationConfig = WorkflowCustomizationConfig(flavor = customFlavor) Orca.workflow(context, validationCode) .configure(config) .customize(customisationConfig) .present { result -> }
import FourthlineSDK override func viewDidLoad() { super.viewDidLoad() var flavor = OrcaFlavor() // Configure the colors var palette = OrcaPalette() palette.primary = UIColor(red: 82.0 / 255.0, green: 30.0 / 255.0, blue: 135.0 / 255.0, alpha: 1) var colors = OrcaColors(colorPalette: palette) colors.hint.backgroundColor = UIColor(red: 221.0 / 255.0, green: 210.0 / 255.0, blue: 232.0 / 255.0, alpha: 0.5) colors.box.borderColor = UIColor.gray colors.screen.tableCells.cellStyle2.iconColor = UIColor(red: 221.0 / 255.0, green: 210.0 / 255.0, blue: 3.0 / 255.0, alpha: 1) flavor.colors = colors let customization = WorkflowCustomizationConfig(flavor: flavor) let configuration = WorkflowConfig( networkEnvironment: .mock // choose .mock to test Workflow locally or .sandbox/.production to test networking ) let validationCode = "xxxxxxxx" // generated by calling POST https://{{baseUrl}}/v1/workflows/{{workflowId}}/validationcode Orca.workflow(validationCode: validationCode) .configure(with: configuration) .customize(with: customization) .present { [weak self] result in switch result { case let .failure(error): self?.handleError(error) case .success: // User has successfully finished the workflow. break } } }

Support
For support or any questions, contact your Fourthline delivery manager.

Top of page