How to Integrate Retool with Zendesk

Before configuring Retool, you need a Zendesk API token. Log in to Zendesk Support as an Admin and navigate to Admin Center — you can access it by clicking the gear icon in the left sidebar or visiting https://yoursubdomain.zendesk.com/admin. In Admin Center, expand the Apps and Integrations section in the left navigation, then click APIs → Zendesk API. On the API settings page, ensure the Token Access toggle is enabled (shown in green). Click the Add API token button to create a new token. Give it a descriptive name like 'Retool Integration' so you can identify it later. After saving, Zendesk displays the token exactly once — copy it immediately and store it securely. This token is used in combination with your admin email address for Basic Auth. The format Zendesk expects is: username = your_email/token (literally append /token to your email), and password = the token string itself. For example, if your email is ops@company.com, the username you configure in Retool will be ops@company.com/token.

In Retool, click the Resources tab in the left sidebar (or navigate to your Retool instance's /resources path). Click the Add Resource button in the top right. From the resource type list, scroll to find REST API and click it. On the configuration screen, give the resource a clear name like 'Zendesk API'. In the Base URL field, enter your Zendesk API base URL in the format: https://yoursubdomain.zendesk.com/api/v2 — replace 'yoursubdomain' with your actual Zendesk subdomain. Do not include a trailing slash. Scroll down to the Authentication section and select Basic Auth from the dropdown. In the Username field, enter your admin email address followed by /token — for example: ops@company.com/token. In the Password field, enter the API token you copied in the previous step. Scroll to the Headers section and add a default header: set the key to Content-Type and the value to application/json. This ensures POST and PUT requests send JSON bodies correctly. Click Save Changes. Retool will validate the connection — if you see a green success indicator, the resource is ready. If you see an authentication error, double-check that the username includes the /token suffix and that the API token was not truncated when you copied it.

With the resource created, open or create a Retool app. In the app's Code panel (bottom panel), click the + button to create a new query. Select your Zendesk API resource. In the query editor, set the Method to GET. For the Path field, enter /tickets.json to retrieve the list of tickets. To search tickets, use the /search.json endpoint instead — set the path to /search.json and in the URL Parameters section, add a parameter with key 'query' and value such as {{ 'type:ticket status:open assignee_id:' + userSelect.value }}. This leverages Zendesk's powerful search API which supports a rich query language. Add a second URL parameter: key 'sort_by' with value 'updated_at', and a third: key 'sort_order' with value 'desc'. Add a fourth parameter: key 'per_page' with value {{ pagination.pageSize || 25 }}. In the Transformer section of the query (click the Advanced tab), enable the transformer toggle and write a JavaScript transformer to reshape the response. The search endpoint returns results in a 'results' array, while the tickets endpoint returns them in a 'tickets' array. Your transformer should normalize this. Name the query 'getTickets' and set it to run when the app loads by toggling 'Run query when app loads' in the query settings.

1// Transformer for Zendesk ticket list
2const tickets = data.results || data.tickets || [];
3return tickets.map(ticket => ({
4  id: ticket.id,
5  subject: ticket.subject,
6  status: ticket.status,
7  priority: ticket.priority || 'normal',
8  requester_id: ticket.requester_id,
9  assignee_id: ticket.assignee_id,
10  created_at: new Date(ticket.created_at).toLocaleDateString(),
11  updated_at: new Date(ticket.updated_at).toLocaleDateString(),
12  url: `https://yoursubdomain.zendesk.com/agent/tickets/${ticket.id}`
13}));

Now build the visual dashboard. From the component panel on the right side of the Retool editor, drag a Table component onto the canvas. In the Table's Data property (right panel), set the value to {{ getTickets.data }}. The table automatically creates columns from the transformer output keys. Configure the visible columns by clicking on the Table and using the Column Configuration section in the right panel — show: id, subject, status, priority, created_at, updated_at. Set the id column to render as a Link type, with the href set to {{ row.url }}, so agents can click directly to the Zendesk ticket. Add a row above the table with a Text Input component (name it 'searchInput') for search, two Select components for status and priority filters, and a Date Range Picker for created_at filtering. Add a Button labeled 'Search' that triggers the getTickets query on click. Below the table, add a Container with a Form for updating ticket status. Add a Text component displaying 'Update Ticket #{{ ticketsTable.selectedRow.id }}', a Select component with options ['open','pending','hold','solved'] for new status, a Multiline Text Input for an internal comment, and an Update button. Create a second query named 'updateTicket' — set Method to PUT, Path to /tickets/{{ ticketsTable.selectedRow.id }}.json, Body Type to JSON, and Body to: { "ticket": { "status": "{{ statusSelect.value }}", "comment": { "body": "{{ commentInput.value }}", "public": false } } }. In the updateTicket query's On Success handler, add two actions: 'Show notification' with message 'Ticket updated successfully', and 'Trigger query → getTickets' to refresh the list.

1{
2  "method": "PUT",
3  "path": "/tickets/{{ ticketsTable.selectedRow.id }}.json",
4  "body": {
5    "ticket": {
6      "status": "{{ statusSelect.value }}",
7      "comment": {
8        "body": "{{ commentInput.value }}",
9        "public": false
10      }
11    }
12  }
13}

To build an escalation workflow, create a new query named 'escalateTicket'. Set Method to PUT, Path to /tickets/{{ ticketsTable.selectedRow.id }}.json. In the Body, construct a JSON payload that reassigns the ticket to an escalation group and adds an urgent priority tag. First, you need your escalation group's ID — create a helper query named 'getGroups' with GET method and path /groups.json, then use its data to populate a Select component for group selection in your escalation form. For the escalation body, set priority to 'urgent', group_id to {{ groupSelect.value }}, and add a tag 'escalated' to the ticket's tags array. To enrich ticket data with information from your internal systems (a powerful multi-resource pattern), create another query named 'getCustomerData' that uses a different resource — for example, a PostgreSQL resource connected to your customer database. Write a query that joins ticket requester emails to customer records: SELECT c.id, c.plan, c.mrr, c.account_manager FROM customers c WHERE c.email = '{{ getTickets.data.find(t => t.id === ticketsTable.selectedRow.id)?.requester_email }}'. Display this customer context in a side panel next to the ticket detail area. This multi-resource pattern — Zendesk data enriched by internal database data — is one of Retool's most valuable capabilities for support operations teams. For complex integrations involving multiple Zendesk resources, custom transformers, and escalation Workflows, RapidDev's team can help architect and build your Retool support operations solution.

1// Transformer: merge Zendesk ticket data with internal customer records
2const tickets = getTickets.data || [];
3const customers = getCustomerData.data || [];
4
5return tickets.map(ticket => {
6  const customer = customers.find(c => c.requester_id === ticket.requester_id);
7  return {
8    ...ticket,
9    customer_plan: customer?.plan || 'Unknown',
10    customer_mrr: customer?.mrr ? `$${customer.mrr}` : 'N/A',
11    account_manager: customer?.account_manager || 'Unassigned'
12  };
13});

Zendesk's Apps Framework (ZAF) allows you to embed external web content as sidebar apps that appear in the ticket view. To embed your Retool app, first publish it: click the Share button in the top-right of the Retool editor, configure access settings, and copy the published URL. Next, go to the Zendesk Marketplace developer portal (https://developer.zendesk.com/apps/framework/) and create a new private app. In the app's manifest.json, set the location to 'ticket_sidebar' and the URL to your published Retool app URL. To pass the current ticket ID from Zendesk to your Retool app, append a URL parameter: your-retool-url?ticket_id={{ticket.id}} using ZAF's template syntax. In your Retool app, add a URL Parameters data source — in the Code panel, create a query of type 'URL parameters' named 'urlParams'. Reference the ticket ID as {{ urlParams.data.ticket_id }} in your ticket-specific queries. This way, when an agent opens a Zendesk ticket, your Retool sidebar app automatically loads with the correct ticket's data. In the Zendesk Apps Framework configuration, you can also use the ZAF client JavaScript to read additional ticket context (requester email, organization ID) and pass them as URL parameters to your Retool app. Deploy the Zendesk app through the Zendesk Admin Center → Apps and Integrations → Private Apps to make it available to your support team.

1// ZAF client initialization in a Zendesk App manifest.json
2// This goes in your Zendesk app's iframe, not in Retool directly
3// Your Retool app URL receives the ticket_id via URL parameter
4
5{
6  "name": "Retool Customer Context",
7  "author": {
8    "name": "Your Company",
9    "email": "ops@yourcompany.com"
10  },
11  "version": "1.0.0",
12  "frameworkVersion": "2.0",
13  "location": {
14    "support": {
15      "ticket_sidebar": {
16        "url": "https://your-retool-app-url.retool.com/app/zendesk-context?ticket_id={{ticket.id}}&requester={{ticket.requester.email}}"
17      }
18    }
19  }
20}