UI Customization

Overview

The MetaMap SDK provides several customization options through the metadata parameter in the showMetaMapFlow method. You can customize button colors, fonts, language, and more.

Metadata Parameter

All customization options are passed as key-value pairs in the metadata dictionary:

Swift
Objective-C

MetaMap.shared.showMetaMapFlow(
    clientId: "YOUR_CLIENT_ID",
    flowId: "YOUR_FLOW_ID",
    metadata: [
        "buttonColor": "#FF5733",
        "buttonTextColor": "#FFFFFF",
        "fixedLanguage": "es",
        "regularFont": "Roboto-Regular.ttf",
        "boldFont": "Roboto-Bold.ttf"
    ]
)

[MetaMap.shared showMetaMapFlowWithClientId:@"YOUR_CLIENT_ID" 
                                     flowId:@"YOUR_FLOW_ID" 
                                   metadata:@{
                                       @"buttonColor": @"#FF5733",
                                       @"buttonTextColor": @"#FFFFFF",
                                       @"fixedLanguage": @"es",
                                       @"regularFont": @"Roboto-Regular.ttf",
                                       @"boldFont": @"Roboto-Bold.ttf"
                                   }];

Color Customization

Button Color

Customize the main button background color using hex color format:

Swift
Objective-C

metadata: ["buttonColor": "#FF5733"]

metadata:@{@"buttonColor": @"#FF5733"}

Default: White (#FFFFFF) Format: Hex color code (e.g., #FF5733, #00A86B)

Button Text Color

Customize the button title color using hex color format:

Swift
Objective-C

metadata: ["buttonTextColor": "#FFFFFF"]

metadata:@{@"buttonTextColor": @"#FFFFFF"}

Default: Black (#000000) Format: Hex color code (e.g., #FFFFFF, #333333)

Example: Complete Color Customization

Swift
Objective-C

// Blue button with white text
MetaMap.shared.showMetaMapFlow(
    clientId: "YOUR_CLIENT_ID",
    flowId: "YOUR_FLOW_ID",
    metadata: [
        "buttonColor": "#007AFF",
        "buttonTextColor": "#FFFFFF"
    ]
)

// Blue button with white text
[MetaMap.shared showMetaMapFlowWithClientId:@"YOUR_CLIENT_ID" 
                                     flowId:@"YOUR_FLOW_ID" 
                                   metadata:@{
                                       @"buttonColor": @"#007AFF",
                                       @"buttonTextColor": @"#FFFFFF"
                                   }];

Language Customization

Fixed Language

Set a specific language for the SDK interface:

Swift
Objective-C

metadata: ["fixedLanguage": "es"]

metadata:@{@"fixedLanguage": @"es"}

Default: English ("en") Supported Languages:

Code	Language
`en`	English
`es`	Spanish
`fr`	French
`pt`	Portuguese
`ru`	Russian
`tr`	Turkish
`de`	German
`it`	Italian
`pl`	Polish
`th`	Thai

Example: Spanish Interface

Swift
Objective-C

MetaMap.shared.showMetaMapFlow(
    clientId: "YOUR_CLIENT_ID",
    flowId: "YOUR_FLOW_ID",
    metadata: ["fixedLanguage": "es"]
)

[MetaMap.shared showMetaMapFlowWithClientId:@"YOUR_CLIENT_ID" 
                                     flowId:@"YOUR_FLOW_ID" 
                                   metadata:@{@"fixedLanguage": @"es"}];

Font Customization

Custom Fonts

You can customize both regular and bold fonts used throughout the SDK interface:

Swift
Objective-C

metadata: [
    "regularFont": "REGULAR_FONT_NAME.ttf",
    "boldFont": "BOLD_FONT_NAME.ttf"
]

metadata:@{
    @"regularFont": @"REGULAR_FONT_NAME.ttf",
    @"boldFont": @"BOLD_FONT_NAME.ttf"
}

Important: Your project must include these font files, otherwise the SDK will use default system fonts.

Adding Custom Fonts to Your Project

Add the .ttf or .otf font files to your Xcode project
Ensure the fonts are included in your app target
Add the font names to your Info.plist:

<key>UIAppFonts</key>
<array>
    <string>Roboto-Regular.ttf</string>
    <string>Roboto-Bold.ttf</string>
</array>

Example: Custom Font Implementation

Swift
Objective-C

MetaMap.shared.showMetaMapFlow(
    clientId: "YOUR_CLIENT_ID",
    flowId: "YOUR_FLOW_ID",
    metadata: [
        "regularFont": "Roboto-Regular.ttf",
        "boldFont": "Roboto-Bold.ttf"
    ]
)

[MetaMap.shared showMetaMapFlowWithClientId:@"YOUR_CLIENT_ID" 
                                     flowId:@"YOUR_FLOW_ID" 
                                   metadata:@{
                                       @"regularFont": @"Roboto-Regular.ttf",
                                       @"boldFont": @"Roboto-Bold.ttf"
                                   }];

Additional Metadata Options

Identity ID (Re-verification)

Pass an existing identity ID to update or re-verify a user:

Swift
Objective-C

metadata: ["identityId": "existing-identity-id"]

metadata:@{@"identityId": @"existing-identity-id"}

Encryption Configuration ID

Enable data encryption by providing an encryption configuration ID:

Swift
Objective-C

metadata: ["encryptionConfigurationId": "your-encryption-config-id"]

metadata:@{@"encryptionConfigurationId": @"your-encryption-config-id"}

Custom Key-Value Pairs

You can also pass custom metadata that will be associated with the verification:

Swift
Objective-C

metadata: [
    "key1": "value1",
    "key2": 123,
    "userId": "user-12345",
    "source": "mobile-app"
]

metadata:@{
    @"key1": @"value1",
    @"key2": @123,
    @"userId": @"user-12345",
    @"source": @"mobile-app"
}

Complete Customization Example

Here’s a comprehensive example combining multiple customization options:

Swift
Objective-C

import UIKit
import MetaMapSDK

class ViewController: UIViewController {
    @objc private func metaMapButtonAction() {
        MetaMap.shared.showMetaMapFlow(
            clientId: "YOUR_CLIENT_ID",
            flowId: "YOUR_FLOW_ID",
            metadata: [
                // Color customization
                "buttonColor": "#007AFF",
                "buttonTextColor": "#FFFFFF",
                
                // Language
                "fixedLanguage": "es",
                
                // Custom fonts
                "regularFont": "Roboto-Regular.ttf",
                "boldFont": "Roboto-Bold.ttf",
                
                // Custom metadata
                "userId": "user-12345",
                "source": "ios-app",
                "environment": "production"
            ]
        )
    }
}

#import "ViewController.h"
#import <MetaMapSDK/MetaMapSDK.h>

@implementation ViewController

-(void)metaMapButtonAction:(UIButton *)sender {
    [MetaMap.shared showMetaMapFlowWithClientId:@"YOUR_CLIENT_ID" 
                                         flowId:@"YOUR_FLOW_ID" 
                                       metadata:@{
                                           // Color customization
                                           @"buttonColor": @"#007AFF",
                                           @"buttonTextColor": @"#FFFFFF",
                                           
                                           // Language
                                           @"fixedLanguage": @"es",
                                           
                                           // Custom fonts
                                           @"regularFont": @"Roboto-Regular.ttf",
                                           @"boldFont": @"Roboto-Bold.ttf",
                                           
                                           // Custom metadata
                                           @"userId": @"user-12345",
                                           @"source": @"ios-app",
                                           @"environment": @"production"
                                       }];
}

@end

Metadata Parameters Reference

Parameter	Type	Description	Default
`buttonColor`	String	Button background color (hex)	`#FFFFFF`
`buttonTextColor`	String	Button text color (hex)	`#000000`
`fixedLanguage`	String	SDK interface language	`en`
`regularFont`	String	Regular font filename	System font
`boldFont`	String	Bold font filename	System font
`identityId`	String	Existing identity ID for re-verification	-
`encryptionConfigurationId`	String	Encryption configuration ID	-

Best Practices

Color Contrast: Ensure sufficient contrast between button color and text color for accessibility
Font Files: Always test custom fonts on device to ensure they load correctly
Language Selection: Choose the appropriate language based on user preferences or device locale
Metadata Size: Keep custom metadata reasonable in size and avoid sensitive information
Hex Colors: Always use the # prefix for hex color codes

Next Steps

See UIKit Integration for Swift implementation
See SwiftUI Integration for SwiftUI implementation
See Objective-C Integration for Objective-C implementation

Get Started

Core Concepts

Verification Types

UI Integration

Advanced

Resources

Overview

Metadata Parameter

Color Customization

Button Color

Button Text Color

Example: Complete Color Customization

Language Customization

Fixed Language

Example: Spanish Interface

Font Customization

Custom Fonts

Adding Custom Fonts to Your Project

Example: Custom Font Implementation

Additional Metadata Options

Identity ID (Re-verification)

Encryption Configuration ID

Custom Key-Value Pairs

Complete Customization Example

Metadata Parameters Reference

Best Practices

Next Steps

Build docs developers (and LLMs) love

Get Started

Core Concepts

Verification Types

UI Integration

Advanced

Resources

​Overview

​Metadata Parameter

​Color Customization

​Button Color

​Button Text Color

​Example: Complete Color Customization

​Language Customization

​Fixed Language

​Example: Spanish Interface

​Font Customization

​Custom Fonts

​Adding Custom Fonts to Your Project

​Example: Custom Font Implementation

​Additional Metadata Options

​Identity ID (Re-verification)

​Encryption Configuration ID

​Custom Key-Value Pairs

​Complete Customization Example

​Metadata Parameters Reference

​Best Practices

​Next Steps

Build docs developers (and LLMs) love

Overview

Metadata Parameter

Color Customization

Button Color

Button Text Color

Example: Complete Color Customization

Language Customization

Fixed Language

Example: Spanish Interface

Font Customization

Custom Fonts

Adding Custom Fonts to Your Project

Example: Custom Font Implementation

Additional Metadata Options

Identity ID (Re-verification)

Encryption Configuration ID

Custom Key-Value Pairs

Complete Customization Example

Metadata Parameters Reference

Best Practices

Next Steps