我可以将 tawk.to 集成到我的 Flutter 应用的导航栏中吗？

Question

我想以某种方式将我的网站 tawk.to 聊天按钮集成到我的 Flutter 应用程序中。也许一直加载 webview 只显示图标？但是当它被点击时，我希望它最大化当前内容，并让用户在聊天中收到消息时收到振动或通知。

这是 tawk.to 的小部件代码：

<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/5c8306ab101df77a8be1a645/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->

我想使用 tawk.to，因为这也是我现在在我的网站上使用的，拥有 2 个不同的聊天系统会使一切变得更加困难。 也欢迎任何其他解决问题的建议。

这里是 Main.dart：

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

import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:firebase_analytics/observer.dart';


void main() => runApp(App());


class App extends StatelessWidget {
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  static FirebaseAnalyticsObserver observer =
  FirebaseAnalyticsObserver(analytics: analytics);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Flutter App',
      navigatorObservers: <NavigatorObserver>[observer],
      home: Home(
        analytics: analytics, //
        observer: observer, //
      ),
    );
  }
}

我的主页小部件目前如下所示：

import 'package:flutter/material.dart';
import 'placeholder_widget.dart';
import 'homepage.dart';
import 'reader.dart';
import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:firebase_analytics/observer.dart';


class Home extends StatefulWidget {
  Home({Key key, this.title, this.analytics, this.observer}) //
      : super(key: key); //

  final String title; //
  final FirebaseAnalytics analytics; //
  final FirebaseAnalyticsObserver observer; //


  @override

  State<StatefulWidget> createState() {
    return _HomeState(analytics, observer);
  }
}
class _HomeState extends State<Home> {
  _HomeState(this.analytics, this.observer); //

  final FirebaseAnalyticsObserver observer; //
  final FirebaseAnalytics analytics; //

  int _currentIndex = 0;
  final List<Widget> _children = [
    Homepage(),
    MyApp(),
    PlaceholderWidget(Colors.green) // TODO: I want my chat button here
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex], // new
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped, // new
        currentIndex: _currentIndex, // new
        items: [
          new BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          new BottomNavigationBarItem(
            icon: Icon(Icons.photo_camera),
            title: Text('blah'),
          ),
          new BottomNavigationBarItem(
              icon: Icon(Icons.person),
              title: Text('Chat')
          )
        ],
      ),
    );
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }


}

Answer 1

使用这个包flutter_tawk。

import 'package:flutter_tawk/flutter_tawk.dart';

Tawk(
    directChatLink: 'YOUR_DIRECT_CHAT_LINK',
    visitor: TawkVisitor(
        name: 'Ayoub AMINE',
        email: 'ayoubamine2a@gmail.com',
    ),
)

Answer 2

我解决了。我发现最好的方法是在 webview 中使用 javascript，然后您可以通过 webview 控制器在 webview 中评估 javascript。

我将 Tawk.to 默认设置为隐藏在我的网站上，为了显示它，您只需执行以下操作：

为 webview 声明一个控制器。在课程开始时添加：

  WebViewController _controller;

然后在您的 WebView() 小部件内部：

new WebView(
          initialUrl: 'google.com',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) async {
            _controller = webViewController;

          //I've left out some of the code needed for a webview to work here, fyi
          },
),

最后你可以在你的 appbar 中创建一个按钮，运行 javascript 代码来打开 tawk：

              IconButton(
            icon: Icon(Icons.message),
            onPressed: () {
                _controller.evaluateJavascript('Tawk_API.showWidget();');
                _controller.evaluateJavascript('Tawk_API.maximize();');
            },
          ),