Getting Started

The LikeMinds Flutter Chat SDK provides a wrapper layer around the built-in functionalities to provide a seamless integration experience within a single sitting without much configuration needed out of the box.

Although we do provide a high level customisation of all the widgets, screens, and flows being used to power the experience that can be tuned according to the look and feel of your existing apps.

Prerequisites

Before getting started, ensure you have:

1. An API key generated from the LikeMinds Admin Dashboard
2. Flutter Version: Your Flutter version should be 3.19.0 or higher.
3. The likeminds_chat_flutter_core dependency, which can be found here

Step-by-Step Integration Guide

Follow these steps to integrate the LikeMinds Chat SDK into your Flutter application:

Step 1 - Installation

Open the terminal, and run the following command in your Flutter project's directory.

flutter pub add likeminds_chat_flutter_core

Step 2 - Setup LikeMinds Chat

After adding the SDK, initialize LikeMinds Chat in your application using the initialize() method. This should typically be done during app startup.

Here are the parameters available for configuration:

VARIABLE	TYPE	DESCRIPTION	OPTIONAL
domain	String	The domain associated with your LikeMinds Chat instance.	✔
config	LMChatConfig	Configuration options for customizing chat behavior.	✔
theme	LMChatThemeData	Theming options for LikeMinds Chat UI (e.g., colors, typography).	✔
lmChatCallback	LMChatCoreCallback	Callback interface to receive SDK events such as success, failure, or updates.	✔
excludedConversationStates	List<ConversationState>	List of conversation states to exclude from the chatroom UI.	✔
analyticsListener	Function(LMChatAnalyticsEventFired)	Callback function triggered when an analytics event is fired from the SDK.	✔
profileListener	Function(LMChatProfileState)	Callback function to receive profile updates of the current user.	✔
loggingRequest	LMInitiateLoggerRequest	Optional object to initialize custom logging. If not provided, a default logger is used. Includes coreVersion internally and should not be set manually.	✔

Example usage:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // Create a configuration object for LikeMinds Chat
  final LMChatConfig config = LMChatConfig(
    enablePushNotifications: false,
    deviceId: null,
    shareLogsWithLM: true,
  );

  // Set up the theme if needed
  final LMChatThemeData theme = LMChatThemeData.light();

  // Optional callback interface (null if not used)
  final LMChatCoreCallback? lmChatCallback = null;

  // Optional list of excluded conversation states
  final List<ConversationState> excludedConversationStates = [];

  // Initialize the LikeMinds Chat SDK
  await LMChatCore.instance.initialize(
    domain: "ENTER YOUR DOMAIN NAME",
    config: config,
    theme: theme,
    lmChatCallback: lmChatCallback,
    excludedConversationStates: excludedConversationStates,
    analyticsListener: null,
    profileListener: null,
    loggingRequest: null,
  );
  ...
  runApp(YourApp());
}

Step 3 - Initiate User Session

You provide the API Key directly to the LikeMinds Chat SDK, which will be used to initiate a user session by calling showChatWithApiKey() method from LMChatCore.

// initiate user session, use the response to check for any errors
 LMResponse<void> response = await LMChatCore.instance.showChatWithApiKey(
  apiKey : "YOUR_API_KEY",
  uuid : "USER_ID",
  userName : "USER_NAME",
);

tip

For enhanced security, you can use Server Side User Authentication to initiate user sessions through your own server.

Step 4 - Navigation to Chat

Community Chat

On successful response of the above snippet, navigate to the LMCommunityChatScreen and start using Chat in your app.

if (response.success) {
  MaterialPageRoute route = MaterialPageRoute(
    builder: (context) => const LMCommunityChatScreen(),
  );

  Navigator.pushReplacement(context, route);
}

Networking Chat

On successful response of the above snippet, navigate to the LMNetworkingChatScreen and start using Chat in your app.

if (response.success) {
  MaterialPageRoute route = MaterialPageRoute(
    builder: (context) => const LMNetworkingChatScreen(),
  );

  Navigator.pushReplacement(context, route);
}

info

1. By default, only Members to Community Managers and vice versa direct messages are allowed. To enable direct messages for all Members, enable Members can DM other members from LikeMinds Dashboard's Chat Setting Section.
2. If you want Members to engage with each other, without sending a request. disable DM requests need approval from LikeMinds Dashboard's Chat Setting Section.

Community Hybrid Chat

On successful response of the above snippet, navigate to the LMCommunityHybridChatScreen and start using Chat in your app.

if (response.success) {
  MaterialPageRoute route = MaterialPageRoute(
    builder: (context) => const LMCommunityHybridChatScreen(),
  );

  Navigator.pushReplacement(context, route);
}

info

1. By default, only Members to Community Managers and vice versa direct messages are allowed. To enable direct messages for all Members, enable Members can DM other members from LikeMinds Dashboard's Chat Setting Section.
2. If you want Members to engage with each other, without sending a request. disable DM requests need approval from LikeMinds Dashboard's Chat Setting Section.

That's it! You have successfully integrated the LikeMinds Chat SDK into your Flutter application. The next step would be to explore additional customization options or configurations provided by the SDK to tailor the chat to your application's needs.

Step 5 - Add Chatbot Button to your Screen (Optional)

note

Add AI Assitant to LikeMinds: Follow this tutorial to add Assistant to LikeMinds Dashboard, before proceeding with this step.

Add the LMChatAIButton to your app's UI by placing it in the desired location within your app's widget tree. Ideally, a Floating Action Button (FAB) is the best place to put it.

Pass the required props to the LMChatAIButton widget. A more detailed guide on the props can be found here. A sample is given below:

LMChatAIButton(
  props: LMChatAIButtonProps(
    apiKey: 'your-api-key',
    uuid: 'user-unique-id',
    userName: 'John Doe',
  ),
);

Now, whenever the button is pressed, the entire chat experience will be initialised with the provided props. A fresh chatroom (if not already present) will be created with the user's details. And the chatbot will be ready to take the user's queries.`