WhatsApp integration for a flutter WebView application
We were recently working on an e-commerce platform. Then we chose to create a flutter webview application. We completed it smoothly and it was operational. On the website, there is a function that allows you to communicate with a customer service representative via WhatsApp. This, however, did not work in the flutter application. However, it functions very well on the desktop computer through web whatsapp. But as WhatsApp and our flutter app are two different apps , this did not work or unable to invoke whatsapp through our application.
To integrate WhatsApp into a Flutter webview application, we can use the url_launcher package in Flutter.
Here are the steps to follow:
- Add the url_launcher dependency to your pubspec.yaml file:
dependencies:
url_launcher: ^6.0.9
- Import the url_launcher package in your Dart file:
import ‘package:url_launcher/url_launcher.dart’;
- In your webview widget, add an onPageFinished callback that gets triggered when the page finishes loading. Inside this callback, you can use url_launcher to launch WhatsApp:
WebView(
initialUrl: ‘https://example.com’,
onPageFinished: (String url) {
if (url.contains(‘whatsapp://send’)) {
launch(url);
}
},
)
or:
navigationDelegate: (NavigationRequest request) {
if (request.url.contains(‘api.whatsapp.com’)) {
launch(request.url); //This is where Whatsapp launches
return NavigationDecision.prevent;
}
In the above code, we check if the URL contains whatsapp://send. If it does, we use launch to open the URL in the system’s default browser, which will launch WhatsApp if it is installed.
Note that this will only work on devices that have WhatsApp installed. If WhatsApp is not installed, the URL will not be opened.
