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 implementation manager.

Top of page