Flutter客服集成插件help_scout_beacon的使用

Help Scout Beacon SDK for Flutter

Streamline customer communications in your app with the Help Scout Beacon SDK for Flutter.

Usage

Quick start

Configure the beacon with your Beacon ID and launch the beacon UI by calling open.

final HelpScoutBeacon beacon = HelpScoutBeacon(HSBeaconSettings(beaconId: 'YOUR_BEACON_ID'));
beacon.open();

Identify User

Optionally, you can prefill the beacon with user metadata:

final settings = HSBeaconSettings(beaconId: 'YOUR_BEACON_ID', debugLogging: true);
final HelpScoutBeacon beacon = HelpScoutBeacon(settings);

final user = HSBeaconUser(email: "john.doe@example.com", name: "John Doe");
beacon.identify(beaconUser: user);
beacon.open();

Navigate

Open a desired page in the Help Scout beacon UI:

beacon.open(route: HSBeaconRoute.ask);
beacon.open(route: HSBeaconRoute.chat);
beacon.open(route: HSBeaconRoute.contactForm);
beacon.open(route: HSBeaconRoute.previousMessages);
beacon.open(route: HSBeaconRoute.docs);
beacon.open(route: HSBeaconRoute.docs, parameter: 'search term');
beacon.open(route: HSBeaconRoute.article, parameter: 'article id');

Cleanup / Logout

Once done, you can remove all data:

beacon.clear();

Release mode

The newest version on Android requires setting up pro-guard rules. See example project proguard-rules.pro.

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中集成和使用Help Scout Beacon SDK。

import 'package:flutter/material.dart';
import 'package:help_scout_beacon/help_scout_beacon.dart';
import 'package:help_scout_beacon/help_scout_beacon_api.g.dart';

/// YOUR HELPSCOUT BEACON ID
const String yourBeaconId = "YOUR_BEACON_ID";

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _formKey = GlobalKey<FormState>();
  final HelpScoutBeacon beacon = HelpScoutBeacon(
      HSBeaconSettings(beaconId: yourBeaconId, debugLogging: true));

  @override
  Widget build(BuildContext context) {
    const spacer = SizedBox(height: 16, width: 16);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Help Scout Plugin'),
        ),
        body: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Enter your beacon id
              const Text("BeaconId: \n$yourBeaconId"),

              spacer,

              // Start a beacon ui
              ElevatedButton(
                onPressed: () => beacon.open(),
                child: const Text('Open (Default)'),
              ),
              spacer,

              ElevatedButton(
                onPressed: () => beacon.open(route: HSBeaconRoute.ask),
                child: const Text('Open Ask'),
              ),
              spacer,

              ElevatedButton(
                onPressed: () => beacon.open(route: HSBeaconRoute.chat),
                child: const Text('Open Chat'),
              ),
              spacer,

              ElevatedButton(
                onPressed: () => beacon.open(route: HSBeaconRoute.docs),
                child: const Text('Open Docs'),
              ),
              spacer,

              ElevatedButton(
                onPressed: () =>
                    beacon.open(route: HSBeaconRoute.docs, parameter: 'Help'),
                child: const Text('Open Docs (+search term)'),
              ),
              spacer,

              ElevatedButton(
                onPressed: () => beacon.open(route: HSBeaconRoute.contactForm),
                child: const Text('Open Contact Form'),
              ),
              spacer,

              ElevatedButton(
                onPressed: () => beacon.open(route: HSBeaconRoute.previousMessages),
                child: const Text('Open Previous Messages'),
              ),

              const SizedBox(height: 32),

              // Clear everything
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  FilledButton(
                    onPressed: () => beacon.identify(
                        beaconUser: HSBeaconUser(
                            email: "john.doe@example.com", name: "John Doe")),
                    child: const Text('Set User'),
                  ),
                  const SizedBox(width: 16),
                  FilledButton(
                    onPressed: clearBeacon,
                    child: const Text('Clear'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  Future<void>? clearBeacon() async {
    await beacon.clear();
  }

  bool isFormValid() {
    return _formKey.currentState?.validate() ?? false;
  }
}

说明

1. 配置Beacon ID：在yourBeaconId常量中填入你的Help Scout Beacon ID。
2. 初始化Beacon：在_MyAppState类中初始化HelpScoutBeacon对象，并传入配置。
3. 按钮操作：通过不同的按钮调用beacon.open方法，打开不同的页面或功能。
4. 清理数据：通过beacon.clear方法清除所有数据。

希望这个示例能帮助你更好地理解和使用Help Scout Beacon SDK for Flutter。如果有任何问题，欢迎随时提问！