Integrating Zendesk with Flutter

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,

1. You should be familiar with Flutter and how to add Packages.

2. 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();