Flutter SDK Integration

Add Helplane chat support to your Flutter app using our official SDK.

Requirements

• Flutter 3.10 or later
• Dart 3.0 or later
• iOS 14.0+ / Android API 24+

Installation

Add the package to your pubspec.yaml:

dependencies:
  helplane_flutter: ^1.0.0

Then run:

flutter pub get

Configuration

Initialize the SDK

In your main.dart:

import 'package:flutter/material.dart';
import 'package:helplane_flutter/helplane_flutter.dart';
void main() {
  HelpLane.configure(brandToken: 'your-brand-token');
  runApp(MyApp());
}

Identify Users (Optional)

For logged-in users, identify them to maintain conversation history:

import 'package:helplane_flutter/helplane_flutter.dart';
HelpLane.identify(HelpLaneUser(
  id: 'user-123',
  name: 'John Doe',
  email: '[email protected]',
  avatarUrl: 'https://example.com/avatar.jpg',
  customAttributes: {'plan': 'premium', 'company': 'Acme Inc'},
));

Displaying the Chat

Modal Bottom Sheet

The easiest way to show the chat:

import 'package:helplane_flutter/helplane_flutter.dart';
class SupportButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => HelpLane.openChat(context),
      child: Text('Get Help'),
    );
  }
}

Embedded Widget

Embed the chat directly in your UI:

import 'package:helplane_flutter/helplane_flutter.dart';
class ChatScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Support')),
      body: HelpLaneChat(
        onLoad: () => print('Chat loaded'),
        onError: (error) => print('Error: $error'),
      ),
    );
  }
}

Full-Screen Page

import 'package:helplane_flutter/helplane_flutter.dart';
class ChatPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Help & Support'),
        leading: IconButton(
          icon: Icon(Icons.close),
          onPressed: () => Navigator.of(context).pop(),
        ),
      ),
      body: HelpLaneChat(),
    );
  }
}
// Navigate to chat
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => ChatPage()),
);

User Logout

When users log out, clear their identity:

HelpLane.clearUser();

Push Notifications

HelpLane uses OneSignal for push notifications. If you're using the onesignal_flutter package:

import 'package:helplane_flutter/helplane_flutter.dart';
import 'package:onesignal_flutter/onesignal_flutter.dart';
// After OneSignal initialization
void setupPushNotifications() {
  // Register user with OneSignal
  final externalId = HelpLanePush.getExternalUserId();
  if (externalId != null) {
    OneSignal.login(externalId);
  }
  // Handle notification taps
  OneSignal.Notifications.addClickListener((event) {
    final data = event.notification.additionalData;
    if (HelpLanePush.isHelpLaneNotification(data)) {
      // Navigate to chat
      Navigator.pushNamed(context, '/support');
    }
  });
}

Platform-Specific Setup

Android

Add internet permission to android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />

iOS

No additional setup required. WebView is included in Flutter's webview_flutter package.

Customization

The chat widget inherits your brand colors and styling configured in your Helplane dashboard under Settings > Chat Widget.