Why Choose mysampark_chat Flutter package?

The Mysampark Chat widget delivers a production‑ready conversation layer that combines an AI chatbot, real‑time WebSocket messaging, and seamless handoff to a live human agent. It is ideal for in‑app support, lead capture, onboarding assistance, and any scenario where instant user interaction adds value.

Installation

Add the package to your pubspec.yaml with the official Flutter CLI command:

Code
flutter pub add mysampark_chat

After the dependency resolves, run flutter pub get to fetch the library.

Quick Start

A minimal implementation requires only two steps: initialise the SDK with your API key and drop the MysamparkChatWidget into your widget tree.

Dart / Flutter
import 'package:flutter/material.dart';
import 'package:mysampark_chat/mysampark_chat.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // Replace with the API key provided by your Mysampark account.
  MysamparkChat.initialize('YOUR_API_KEY');
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chat Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('Support Chat')),
        body: const MysamparkChatWidget(
          enableTypingIndicator: true,
          enableLeadForm: true,
          enableAgentTakeover: true,
        ),
      ),
    );
  }
}

This example creates a full‑screen chat UI with typing indicators, an embedded lead‑capture form, and automatic agent takeover enabled.

Customising the widget

The widget exposes several optional parameters. Below is a typical configuration for a branded experience:

Code
MysamparkChatWidget(
  enableTypingIndicator: true,
  enableLeadForm: false, // Disable if you handle leads elsewhere
  enableAgentTakeover: true,
  themeData: ChatThemeData(
    primaryColor: Colors.deepPurple,
    messageBubbleRadius: 12.0,
  ),
)

Refer to the package's API docs for the full list of theming options.

Configuration notes

  • API key: Obtain it from your Mysampark dashboard. The key authenticates the WebSocket connection and links the chat to the correct AI model and agent pool.
  • WebSocket connectivity: The widget requires a persistent internet connection. Test on both Wi‑Fi and cellular networks to ensure graceful fallback handling.
  • Backend services: AI responses and agent routing are managed by Mysampark’s backend. You do not need to host your own server, but you must configure the AI model and agent availability in the dashboard.
  • Lead‑capture form: When enableLeadForm is true, the widget injects a form step into the chat flow. Map the form fields to your CRM or marketing platform via the dashboard settings.

Common mistakes to avoid

  • Calling MysamparkChat.initialize() after
    Code
    runApp()
    . Initialise the SDK before the widget tree builds, otherwise the chat may fail to connect.
  • Hard‑coding the API key in source control. Store it securely using environment variables or Flutter’s --dart-define flag.
  • Disabling the WebSocket connection on platforms that require additional permissions (e.g., Android INTERNET permission). Verify that the manifest includes the required permission.
  • Assuming the default UI matches your brand. Use the themeData property or wrap the widget in a Theme to apply custom colours, fonts, and bubble shapes.

Tip: Test the agent takeover flow in a staging environment before going live. Trigger a handoff by sending a special command (e.g., /agent) and verify that a live agent receives the conversation.

Next steps

  • Explore the pub.dev page for advanced configuration examples.
  • Integrate analytics to track chat engagement, conversion from lead forms, and satisfaction scores.
  • Combine the chat widget with Flutter’s Provider or Riverpod for state‑aware UI updates outside the chat flow.

Frequently Asked Questions

Do I need a backend server to use mysampark_chat?

No. The package communicates directly with Mysampark’s hosted backend via WebSocket. You only need to provide a valid API key and configure AI/agent settings in the Mysampark dashboard.

Can I customise the chat UI to match my app's theme?

Yes. The widget accepts a <code>themeData</code> parameter where you can override colours, bubble radius, font styles, and more. For deeper customisation you can wrap the widget in a Flutter <code>Theme</code> or create a subclass of the provided UI components.

What happens if the user loses internet connectivity?

The widget shows a built‑in offline indicator and queues outgoing messages. Once the connection is restored, pending messages are sent automatically. Test this behaviour on both Android and iOS to ensure a smooth user experience.

How do I enable or disable the lead‑capture form?

Set the <code>enableLeadForm</code> flag on <code>MysamparkChatWidget</code>. When disabled, the chat operates without the embedded form, and you can handle lead collection through your own UI if needed.

Is the package compatible with Flutter web?

Yes. <code>mysampark_chat</code> is cross‑platform and works on mobile, desktop, and web. However, verify that your web server allows WebSocket connections and that any required CORS settings are configured.