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?

(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

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

Streamline the process of sorting through 2 arrays

Is there a more concise and elegant way to achieve the same functionality as my current method? I am looking for a shorter solution to create an array of items that haven't been used in the form previously, which are then used to populate a select dro ...

When the modal is closed, the textarea data remains intact, while the model is cleared

My challenge involves a simple modal that includes a text area. The issue I am facing is resetting the data of the textarea. Below is the modal code: <div class="modal fade" ng-controller="MyCtrl"> <div class="modal-dialog"> <d ...

Accessing the Div id stored in a session parameter

Is there a way to store the id (div id) into a session variable? This is an example of my code below: <div class='fieldRow'>Options </div> <div id="abcde"></div> <div class='Row'> <?php $user_typ ...

Error: Unable to access property 'nTr' as it is not defined

When I invoke the fnSelect function, an error occurs in Chrome: Uncaught TypeError: Cannot read property 'nTr' of undefined This is the code snippet causing the issue: $('#ToolTables_table_id_0, #ToolTables_table_id_1').mousedown(fun ...

Benefits of using props destructuring in React - beyond just being a syntactic shortcut

This idea might not be exclusive to React, but I've struggled to discover a compelling reason beyond concise and easier-to-read code. ...

Transform a text node into an HTML element with the help of JQuery

Consider this HTML snippet: <div> Lorem ipsum <span>dolor sit</span> amet <span>consectetur adipiscing elit</span> eiusmod tempor </div> To select the text nodes [Lorem ipsum, amet, eiusmod tempor], ...

Store the beginning and ending times in a MySQL database using Sequelize and Node.js

I am currently developing a project management application where I need to keep track of the start and stop time for user work. To achieve this, I have implemented two buttons in the UI - START and STOP. When a user clicks the START button, the following ...

The functionality of v-tooltip ceases to operate when the element is deactivated

<button v-tooltip="'text'" :disabled=true>Some button</button> Can you provide an explanation for why the button is disabled without disabling the tooltip as well? ...

Node.js routing issues leading to rendering failures

I have been working on a website that involves carpooling with drivers and passengers. When a driver submits their details, they are directed to a URL where they can select the passenger they want to ride with. Here is the code snippet I have written: ap ...

Validation of VAT numbers using JavaScript instead of PHP

I came across an interesting function at this link that is used for checking VAT numbers in the EU. However, I am struggling to integrate it with my registration form. I would like to convert it into a JavaScript function so that I can validate the number ...

What is the best way to align an element next to another using id or class?

I am looking to align the search element next to either "Media Heading 1" or "Media Heading 2" based on their id/class. For instance: Assume I have an element with the class of "media-item-1" and I aim to position the search div alongside that element us ...

I encountered an issue with Expo commands where it was throwing an error: "Module not found: 'minizlib'"

Every time I attempt to execute commands like expo init, expo start, or simply expo, it returns the following error message: Error: Cannot find module 'minizlib' Require stack: - /usr/local/lib/node_modules/expo-cli/node_modules/tar/lib/pack.js ...

Issue: TypeError: Unable to access the 'getBoundingClientRect' property of an undefined value

Is there anyone who can lend me a hand? I encountered an issue: TypeError: Cannot read property 'getBoundingClientRect' of null https://i.stack.imgur.com/Jnfox.png Here is the code snippet I am trying to render: <div className="box&qu ...

Watch as jQuery preloads every select list

There are two select lists, and the second one is dependent on the first. After loading the second list, I want to trigger some alerts. What is the most effective approach to accomplish this using jQuery? Let's say the second list is populated in the ...

Embedding a YouTube video in a view player using HTML5

So I've got a question: can you actually open a youtube video using an HTML5 video player? I'm looking for a more mobile-friendly way to watch youtube videos, and my idea was to upload a thumbnail image and then set up an onclick function to disp ...

how to properly position an image using javascript

I have two tilesheet images and I have successfully rendered them, but I am struggling to figure out how to place the character in front of the map. https://i.stack.imgur.com/n1a3Q.png I have placed these images in two different JavaScript files. This i ...

The nodejs server failed to respond to my request, displaying "undefined" instead

I have encountered some challenges while hosting my website on Firebase and Heroku Here are the issues I am facing: Initially, I am encountering CORS errors when trying to post data from a Firebase hosted URL to a server hosted on Heroku Even after re ...

javascript image alert

I want to upgrade a basic javascript alert to make it look more visually appealing. Currently, the alert is generated using if(isset($_GET['return'])) { // get a random item $sql = "SELECT * FROM pp_undergroundItems AS u LEFT JO ...

JavaScript - Attempting to insert a value into a text field by clicking a button

I am struggling to get my function to properly add the value of the button to the text field when clicked by the user. HTML <form name="testing" action="test.php" method="get">Chords: <textarea name="field"& ...

What is the best way to disable the functions doajax_red and doajax_blue when a radio button is checked?

Is there a way to halt the functions doajax_red and doajax_blue when a radio button is checked? Upon loading the page index.php, clicking the red button will display a loading image. If you check the BLUE radio button and then re-check the RED radio butt ...