Search code examples
javascriptapizendesk-app

Zendesk `app.js` to call external API with full URL?

I'm new to creating Zendesk app and following the getting-started guide here.

In brief

I cannot pass external API's URL to the AJAX-call syntax within Zendesk's app.js file. My simple Zendesk app code can be download here.

E.g.

When we pass below URL to requests

https://api.hubapi.com/contacts/v1/contact/email/[email protected]/profile?hapikey=demo

Zendesk app.js will call

https://namgivu.zendesk.com/proxy/to/https%3A%2F%2Fapi.hubapi.com%2F   contacts%2Fv1%2Fcontact%2Femail%2Fnamgivu%40gmail.com%2Fprofile%3Fhapikey%3Ddemo

i.e. a suffix https://namgivu.zendesk.com/proxy/to/ is automatically added to the URL, making it become parameter instead of the full URL request.

In details

I can successfully call Zendesk API method e.g. '/api/v2/users/4829450618.json'. Though I cannot call external API such as Hubspot API e.g. this full URL call.

The peseudo context is as below.

Let's take the context of the sample app.js as below where we just

  1. Simply start the code via 'app.activated': 'myStart'
  2. Then call an AJAX request this.ajax('myAJAXCall') under different cases 1) Internal Zendesk API, 2a) Target Hubspot API call, 2b) Simplified external API call, and 2c) Simple test call.

We can see that in case #2b and #2c, Zendesk auto add URL prefix to our URL parameter which is not what we want i.e. we want to send AJAX call to the exact full URL we have set.

So my question is, how to make call to external API methods from app.js within a Zendesk app codes?

enter image description here

(function() {

    return {
        events: {
            'app.activated': 'myStart',     
       },

        myStart: function() {
            this.ajax('myAJAXCall').then(
                //succeeded handler
                function(data) {
                    this.switchTo('someView', data);
                },

                //failed handler
                function() {
                    this.switchTo('errorView');
                }
            );
        },

        requests: {
            myAJAXCall: function() {
                return {
                    url: '/api/v2/users/4829450618.json', //case 1 - internal Zendesk api call

                    url: 'https://api.hubapi.com/contacts/v1/contact/email/'+email+'/profile?hapikey=' + this.hubspotAPIKey, //case 2a - target Hubspot api call
                    url: 'http://someDomain.com/abb', //case 2b - simplified `external api` call
                    url: 'abb',  //case 2c - simplified `external api` call

                    type: 'GET',
                    dataType: 'json',
                };
            }, 
        },        
    };

}());
Solution

  • Surprising and thanks to Zendesk support team, one small piece of AJAX argument when call is cors:false

    enter image description here