Linking zendesk from your Sencha Touch App


Problem Statement

Zendesk says “If you have customers, then you need Zendesk“.

Indeed, zendesk enables you to

  • Engage with your customers on their turf, which are website, email, Chat, Voice, Twitter, Facebook
  • Measure yourself against your peers and benchmark your performance against thousands of companies
  • Let your customers help themselves
  • Turn your support site into a thriving online community where user can give feedback and use the existing knowledge base, etc
  • And of course they enable you to manage and solve tickets

While I am not on the mission to endorse Zendesk, it is definitely a fine product and it definitely makes customer support an easy and enjoyable task. At walking tree we use Sencha Touch to provide amazing apps which works across the devices and the customer often asks for in app zendesk support. In this article I will be explaining how to achieve this integration within few minutes.

Pre-requisite

  • Basic understanding of Sencha Touch

For the demonstration purpose, I have used following files:

app.html

app_html

app.js

Ext.Loader.setConfig({

});

Ext.application({
    views: [
        'Zendesk'
    ],
    name: 'MyApp',

    launch: function() {

        Ext.create('MyApp.view.Zendesk', {fullscreen: true});
    }

});

Zendesk.js

Ext.define('MyApp.view.Zendesk', {
    extend: 'Ext.Container',
    alias: 'widget.zendesk',

    config: {
        layout: {
            type: 'card'
        },
        items: [
            {
                xtype: 'panel',
                html: 'Click on Favorite button to see your favorite snacks!',
                styleHtmlContent: true,
                items: [
                    {
                        xtype: 'toolbar',
                        docked: 'bottom',
                        items: [
                            {
                                xtype: 'button',
                                handler: function(button, event) {
                                    Ext.define('ListItem', {
                                        extend: 'Ext.data.Model',
                                        config: {
                                            fields: ['text']
                                        }
                                    });

                                    var treeStore = Ext.create('Ext.data.TreeStore', {
                                        model: 'ListItem',
                                        defaultRootProperty: 'items',
                                        root: {
                                            items: [
                                            {
                                                text: 'Drinks',
                                                items: [
                                                {
                                                    text: 'Water',
                                                    items: [
                                                    { text: 'Still', leaf: true },
                                                    { text: 'Sparkling', leaf: true }
                                                    ]
                                                },
                                                { text: 'Soda', leaf: true }
                                                ]
                                            },
                                            {
                                                text: 'Snacks',
                                                items: [
                                                { text: 'Nuts', leaf: true },
                                                { text: 'Pretzels', leaf: true },
                                                { text: 'Wasabi Peas', leaf: true  }
                                                ]
                                            }
                                            ]
                                        }
                                    });

                                    var nestedItems = Ext.create('Ext.NestedList', {
                                        store: treeStore,
                                        backText : 'Home',
                                        title : 'Snacks'
                                    });                                    
                                    var zendeskCmp = button.up('zendesk'); 
                                    zendeskCmp.add( nestedItems );
                                    zendeskCmp.setActiveItem(1);
                                },
                                iconAlign: 'top',
                                iconCls: 'favorites',
                                text: 'Favorite'
                            }
                        ]
                    }
                ]
            }
        ]
    }});

With above code you shall have a basic project with following screens in place:

z_initial_screens

How to do?

Step 1 : Create a zendesk account

You can go to “http://www.zendesk.com/” and click on the “TRY ZENDESK FREE” button. This gives you a nice looking form, which you need to fill-in and submit. Once you have registered, login-into zendesk on your own support portal ( for example, for my trial account zendesk has created https://wtcalok.zendesk.com/) to make sure that you are ready to receive tickets.

Step 2 : Link zendesk in your app

Zendesk can be linked in many ways. As part of this article, I will enable you to link zendesk as

  • Direct link, which takes you into zendesk’s mobile app
  • Support tab, which can be shown on left or right part of your screen

Linking to zendek’s mobile website

This is the easiest thing that you can do for your customer. In my example, I have added one additional button called “Support” and on tap of this button the user is redirected to my zendesk support page. If the user is accessing the page from the mobile device then he gets to see the mobile version of the page.

Support button

 {
	xtype: 'button',
	handler: function(button, event) {
		window.location.assign("https://wtcalok.zendesk.com/anonymous_requests/new");
	},
	iconAlign: 'top',
	iconCls: 'team',
	text: 'Support'
}

The mobile website looks like as shown below (and on tap of the support button, the user is taken to zendesk’s mobile website):
zendesk_mobile_site

Here we are taking the user to the new request screen. However, if you want, you can directly take the user to the existing requests screen by taking him to following url:

https://wtcalok.zendesk.com/requests

Your customer shall be able to see below set of screens and instead of starting from new request, now the customer will start on open request screen:

zendesk_open_request

Providing a support tab on all the screens

While this may not be the most desired thing to do, specially when you also support touch devices with small screens, nevertheless this is definitely an option for the mobile website.  For this you need to copy one small code generated for you by Zendesk.

Steps for obtaining that code:

  • Login into Zendesk
  • Go to dashboard
  • Click on the Admin
  • Click on the “Feedback Tab” from the list of available channels, which shall take you to the dropbox link https://wtcalok.zendesk.com/agent/#/admin/dropboxes
  • Review the settings on this page. Some of the basic and general settings that you may like to review are
    • Language ( e.g English (UK))
    • Tab Title (e.g. Support )
    • Tab position (e.g. right)
    • Tab Color (e.g. black)
  • Click on the “Preview & grap code snippet” button on the bottom right corner of this page

Inserting the code in your app

Now that you have the generated code, you need to put that into the body of your app.html code. Note that it is important that you insert this code immediately before the end of the body tag. With above change, the app.html shall look similar to below code:

SupportTab

With above code changes in place, we shall be able to see a support tab in our example application, as shown below image:

SupportTabInApp

Clicking on the support tab leads to new request form as shown above.

 

Summary

I hope you have become familiar with zendesk and you exactly know how to use this in your next (or existing) Sencha Touch based app. As I said, there are various ways to link zendesk and in case you are looking for more specific linking then you may even like to explore their API. I hope you enjoyed reading this article and you find this helpful.

At Walking Tree we practice and recommend Sencha Products like ExtJS and Sencha Touch to build amazing web / touch apps. In case you are looking for training or professional assistance, contact us by visiting our website.

 

Reference

Alok is co-founder of Walking Tree, a company which acts as a product engineering team of the customers across the globe and delivers end-to-end products / solutions to ensure "Great Experience". Walking Tree provides Design, Development, QA, Maintenance and Support, Consulting, Training and Skill Augmentation services around Ext JS, Sencha Touch, Angular JS, Xamarin, Native Android, Native iOS, MongoDB, Cassandra, Hadoop, Pentaho, etc. | Twitter

Tagged with: , ,
Posted in Sencha Touch
3 comments on “Linking zendesk from your Sencha Touch App
  1. Alok Ranjan says:

    Hi Bartosz
    I didn’t test on iPad earlier. Just now I tested on my iPad and I don’t see the problem explained by you. Following screenshot shows sample screen on iPad:
    Zendesk support tab on iPad

    • On iOS 6 (iPhone and iPad) you can do something like this:

      (I have modified this script from zendesk which was creating iframe in floating window to create iframe in Sencha Panel, but either way it is disabling scroll events on window).

      The problem is that sencha is responding to events touchmove by disabling them, that way UI is always in fixed position. When you move fingers on some iframes (which is zendesk form) this events are only firing in iframe and sencha cannot block whole page scrolling.

      Also I cannot add even listener on iframe which is not in the same protocol (on safari it would work, but on phonegap, the protocol is file:// and iframe protocol is http://)

  2. There is a HUGE error which cannot be skipped :(. When in iPad or iPhone, whole Sencha UI will scroll when you move finger across Zendesk form.

    And it cannot be fixed in any way.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: