> For the complete documentation index, see [llms.txt](https://asamarsal.gitbook.io/notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://asamarsal.gitbook.io/notes/personal-documentation/mobile/flutter/membuat-cs-helpdesk-tawk-to.md).

# Membuat CS Helpdesk (Tawk To)

Tawk to adalah platform untuk integrasi aplikasi dengan platform untuk membantu helpdesk

{% embed url="<https://pub.dev/packages/flutter_tawkto>" %}
Tawk To
{% endembed %}

1. Buka terminal, ketikkan&#x20;

   ```shell
   flutter pub add flutter_tawkto
   ```
2. Buka platform <https://tawk.to>
3. Daftar dan masuk
4. Catat informasi mengenai :&#x20;

```
'chat link'
'nama profile'
'email'
```

5. Buatlah page baru bernama chattingpage.dart

```
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_tawk/flutter_tawk.dart';

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

  @override
  State<ChattingPage> createState() => _ChattingPageState();
}

class _ChattingPageState extends State<ChattingPage> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          backgroundColor: Color(0xFF105D38),
            body: SafeArea(
              child: Tawk(
                directChatLink: 'https://tawk.to/chat/xxx',
                visitor: TawkVisitor(
                  name: 'Ujang Ganteng',
                  email: 'ujangganteng@gmail.com',
                ),
              ),
            ),
          ),
        );
  }
}
```

6. Tawk to siap digunakan dengan mengunjungi <https://dashboard.tawk.to/>