Getting Started

In order to display any of the UI components and access chat data, you must first initialize the SDK and log in as a chat user.

Step 1. Initialization

In your Application class, call BotStacksChat.shared.setup with your API key. You can obtain your API key from the Botstacks Dashboard. If you don’t yet have one, you can create one for FREE!

If you don’t have an Application class, create one.

class App : Application() {

    override fun onCreate() {
        super.onCreate()
+       BotStacksChat.shared.setup(
+           context = this,
+           apiKey = "your-api-key"
+       )
    }
}

Note, you can optionally delay load and later call BotStacksChat.shared.load to load BotStacks in whatever load sequence you wish.

If you’d like Giphy support in your chats, send your Giphy API key during setup.

BotStacksChat.shared.setup(
    context = this,
    apiKey = "your_botstacks_api_key",
    giphyApiKey = "your_giphy_api_key"
)

Step 2. Logging in

Nearly all functionality is within the context of a chat user. That said, you must first be logged in as a chat user in order to appropriately display the UI components.

To log in, call the login function prior to displaying any UI components. Below is an example of how to accomplish this.

val composeScope = rememberCoroutineScope()
composeScope.launch {
    BotStacksChat.shared.login(
        "user-identifier",
        "username"
    ) // optionally pass displayName and picture
    if (BotStacksChat.shared.isUserLoggedIn) {
        // handle logged in state change
    }
}

Step 3. Render the UI

The BotStacks UI Kit uses Jetpack Compose. You can add it to any NavHost by rendering inside an BotStacksThemeEngine and adding the BotStacksChatController. Customization controls for the Theme Engine are described below.

BotStacksThemeEngine {
    NavHost(navController = navController, startDestination = "splash") {
        val openChat = {
            navController.navigate("chats")
        }
        composable("splash") {
            Splash(openChat = openChat, openLogin = {
                navController.navigate("login")
            })
        }
        composable("login") {
            Login(openChat)
        }

        composable("chats") {
           BotStacksChatController(onLogout = { navController.navigate("login") })
        }
    }
}

Step 4. Push Notifications (Firebase Cloud Messaging)

For push notifications via FCM, just pass your push token to BotStacks

BotStacksChat.registerFCMToken(token)