How to customize the MessengerLauncher layout

[elliot-choic]

Versions

Summary

You can customize the position, margin, and display mode of the MessengerLauncher

Guide & Snippet

iOS

Steps to Customize the Launcher Layout

You can customize the MessengerLauncher layout in iOS using SBALauncherOptions.

Basic Configuration

import SendbirdAIAgentMessenger

let layoutOptions = SBALauncherOptions(
    parentView: nil,
    entryPoint: .conversationList,
    layout: .init(
        position: .trailingBottom,
        margin: .init(
            leading: 16,
            trailing: 16,
            top: 16,
            bottom: 16
        ),
        useSafeArea: true
    ),
    displayStyle: .overlay()
)

let params = LauncherSettingsParams(
    options: layoutOptions
)

AIAgentMessenger.attachLauncher(
    aiAgentId: "your_agent_id",
    params: params
)

Configuration Options

Property	Type	Description	Values
position	LauncherPosition	Sets the launcher button position	.leadingTop, .trailingTop, .leadingBottom, .trailingBottom (default)
margin	LauncherAreaMargin	Sets margins around the launcher	Custom values or .default (16pt all sides)
useSafeArea	Bool	Whether to respect safe area constraints	true (default), false
entryPoint	SBAEntryPoint	Initial screen when launcher is tapped	.conversation (default), .conversationList
displayStyle	DisplayStyle	How the conversation view is presented	.overlay() (default), .fullscreen()

Display Style Options

Overlay Style

Property	Type	Description	Default	Notes
spacing	CGFloat	Spacing between launcher and conversation view	12	Distance in points
overlayLauncher	Bool	Whether to overlay the launcher button	false	When true, launcher stays visible over conversation

Fullscreen Style

Property	Type	Description	Default	Available Options
presentationStyle	UIModalPresentationStyle	Modal presentation style	.fullScreen	.fullScreen, .pageSheet, .formSheet, .overFullScreen
parentController	UIViewController?	Parent view controller	nil	Controller that presents the conversation view

Advanced Examples

// Overlay style with custom spacing and persistent launcher
let overlayOptions = SBALauncherOptions(
    layout: .init(
        position: .leadingTop,
        margin: .init(leading: 24, trailing: 16, top: 44, bottom: 16),
        useSafeArea: true
    ),
    displayStyle: .overlay(
        .init(
            spacing: 16,           // 16pt spacing between launcher and conversation
            overlayLauncher: true  // Keep launcher visible over conversation
        )
    )
)

// Fullscreen style with page sheet presentation
let fullscreenOptions = SBALauncherOptions(
    entryPoint: .conversation,
    displayStyle: .fullscreen(
        .init(
            presentationStyle: .pageSheet,  // Shows as a card-style modal
            parentController: self          // Present from current controller
        )
    )
)

// Usage with LauncherSettingsParams
let params = LauncherSettingsParams(
    options: overlayOptions // or fullscreenOptions
)

AIAgentMessenger.attachLauncher(
    aiAgentId: "your_agent_id",
    params: params
)

Android

Steps to Customize the Launcher Layout

1. Set Up LauncherLayoutParams

You can define the following parameters:

Parameter	Description
launchMode	Display mode: EXPANDED (full screen) or ANCHORED (popup near launcher)
margin	Margins around the launcher (left, top, right, bottom)
location	Position on screen: TOP_START, TOP_END, BOTTOM_START, BOTTOM_END

2. Example (Kotlin)

val layoutParams = LauncherLayoutParams(
    LaunchMode.ANCHORED,
    LauncherMargin(left = 12, top = 12, right = 12, bottom = 12),
    LauncherLocation.BOTTOM_END
)

val launcherSettings = LauncherSettingsParams(
    layoutParams = layoutParams
)

// Pass this into your MessengerLauncher or relevant configuration

JS

Header

• Description

   // code block

Reference

No response

Screenshots

No response