# π§ Intellicon Chat SDK Integration
## π Getting Started
To get started with the **Intellicon Chat SDK**, run the following command in your terminal:
```bash
flutter pub add intellicon_chat_sdk
π‘ Usage
Add the following code snippet to any button click event or wherever you want to initiate the chat:
Navigator.push<void>(
context,
MaterialPageRoute(
builder: (context) => Chat(
config: Config(
baseUrl: "https://your-api-url.com",
appId: "your-app-id",
history: History(show: true),
),
customData: const {"customerType": "normal"},
user: User(
participantId: "12345",
name: "Arham",
fcmToken: "your-fcm-token",
),
backgroundDecoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.red, Colors.orange],
),
),
appBarTitleStyle: const TextStyle(color: Colors.white),
appBarBgColor: Colors.transparent,
appBarGradientBgColor: const LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.red, Colors.orange],
),
appBarIconTheme: const IconThemeData(color: Colors.greenAccent),
appBarCenterTitle: true,
loaderColor: Colors.red,
attachmentModalBgColor: Colors.brown,
feedBackContainerDecoration: const BoxDecoration(color: Colors.white),
feedBackActiveColor: Colors.red,
feedBackInActiveColor: Colors.red,
feedbackTextActiveColor: Colors.blue,
feedbackTextInActiveColor: Colors.grey,
emojiIconColor: Colors.black,
attachmentIconColor: Colors.black,
micInActiveIconColor: Colors.white,
micActiveIconColor: Colors.brown,
micSendBgColor: Colors.greenAccent,
sendIconColor: Colors.black,
dateBoxDecoration: BoxDecoration(
border: Border.all(
color: Colors.blueAccent,
width: 2.0,
style: BorderStyle.solid,
strokeAlign: BorderSide.strokeAlignInside,
),
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.blueAccent.withOpacity(0.25),
blurRadius: 8,
spreadRadius: 2,
offset: const Offset(2, 4),
),
],
),
dateTextStyle: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
),
messageTextStyle: const TextStyle(
color: Colors.black,
fontSize: 14,
fontWeight: FontWeight.normal,
fontStyle: FontStyle.normal,
backgroundColor: Colors.transparent,
decoration: TextDecoration.none,
shadows: [
Shadow(
color: Colors.black26,
offset: Offset(1, 1),
blurRadius: 2,
),
],
),
hintStyle: const TextStyle(
color: Colors.grey,
fontSize: 14,
fontWeight: FontWeight.normal,
fontStyle: FontStyle.italic,
height: 1.5,
shadows: [
Shadow(
color: Colors.black26,
offset: Offset(1, 1),
blurRadius: 2,
),
],
),
sendVoiceMessageIconColor: Colors.blue,
deleteVoiceMessageIconColor: Colors.blue,
messageBoxBgColor: Colors.purpleAccent,
chatStyle: ChatStyle(
appBarColor: _appBarColor,
appBarTextColor: _appBarTextColor,
appbarEnabled: _appbarEnabled,
bubbleStyle: BubbleStyle(
agent: const AgentBubble(
bgColor: Colors.black,
textStyle: TextStyle(
color: Colors.red,
fontSize: 15,
fontWeight: FontWeight.w400,
),
audioMessage: AudioMessageStyle(
sliderColor: Colors.red,
inactiveColor: Colors.blue,
playPauseIconColor: Colors.red,
downloadIconColor: Colors.red,
durationStyle: TextStyle(
color: Colors.lightBlue,
fontSize: 15,
),
),
videoMessage: VideoMessageStyle(
playButtonColor: Colors.greenAccent,
),
documentMessage: DocumentMessageStyle(
downloadIconColor: Colors.pink,
copyIconColor: Colors.brown,
attachmentIconColor: Colors.white,
textStyle: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 15,
color: Colors.white,
overflow: TextOverflow.ellipsis,
),
),
),
visitor: const VisitorBubble(
bgColor: Colors.blueAccent,
textStyle: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w400,
),
audioMessage: AudioMessageStyle(
sliderColor: Colors.red,
inactiveColor: Colors.white,
playPauseIconColor: Colors.black,
downloadIconColor: Colors.black,
durationStyle: TextStyle(
color: Colors.black,
fontSize: 15,
),
),
videoMessage: VideoMessageStyle(
playButtonColor: Colors.red,
),
documentMessage: DocumentMessageStyle(
downloadIconColor: Colors.pink,
copyIconColor: Colors.brown,
attachmentIconColor: Colors.white,
textStyle: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 15,
color: Colors.white,
overflow: TextOverflow.ellipsis,
),
),
),
),
),
),
fullscreenDialog: true,
),
);
βοΈ Configuration
| Property | Description |
|---|---|
| baseUrl | The base URL of your domain where the chat service is hosted. |
| appId | The unique identifier for your chat bot application. |
| participantId | A unique identifier for the user participating in the chat. |
| name | The name of the user using the chat bot. |
| fcmToken | (Optional) The Firebase Cloud Messaging token for enabling notifications. |
π¨ Chat Style Customization
| Property | Description |
|---|---|
| appBarColor | The color of the app bar. |
| appBarTextColor | The color of the text in the app bar. |
| bubbleStyle | Customize the chat bubble style. |
| β’ visitorBgColor | Background color of the visitor's chat bubble. |
| β’ agentBgColor | Background color of the agent's chat bubble. |
| β’ textStyle | Text style of messages inside bubbles. |
| β’ audioMessage | Customize play/pause icons, sliders, duration style, etc. |
| β’ videoMessage | Customize the play button color. |
| β’ documentMessage | Customize download/copy/attachment icons and |
π± Android Permissions
Add the following permissions inside your android/app/src/main/AndroidManifest.xml file:
Libraries
- helper/_message
- helper/_socket_data
- helper/_token
- helper/_token_data
- helper/media_cache
- intellicon_chat_sdk
- models/bubble_style
- models/chat_style
- models/config
- models/feedback_message
- models/interaction
- models/user
- screens/chat
- services/apis
- services/attachment
- services/audio_playback_manager
- services/hive_store
- services/socket
- utils/logs
- utils/time
- widgets/attachment_modal
- widgets/audio_player
- widgets/chat_card
- widgets/chat_feedback
- widgets/document_bubble
- widgets/full_screen_image
- widgets/image_bubble
- widgets/message_bubble
- widgets/message_text
- widgets/notification_bubble
- widgets/socket_media_cache
- widgets/video_bubble
- widgets/video_player