Desk SDKs JavaScript v1
Desk SDKs JavaScript
Desk SDKs
JavaScript
Version 1

Create your first ticket

Copy link

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.


Requirements

Copy link

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

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

Prerequisite

Copy link

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.


Get started

Copy link

Step 1 Install using npm

Copy link

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

Step 2 Initialize the Desk SDK

Copy link
  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();

Step 3 Authenticate a customer from Sendbird Chat

Copy link

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.
    });
});

Step 4 Create your first ticket

Copy link

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.