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 implementation manager.
Updated 7 months ago