Flutter智能对话插件verloop_flutter_sdk的使用

开始使用

这里我们是在应用中添加一个浮动操作按钮（Floating Action Button）作为verloop聊天按钮。你也可以将该组件放置在其他位置。

VerloopWidget内部通过GestureDetector的onTap属性处理按钮点击事件。

const String _clientId = "ClientID"; // 需要使用你的组织名称

final Map<String, String> userVariableMap = {};
userVariableMap['key1'] = 'value1';

final Map<String, String> roomVariableMap = {};
roomVariableMap['key2'] = 'value2';

Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: const Text('插件示例应用'),
      ),
      body: Center(
        child: Text('正在为客户端 $_clientId 运行'),
      ),
      floatingActionButton: FutureBuilder<String?>(
        // 初始化Firebase
        future: FirebaseMessaging.instance.getToken(),
        builder: (context, snapshot) {
          // 检查错误
          if (snapshot.hasError) {
            return const Text("发生错误");
          }
          if (snapshot.hasData && snapshot.data != "") {
            String token = snapshot.data ?? "";
            return VerloopWidget(
              clientId: _clientId,            // 必填
              userId: "<user_id>",            // 可选：如果你希望在所有平台间关联用户的所有聊天记录，可以添加此参数
              recipeId: "<recipe_id>",        // 可选：如果你想使用默认之外的任何其他食谱，请使用此参数
              fcmToken: token,                // 可选：这有助于我们在设备上发送通知。你仍然需要处理fcm通知。
              userName: "<user_name>",        // 可选：这将填充系统变量以标识用户。否则，用户名将自动生成，如"guest-123"
              userEmail: "<user_email>",      // 可选：这将填充系统变量以存储电子邮件
              userPhone: "<user_phone>",      // 可选：这将填充系统变量以存储电话号码
              userVariables: userVariableMap, // 可选：这些是与给定userId关联的用户的全局变量。这些变量将被食谱使用。一旦当前对话结束，这些值将溢出到另一个房间。
              roomVariables: roomVariableMap, // 可选：这些变量将被食谱使用，并且不会在用户创建的另一个房间中溢出。
              overrideUrlOnClick: false,      // 可选：默认为false，如果你不想在浏览器中打开链接，而是希望在应用内处理它，请将其设置为false
              onButtonClicked:                // 可选：添加此函数回调作为按钮点击监听器
                  (String? title, String? payload, String? type) {
                print("按钮点击标题 $title");
              },
              onUrlClicked:                   // 可选：添加此函数回调作为链接点击监听器
                  (String? url) {
                print("链接点击 $url");
              },
              child: const FloatingActionButton(
                onPressed: null,
                child: Icon(Icons.chat),
              ),
            );
          }
          return const Text("加载中...");
        },
      ),
    ),
  );
}

按钮点击监听器

这些按钮是作为对话流程的一部分定义的。一旦用户点击了按钮，你可以在Flutter应用中监听到这些事件。 一个常见的用例是在食谱内点击按钮时导航到应用的另一个部分。 注意：包含URL的按钮会被视为按钮而不是URL。因此，如果实现了onButtonClicked，你会得到回调。

VerloopWidget(
  clientId: <client_id>,            // 必填
  onButtonClicked:
      (String? title, String? payload, String? type) {
    print("按钮点击标题 $title");
  },
  child: <Some Widget>,
);

URL点击监听器

这些URL是作为对话流程的一部分定义的。一旦用户点击了URL，你可以在Flutter应用中监听到这些事件。

你可以选择在移动浏览器中打开URL还是在应用内处理它，通过设置overrideUrlOnClick字段。如果overrideUrlOnClick为true，我们将不在任何地方打开URL，但你会在onUrlClicked函数中收到回调。

VerloopWidget(
  clientId: <client_id>,            // 必填
  overrideUrlOnClick: false
  onUrlClicked:
      (String? url) {
    print("链接点击 $url");
  },
  child: <Some Widget>,
);