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()
)

AIAgentMessenger.attachLauncher(
    aiAgentId: "your_agent_id"
) { params in
    params.options = layoutOptions
}

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 paramsBuilder
AIAgentMessenger.attachLauncher(
    aiAgentId: "your_agent_id"
) { params in
    params.options = overlayOptions // or fullscreenOptions
}

Android

Steps to Customize the Launcher Layout

Step 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 (start, top, end, bottom)
location	Position on screen: TOP_START, TOP_END, BOTTOM_START, BOTTOM_END

Step 2: Example (Kotlin)

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

val launcherSettings = LauncherSettingsParams(
    layoutParams = layoutParams
)

// Pass this into your MessengerLauncher or relevant configuration

React

Steps to Customize the Launcher Layout

You can customize the FixedMessenger layout using FixedMessenger.Style.

Configuration Options

Property	Type	Description	Available Options
position	string	Position of the launcher button on screen	'start-top', 'start-bottom', 'end-top', 'end-bottom'
launcherSize	number	Size of the launcher button in pixels (width and height)	Any positive number (e.g., 32, 48, 56)
margin	object	Margins around the launcher	{ start, end, top, bottom } in pixels

Example

import { FixedMessenger } from '@sendbird/ai-agent-messenger-react';

function App() {
  return (
    <FixedMessenger>
      <FixedMessenger.Style
        position={'end-bottom'}
        launcherSize={56}
        margin={{ start: 16, end: 16, top: 16, bottom: 16 }}
      />
    </FixedMessenger>
  );
}

React Native

Steps to Customize the Launcher Layout

You can customize the FixedMessenger layout using FixedMessenger.Style and windowMode props.

Configuration Options

FixedMessenger Props:

Property	Type	Default	Description	Available Options
entryPoint	string	'Conversation'	Initial screen when launcher is clicked	'Conversation', 'ConversationList'
windowMode	string	'floating'	Display mode for the messenger window	'floating', 'fullscreen'
fullscreenInsets	object	{ top: 0, left: 0, right: 0, bottom: 0 }	Insets for fullscreen mode to handle safe areas	{ top?, left?, right?, bottom? } in pixels
edgeToEdgeEnabled	boolean	true	(Android only) Enable edge-to-edge display, bottom inset considered when keyboard opens	true, false

FixedMessenger.Style Properties:

Property	Type	Default	Description	Available Options
position	string	'end-bottom'	Position of the launcher button on screen	'start-top', 'start-bottom', 'end-top', 'end-bottom'
launcherSize	number	48	Size of the launcher button in pixels (width and height)	Any positive number (e.g., 32, 48, 56)
margin	object	{ top: 24, bottom: 24, start: 24, end: 24 }	Margins around the launcher	{ start?, end?, top?, bottom? } in pixels
spacing	number	12	Space between launcher and messenger window in pixels	Any positive number

Example

import { FixedMessenger } from '@sendbird/ai-agent-messenger-react-native';

function App() {
  return (
    <FixedMessenger windowMode={'floating'}>
      <FixedMessenger.Style
        position={'end-bottom'}
        launcherSize={56}
        margin={{ start: 20, end: 20, top: 20, bottom: 20 }}
        spacing={12}
      />
    </FixedMessenger>
  );
}

Reference

No response

Screenshots

No response