Integrating Zendesk with Flutter
Tags: flutter, zendesk, beginners, mobile
Published: 2022-08-22 20:02:04


Image Credit: [Pexels](https://www.pexels.com) by [Cottonbro](https://www.pexels.com/@cottonbro/)

## Table of Content

- 🕹 [Introduction](#intro)
- 🎥 [Tips](#tip)
- 🧰 [Zendesk Flutter Package](#package)
- 🧰 [implementation](#implementation)
- 🎙 [Setting up Channel Message](#channel)
- 📲 [Codebase](#codebase)



###🕹 Introduction <a name="channel"></a>

[Zendesk](https://www.zendesk.com/) 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 <a name="tip"></a>

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 <a name="package"></a>

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](https://pub.dev/packages/zendesk_messaging), copy the current version and add to your pubspec.yaml file.

### 🎥 Implementation <a name="implementation"></a>

Once you have added the package to your pubspec.yaml, run the below code in the terminal of your project's root.

```dart
flutter pub get
```

In other not to repeat the implementations, do follow through with what you see on the [zendesk_messaging](https://pub.dev/packages/zendesk_messaging) package screen. I'd only walk you through where to get the necessary information.


###🎙 Setting up Channel Message <a name="channel"></a>

On your zendesk admin dashboard, with side navigation bar, go to the Channel -> Messaging and Social, select the message tab. 


![Channel Message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4uc33fur1w64t2yy8r6.png)

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'

![Channel Message - Options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v754d6oguqfj8lti4xyk.png)

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.

![Channel Message - Configurations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o82347af6gn8485g84dc.png)

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)


![Channel Message - Channel Authentication](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9d31v25my39qcmq0amxp.png)

###📲  Codebase <a name="codebase"></a>
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

```dart
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.

```dart
// 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();

```