Home
/
Desk
/
JavaScript

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.


Requirements

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

  • NodeJS 10.13.x+ along with npm
  • Sendbird JavaScript SDK 3.0.55 or later

Prerequisite

Before installing Sendbird Desk SDK, contact our sales team to enable Sendbird Desk on your dashboard. If you don't have an account for the 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

Step 1 Install using npm

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

Light Color Skin
Copy
# npm
~$ cd /path/to/your-project
~$ npm install --save sendbird-desk

Or you can use the npm install command to automatically download the Desk SDK. Add the sendbird-desk dependency to the package.json file of your project.

Step 2 Initialize the Desk SDK

  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 SendBird instance with the copied APP_ID.
  3. Pass the initialized SendBird class as an argument to the parameter in the SendBirdDesk.init() method.
  4. Implement the following command in your project path.
Light Color Skin
Copy
SendBirdDesk.init(SendBird);

Step 3 Authenticate a customer from Sendbird Chat

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.

Light Color Skin
Copy
// Use a user ID that is unique to your Sendbird application.
const sb = new SendBird({ appId: APP_ID });
sb.connect(USER_ID, ACCESS_TOKEN, (user, error) => {
    if (error) {
        // Handle error.
    }

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

        // SendBirdDesk is now initialized,
        // and the customer is authenticated and connected to Sendbird server.
        ...
    });

    ...
});

Step 4 Create your first ticket

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.

Light Color Skin
Copy
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 SendBird 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.