Create your first ticket

Sendbird Desk SDK for JavaScript lets you easily initialize, configure, and build the customer-support related functionalities to a client app. When a customer asks for help through live, in-app support built with the Desk SDK, agents receive those messages as tickets and can start a conversation on the Sendbird Dashboard. This page walks you through the quick steps to create your first ticket by installing and initializing the Desk SDK.

Note: As Sendbird Desk works based on Sendbird Chat, the interaction between users is built and provided by Sendbird Chat.

The requirements of the Desk SDK for JavaScript are as below:

• NodeJS 18+ along with npm
• Sendbird JavaScript SDK 4.9.x or later

Before installing Sendbird Desk SDK, you will need an account on Sendbird Dashboard. Sign up to create a Sendbird application first.

Note: A Sendbird application gets paired up with one client app. Agents can support customers across all platforms, but customers from different Sendbird applications are excluded because all data is limited to the scope of a single application.

Install the Desk SDK for JavaScript with npm by entering the command below on the command line.

# npm
~$ cd /path/to/your-project
~$ npm install --save sendbird-desk

1. Copy the APP_ID of your Sendbird application from the dashboard. The same APP_ID must be used for both Chat and Desk SDKs.
2. Initialize the SendbirdChat instance with the copied APP_ID.
3. Pass the initialized SendbirdChat class as an argument to the parameter in the SendBirdDesk.init() method.

import SendbirdChat from '@sendbird/chat';
import SendBirdDesk, { Ticket } from 'sendbird-desk';

// The USER_ID below should be unique to your Sendbird application.
async function connectDesk() {
    const params = {
        appId: APP_ID,
        modules: [new GroupChannelModule()],
    }
    const sb = SendbirdChat.init(params);
    try {
        await sb.connect(USER_ID);
        SendBirdDesk.init(sb);
        SendBirdDesk.authenticate(
            USER_ID,
            // authentication callback
            () => {
                // The customer is authenticated and connected to the Sendbird server.
            },
        );
        // The customer is authenticated and connected to the Sendbird server.
    } catch (error) {
        // Handle error.
    }
}
// Running the connectDesk() function.
connectDesk();

Every ticket in Sendbird Desk is mapped to a group channel in Sendbird Chat because messages within a ticket are handled by Sendbird Chat. Therefore, a customer needs authentication in both the Chat SDK and the Desk SDK with the same user ID. Use the sb.connect() method to send and receive a message and the SendBirdDesk.authenticate() method to retrieve or update a ticket.

// The USER_ID below should be unique to your Sendbird application.
const params = {
    appId: APP_ID,
    modules: [new GroupChannelModule()],
}
const sb = SendbirdChat.init(params);
// ACCESS_TOKEN is optional.
sb.connect(USER_ID, ACCESS_TOKEN, (user, error) => {
    if (error) {
        // Handle error.
    }

    SendBirdDesk.init(sb);

    SendBirdDesk.authenticate(USER_ID, ACCESS_TOKEN,
        (user, error) => {
            if (error) {
                // Handle error.
            }

            // SendBirdDesk is now initialized,
            // and the customer is authenticated and connected to the Sendbird server.
            // The customer can message and chat with an agent.
    });
});

Implement the Ticket.create() method to create a new ticket either before or after the customer’s initial message. Once a ticket is successfully created in the Desk server, you can access the ticket and its channel through the callback from the server. When a conversation starts, the ticket is assigned to an available agent by the Desk server while messages are sent and received through the Chat SDK. However, until a customer sends the first message, agents can’t see the ticket on the dashboard.

Ticket.create(TICKET_TITLE, USER_NAME, (ticket, error) => {
    if (error) {
        // Handle error.
    }

    // The ticket is created.
    // The customer and agent can chat with each other by sending a message through the ticket.channel.sendUserMessage() or sendFileMessage().
    // The ticket.channel property indicates the group channel object within the ticket.
});

Note: Because the SendbirdChat instance in a client app is connected to Sendbird server, Desk related events are delivered to the Chat SDK's event handlers. The event handlers receive callbacks from the server through the onMessageReceived(), onUserJoined(), and other event callback methods.