# How to integrate Zendesk in Bubble.io: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Beginner
- Time required: 20-25 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Integrating Zendesk with Bubble connects your app to professional customer support infrastructure. This tutorial covers setting up the Zendesk API via the API Connector, creating support tickets from Bubble workflows, syncing ticket status back to your app, and embedding the Zendesk Web Widget for live chat and help center access directly within your Bubble pages.

## Overview: Integrating Zendesk in Bubble

This tutorial shows you how to connect your Bubble app to Zendesk for professional customer support. You will create tickets via API, sync status updates, and embed the Zendesk widget for live chat.

## Before you start

- A Bubble app with the API Connector plugin
- A Zendesk account with API access enabled
- Your Zendesk subdomain and API token
- Basic understanding of the API Connector in Bubble

## Step-by-step guide

### 1. Configure the Zendesk API in the API Connector

Go to Plugins → API Connector → Add another API. Name it 'Zendesk'. Set Authentication to HTTP Basic Auth. The username is your Zendesk email with /token appended (e.g., admin@yourcompany.com/token) and the password is your API token from Zendesk Admin → Channels → API. Set the base URL to https://yoursubdomain.zendesk.com/api/v2. Add a shared header: Content-Type = application/json.

**Expected result:** The Zendesk API is configured with authentication in your API Connector.

### 2. Create tickets from Bubble workflows

Add a new call in the API Connector: 'Create Ticket', POST method, URL: /tickets.json. Set Use as to Action. Add the request body with ticket subject, description, requester email, and priority. In your Bubble app, add a Contact Support button or form. The workflow calls the Zendesk Create Ticket API with the user's input, then shows a confirmation message with the ticket number from the response.

```
{
  "ticket": {
    "subject": "<subject_param>",
    "description": "<description_param>",
    "requester": {
      "email": "<requester_email>"
    },
    "priority": "normal"
  }
}
```

**Expected result:** Support tickets are created in Zendesk when users submit support requests from your Bubble app.

### 3. Sync ticket status between Zendesk and Bubble

Create a SupportTicket Data Type in Bubble with fields: zendesk_ticket_id (text), user (User), subject (text), status (text), last_synced (date). After creating a Zendesk ticket, store the ticket ID in your Bubble database. Create a scheduled backend workflow that runs every 15 minutes, fetches ticket updates from Zendesk using a GET call to /tickets/[ticket_id].json, and updates the local status. Display ticket status on the user's support page.

**Expected result:** Ticket status syncs from Zendesk to your Bubble app automatically.

### 4. Embed the Zendesk Web Widget

The Zendesk Web Widget adds a chat button, help center search, and ticket submission directly in your app. Go to Zendesk Admin → Channels → Widget. Copy the embed script. In Bubble, add an HTML element to your reusable header (so it loads on every page) and paste the Zendesk widget script. The widget appears as a floating button in the corner of your app. Customize its appearance and behavior in the Zendesk Widget settings.

```
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=YOUR_ZENDESK_KEY"></script>
```

**Expected result:** The Zendesk chat widget appears on all pages of your Bubble app.

## Complete code example

File: `API Connector payload`

```json
{
  "API Name": "Zendesk",
  "Authentication": "HTTP Basic Auth",
  "Username": "admin@company.com/token (Private)",
  "Password": "[api_token] (Private)",
  "Base URL": "https://yoursubdomain.zendesk.com/api/v2",
  "Calls": [
    {
      "Name": "Create Ticket",
      "Method": "POST",
      "URL": "/tickets.json",
      "Body": {"ticket": {"subject": "<subj>", "description": "<desc>", "requester": {"email": "<email>"}, "priority": "normal"}},
      "Use as": "Action"
    },
    {
      "Name": "Get Ticket",
      "Method": "GET",
      "URL": "/tickets/[ticket_id].json",
      "Use as": "Data"
    },
    {
      "Name": "List User Tickets",
      "Method": "GET",
      "URL": "/users/[user_id]/tickets/requested.json",
      "Use as": "Data"
    }
  ]
}
```

## Common mistakes

- **Using the plain email as username instead of email/token format** — Zendesk API token authentication requires the /token suffix on the username. Without it, authentication fails with 401 Unauthorized Fix: Use the format: youremail@company.com/token as the username, with the API token as the password
- **Not storing Zendesk ticket IDs in Bubble** — Without storing the Zendesk ticket ID, you cannot sync status updates or let users view their ticket history Fix: Save the Zendesk ticket ID from the creation response in a Bubble SupportTicket Data Type
- **Calling Zendesk API on every page load to check ticket status** — Frequent API calls hit Zendesk rate limits and slow your app Fix: Use a scheduled backend workflow to sync ticket status every 15-30 minutes instead

## Best practices

- Store Zendesk ticket IDs in your Bubble database for status tracking
- Use scheduled backend workflows for status syncing instead of real-time API calls
- Embed the Zendesk Widget for quick access to chat and help center
- Include user context (email, account info) when creating tickets
- Mark Zendesk API credentials as Private in the API Connector
- Test with Zendesk sandbox environment before connecting production

## Frequently asked questions

### Do I need a paid Zendesk plan for API access?

Yes. API access requires a Zendesk plan that includes the API. Most paid plans (Suite Team and above) include API access. Check your plan features in Zendesk Admin.

### Can I use Zendesk webhooks to push updates to Bubble?

Yes. Set up a Zendesk trigger that sends a webhook to a Bubble backend workflow endpoint whenever a ticket status changes. This provides real-time sync instead of polling.

### Can the Zendesk Widget pre-fill user information?

Yes. Add JavaScript to the widget embed that sets the user's name and email from Bubble's Current User data, so they do not have to re-enter it.

### What are Zendesk's API rate limits?

Zendesk allows 400-700 requests per minute depending on your plan. For most Bubble integrations, this is more than sufficient with scheduled syncing.

### Can RapidDev help integrate Zendesk with Bubble?

Yes. RapidDev can set up the full Zendesk integration including ticket creation, status syncing, widget embedding, and webhook-based real-time updates for your Bubble app.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/integrate-zendesk-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/integrate-zendesk-in-bubble