How can I use `app.js` in Zendesk to connect to an external API using the complete URL

As someone new to developing Zendesk apps, I've been following the step-by-step guide available here.

To Summarize

I'm facing an issue with passing external API URLs to the AJAX call syntax within Zendesk's app.js file. You can find my simple Zendesk app code for download here.

For example,

When attempting to pass the below URL to requests:

https://api.hubapi.com/contacts/v1/contact/email/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="137d727e747a656653747e727a7f3d707c7e">[email protected]</a>/profile?hapikey=demo

The result in Zendesk app.js will automatically append a suffix

https://namgivu.zendesk.com/proxy/to/
to the URL, transforming it into a parameter instead of a full URL request.

Diving Deeper

While I can successfully call Zendesk API methods such as '/api/v2/users/4829450618.json', I encounter difficulties when trying to make calls to external APIs like the Hubspot API (example: this full URL call).

The "pseudo context" scenario is briefly outlined below.

Considering the sample app.js context where we:

  1. Initiate the code using 'app.activated': 'myStart'
  2. Make an AJAX request with 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.

It becomes evident that Zendesk adds a URL prefix to our URL parameter in cases #2b and #2c, which isn't the desired behavior. The goal is to send an AJAX call to the exact full URL as specified.

Thus, my question is how to effectively make calls to external API methods from app.js within a Zendesk app's code?

https://i.sstatic.net/IBleu.png

(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',
                };
            }, 
        },        
    };

}());

Answer №1

Grateful for the unexpected solution provided by Zendesk's support team, involving a minor adjustment to the AJAX call with cors:false

https://i.sstatic.net/O4pUv.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for managing CSS/style conflicts in JavaScript/AngularJS applications

I am new to AngularJS and I have a requirement to assign CSS properties to a component at the JavaScript file level. When I debug my code after applying the CSS styles to the component, I can see that all the applied CSS properties are behaving as expected ...

Java servlet, Selenium, and JavaScript are a powerful combination of tools that can

I am facing a situation where I need Selenium webdriver to be executed on the client side. On a webpage, I have a form with a Submit button inside it. The action attribute of the form calls a servlet named "servletName". Inside the servlet, the followin ...

Generated a hierarchical JSON structure from a dynamically generated form

My client has a unique page builder that allows them to create web forms using a convenient drag and drop interface. Currently, the data is output in a JSON format like this: { "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...

Unable to find a solution to Angular response options

I'm having trouble saving an item to local storage when receiving a 200 response from the backend. It seems like the request status is not being recognized properly. options = { headers: new HttpHeaders({ 'Content-Type': &apos ...

Optimizing NodeJS for scheduling and sending bulk text messages based on MongoDB data

I am currently developing an application that relies on MongoDB database entries to send text messages through AWS. The information stored in the database includes the message content, phone number, and scheduled time for sending the message. As of now, ...

How can I locate ThreeJS coordinates within the Panoramic GUI?

While I've dabbled with ThreeJS in the past, I'm currently working on a new project that involves setting up hotspots in a panoramic view. I vaguely recall using the camera dolly tool from this link to visualize camera locations. However, I' ...

Control the contents of the DOM using JavaScript in a single-page application

Is there a way to append a div element with p and h3 tags after the <product-list> component in Angular? When I try putting it inside window.onload(), it only works when the page is reloaded or refreshed. This approach doesn't work well in singl ...

Koa and Stripe are patiently holding off on displaying the page

My current setup involves using koa and stripe for processing a one-time payment. Although the functionality is there, I'm facing an issue where the page renders before the 'data' assignment takes place. This results in the 'id' sh ...

Explore Python and Selenium for implementing pagination with JavaScript functionality

Having recently started using Selenium with Python 2.7, I am looking to click on certain JavaScript elements used for pagination on a website. To provide context, here is the link to the page: . Any guidance or example code would be greatly appreciated. ...

Changing the entire contents of an array through innerHTML manipulation

I've encountered a strange issue with my Javascript code. I'm trying to create a table row using document.createElement("tr") and an array of cells like this: cell = new Array(3).fill(document.createElement("td")); However, when I populate the c ...

Looking for a bootstrap table code that includes checkboxes and a save button, so that when the save button is clicked, it

Seeking a Bootstrap table code that includes row checkboxes. When the save button is clicked, it should return the selected checkbox rows. ...

Utilizing JavaScript to iterate through objects retrieved via Ajax calls

Recently, I've been diving into the world of Javascript and delving deep into AJAX. Utilizing Vanilla JS along with simple AJAX, my current task involves fetching a user object from a URL based on the user's input ID. Despite attempting to use .d ...

Customizing an image with personalized text and then sending it to a server using a combination of javascript and

Looking for a way to add text to an image saved on the server, then save the edited image back to the server. I've heard using canvas is the best approach, but struggling to find the specific solution I need. ...

Hide the menu by clicking anywhere outside the React component

I'm working on a menu component that needs to close when clicking anywhere on the page while open. Is there a method to achieve this without having to add an event listener to the document and check the event.target? Unfortunately, I cannot send the ...

Create a unique component in ReactJS with the react-google-maps package to enhance your user interface

I would like to integrate a custom marker component into the map, but I have observed that using react-google-maps/api does not support rendering custom components. To illustrate this, here is an example of the code I used: const CustomMarker = ({ text }) ...

Tips for refreshing Facebook's og tags

I've been racking my brains over this issue for days, and despite the abundance of similar inquiries, I have yet to find a solution. On my blog-like website, each post requires its own title and description for Facebook articles. I know I can set the ...

Retrieving data from handlebars variable in a client-side JavaScript file

When creating a handlebars view using hbs for the express js framework, I am faced with an issue of accessing the variables passed to the view from a separate JavaScript file. Here's an example: var foo = {{user.name}} This code obviously results ...

Questions regarding prototype-based programming in Javascript

I am interested in achieving the following using Javascript: function A(){ this.B = function() { ... }; this.C = function() { <<I need to call B() here>> } ; }; I came across a method of method overloading, but I am curious to know ...

Tips for securing firebase-admin credentials in Next Js

I've encountered a challenge while using firebase-admin in Next Js. I attempted to hide the firebase service account keys using environment variables, but ran into an issue because they are not defined in server-side on Next JS. As a workaround, I had ...

The functionality of the Eslint object-property-newline feature is not functioning as expected

Within my configuration file .eslintrc, I have set "object-property-newline": ["error", { "allowAllPropertiesOnSameLine": true }], and "max-len": "off". However, objects like const something = {a: 5, ffsdfasdasdsddddd: 'asdasdasdddddddddddssssssddddd ...