Flutter在线客服插件tawkto的使用

Flutter在线客服插件tawkto的使用

插件信息

Tawk插件用于在Flutter应用中集成在线客服功能。

功能展示

安装

要使用此插件，在pubspec.yaml文件中添加flutter_tawk作为依赖项。

dependencies:
  flutter_tawk: ^x.y.z

导入

在Dart文件中导入tawkto包。

import 'package:tawkto/tawkto.dart';

如何使用

使用Tawk组件来嵌入Tawk客服系统。你需要设置directChatLink参数，并可选地设置访客信息。

Tawk(
  directChatLink: 'YOUR_DIRECT_CHAT_LINK', // 替换为你的直接聊天链接
  visitor: TawkVisitor(
    name: 'Ayoub AMINE', // 访客姓名
    email: 'ayoubamine2a@gmail.com', // 访客邮箱
  ),
)

自定义配置

Tawk组件支持多种自定义选项：

参数 类型 默认值 描述 是否必须
directChatLink String null Tawk直接聊天链接 是
visitor TawkVisitor null 设置访客姓名和邮箱的对象 否
onLoad Function null 渲染后调用的函数 否
onLinkTap Function null 链接点击时调用的函数 否
placeholder Widget Center(child: CircularProgressIndicator()) 加载时显示的占位符 否

TawkVisitor对象的参数：

参数 类型 默认值 描述 是否必须
name String null 访客姓名 否
email String null 访客邮箱 否
hash String null 安全模式哈希值 否

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中集成Tawk客服系统。

import 'package:flutter/material.dart';
import 'package:tawkto/tawkto.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Tawk'),
          backgroundColor: const Color(0XFFF7931E),
          elevation: 0,
        ),
        body: Tawk(
          directChatLink: 'YOUR_DIRECT_CHAT_LINK', // 替换为你的直接聊天链接
          visitor: TawkVisitor(
            name: 'Ayoub AMINE', // 访客姓名
            email: 'ayoubamine2a@gmail.com', // 访客邮箱
          ),
          onLoad: () {
            print('Hello Tawk!'); // 渲染后调用
          },
          onLinkTap: (String url) {
            print(url); // 点击链接时调用
          },
          placeholder: const Center(
            child: Text('Loading...'), // 加载时显示
          ),
        ),
      ),
    );
  }
}

更多关于Flutter在线客服插件tawkto的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter在线客服插件tawkto的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，关于在Flutter项目中使用Tawk.to在线客服插件，以下是一个基本的集成指南和代码示例。Tawk.to是一个流行的实时聊天解决方案，它允许你轻松地在你的Flutter应用中集成在线客服功能。

1. 添加依赖

首先，你需要在你的Flutter项目的pubspec.yaml文件中添加Tawk.to的插件依赖。虽然Tawk.to没有官方的Flutter插件，但你可以通过WebView的方式集成。

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^2.0.0  # 确保使用最新版本

2. 安装依赖

保存pubspec.yaml文件后，运行以下命令来安装依赖：

flutter pub get

3. 配置Tawk.to

你需要在Tawk.to的仪表板上创建一个新的聊天窗口，并获取你的property_id。确保你的应用已经正确配置，包括域名、颜色主题等。

4. 集成WebView

接下来，在你的Flutter项目中创建一个新的页面或组件来加载Tawk.to的聊天窗口。

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class TawkChatPage extends StatefulWidget {
  @override
  _TawkChatPageState createState() => _TawkChatPageState();
}

class _TawkChatPageState extends State<TawkChatPage> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tawk.to Chat'),
      ),
      body: WebView(
        initialUrl: 'https://yourdomain.tawk.to/embed.php?property_id=YOUR_PROPERTY_ID',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
      ),
    );
  }
}

请将YOUR_PROPERTY_ID替换为你从Tawk.to仪表板获取的property_id，yourdomain替换为你的域名。

5. 使用TawkChatPage

现在你可以在你的应用中导航到这个页面来显示Tawk.to的聊天窗口。

import 'package:flutter/material.dart';
import 'tawk_chat_page.dart';  // 假设你将上面的代码保存为tawk_chat_page.dart

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tawk.to Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => TawkChatPage()),
            );
          },
          child: Text('Open Chat'),
        ),
      ),
    );
  }
}

6. 运行应用

现在你可以运行你的Flutter应用，点击按钮应该会打开一个新的页面，并加载Tawk.to的聊天窗口。

注意事项

  • 确保你的Tawk.to配置正确，包括正确的property_id和域名。
  • WebView可能会受到平台限制和权限的影响，确保你的应用有适当的权限。
  • Tawk.to的聊天窗口可能需要根据你的需求进行进一步的自定义和样式调整。

这样，你就可以在Flutter应用中集成Tawk.to的在线客服插件了。希望这个示例对你有帮助！

回到顶部