Image Credit: Pexels by Cottonbro
Table of Content
- 🕹 Introduction
- 🎥 Tips
- 🧰 Zendesk Flutter Package
- 🧰 implementation
- 🎙 Setting up Channel Message
- 📲 Codebase
🕹 Introduction
Zendesk is an American company headquartered in San Francisco, California. It provides software-as-a-service (Saas) products related to customer support, sales, and other customer communications.
This Saas, provides a ticketing platform for users, and companies at large. In this article, you'll learn how to integrate zendesk into your flutter application with ease, setup and configure your zendesk dashboard for the utmost experience.
NB: This article covers both the android and iOS Flutter platform
🎥 Tips
Before we continue, there are somethings I'd love to get out of the way,
You should be familiar with Flutter and how to add Packages.
Already created a zendesk admin account or have access to it. If you don't (probably as the developer), do well to reach out to the person managing the zendesk platform, share this article or explain the information you'll be needing from them.
🧰 Zendesk Flutter Package
There are lots of zendesk packages on the pub.dev platform, but I found one to be very detailed and worked well for me. Click on zendesk_messaging, copy the current version and add to your pubspec.yaml file.
🎥 Implementation
Once you have added the package to your pubspec.yaml, run the below code in the terminal of your project's root.
flutter pub get
In other not to repeat the implementations, do follow through with what you see on the zendesk_messaging package screen. I'd only walk you through where to get the necessary information.
🎙 Setting up Channel Message
On your zendesk admin dashboard, with side navigation bar, go to the Channel -> Messaging and Social, select the message tab.
Incase no messaging channel has been added yet, you'd have to click on the 'Add Channel' dropdown button, to select your options, which in our case will be the 'Android and iOS'
Upon selection of either the Android or iOS channel, you'll be walked through on the settings, there you'll find your "channel key", please copy this out and store in your code.
NB: It's platform specific, meaning both the Android and iOS have different channel keys.
From the Above Image, you'd notice six (6) tabs;
1. The Basic, which is essentially where you see the name
of the channel you're currently working on.
2. The Style, here you set the color of the zendesk on
either platform you're working on, you could provide
your app's color, so it'll still match your beautiful
UI.
3. The Response, you get to configure how to respond to
messages, add bot privileges etc...
4. The Notification, well it's like adding Firebase Cloud
Messaging, for push notifications in your mobile app.
5. The Authentication, here, you'll be redirected to go
setup your "jwt", a short form of "Javascript Web
Token", which plays a vital role, in recognising and
retaining users once they are chatting with you (The
help center)
📲 Codebase
Like I said previously, if you (as a developer), don't have access to the zendesk dashboard, you can request for the above information from the person managing the dashboard.
Initialising Zendesk in your applicaition.
dart
// paste the android and ios channel keys you earlier copied out here.
// These keys, should be placed in a .env file, and added to the .gitignore file, so you don't check it into any version control system.
final String androidChannelKey = '';
final String iosChannelKey = '';
@override
void initState() {
super.initState();
ZendeskMessaging.initialize(
androidChannelKey: androidChannelKey,
iosChannelKey: iosChannelKey,
);
}
Showing the Zendesk
ZendeskMessaging.show();
NB: The above method could be added to any GestureDetector of your choice, say onTap, of a button, to pop up the zendesk platform.
Authenticating Users
This is optional, but necessary if you want to keep track of the user chat across platforms, meaning, if user closes and opens the application again, the chat history will be there.
PS: The Zendesk must be initialised before you authenticate.
// Remember the 'jwt' from the Authentication tab on your zendesk dashboard, replace the "YOUR_JWT" with your actual 'jwt'
final ZendeskLoginResponse result = await ZendeskMessaging.loginUser(jwt: "YOUR_JWT");
await ZendeskMessaging.logoutUser();
Top comments (0)