Flutter whatsapp feedback / reach us button integration

Flutter Whatsapp :

In this tutorial we will be going through the implementation of whatsapp reach us/ feedback button within your flutter app so that the app users can easily post their query’s related to your app.

Whats app is the most used social media app to connect with others its easy and used by almost everyone so integrating your feedback on this platform is a big plus.

So not only feedback you can share data from your app through whatsapp i.e., text messages by defining them in your app and can leave the phone number field so that user can enter accordingly.

You can also make service related communication through this option like receiving order’s / bookings through what’s app for your business.

Don’t wait any longer! Let’s dive right in and add this fantastic Flutter WhatsApp Feedback feature to your app. Enhance your app’s performance by following along with the comprehensive video tutorial provided below.

Whatsapp Video Tutorial :

For a deeper understanding and more detailed information, I recommend exploring the tutorial provided below.

pubspec.yaml :

Include the url launcher library in your project to enable launching WhatsApp directly from your app upon user interaction. Ensure that you’ve added the latest version of the library to avoid any potential code-related issues.

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.0.9

main.dart :

Below is the full implementation code for integrating a ‘Reach Us’ button in Flutter, allowing users to provide feedback via WhatsApp.

When the button is tapped, WhatsApp will open with a predefined text message. This code ensures seamless integration and user engagement.

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Contact Us'),
        ),
        body: Container(
          child: TextButton(
            onPressed: () {
              reachUs();
            },
            child: Text('Reach Us'),
          ),
        ),
      ),
    );
  }
}

reachUs() async {
  var contact = "+919849412345";
  var android_url = "whatsapp://send?phone=" + contact + "&text= Hi, I need some help";
  var iOS_url = "https://wa.me/$contact?text=${Uri.parse("Hi, I need some help")}";

  if (Platform.isIOS) {
    if (await canLaunch(iOS_url)) {
      await launch(iOS_url, forceSafariVC: false);
    } else {
      print('Whatsapp is not installed');
    }
  } else {
    if (await canLaunch(android_url)) {
      await launch(android_url);
    } else {
      print('Whatsapp is not installed');
    }
  }
}

Flutter Whatsapp Output :

The following screen illustrates the integration of the Flutter WhatsApp Feedback ‘Reach Us’ button.

If you have any questions about implementing WhatsApp feedback, feel free to ask in the comments below. Don’t forget to like and share if you found this tutorial helpful