React Native Zoho Desk Portal SDK

https://github.com/zoho/react-native-zohodesk-portal-sdk
Admin
An SDK for integrating Zoho Desk's customer portal functionalities into React Native applications,...
Tokens:9,244
Snippets:42
Trust Score:9.6
Update:8 months ago
Show doc for...
Tokens:
Raw
### Install Zoho Desk Portal KB SDK using npm

Source: https://github.com/zoho/react-native-zohodesk-portal-sdk/blob/master/zohodesk-portal-kb/README.md

This command installs the Zoho Desk Portal Knowledge Base SDK package using npm. Ensure you have Node.js and npm installed on your system.

```sh
npm install @zohocorp/zohodesk-portal-kb
```

--------------------------------

### Install Zoho Desk Portal Community SDK using npm

Source: https://github.com/zoho/react-native-zohodesk-portal-sdk/blob/master/zohodesk-portal-community/README.md

This snippet shows how to install the Zoho Desk Portal Community SDK using the npm package manager. Ensure you have Node.js and npm installed on your system.

```sh
npm install @zohocorp/zohodesk-portal-community
```

--------------------------------

### Install Zoho Desk Portal Core SDK using npm

Source: https://github.com/zoho/react-native-zohodesk-portal-sdk/blob/master/zohodesk-portal-core/README.md

This snippet shows how to install the @zohocorp/zohodesk-portal-core package using npm. This is the first step to integrate the SDK into your project.

```sh
npm install @zohocorp/zohodesk-portal-core
```

--------------------------------

### Install ZohoDeskPortalTicket SDK

Source: https://github.com/zoho/react-native-zohodesk-portal-sdk/blob/master/zohodesk-portal-ticket/README.md

Installs the ZohoDeskPortalTicket SDK using npm. This is the first step to integrate Zoho Desk ticketing functionality into your React Native application.

```sh
npm install @zohocorp/zohodesk-portal-ticket
```

--------------------------------

### Install Zoho Desk Portal Configuration SDK

Source: https://github.com/zoho/react-native-zohodesk-portal-sdk/blob/master/zohodesk-portal-configuration/README.md

Installs the Zoho Desk Portal Configuration SDK using npm. This is the first step to integrate the SDK into your React Native project.

```sh
npm install @zohocorp/zohodesk-portal-configuration
```

--------------------------------

### Install Zoho Desk Portal API Kit using npm

Source: https://github.com/zoho/react-native-zohodesk-portal-sdk/blob/master/zohodesk-portal-apikit/README.md

Installs the Zoho Desk Portal API Kit package using npm. This is the first step to integrate the SDK into your React Native project.

```sh
npm install @zohocorp/zohodesk-portal-apikit
```

--------------------------------

### Install ZohoDeskPortalChatKit using npm

Source: https://github.com/zoho/react-native-zohodesk-portal-sdk/blob/master/zohodesk-portal-chatkit/README.md

This snippet shows how to install the ZohoDeskPortalChatKit package using npm. It is a prerequisite for using the SDK in your React Native project.

```sh
npm install @zohocorp/zohodesk-portal-chatkit
```

--------------------------------

### Import ZohoDeskPortalKB in JavaScript

Source: https://github.com/zoho/react-native-zohodesk-portal-sdk/blob/master/zohodesk-portal-kb/README.md

This JavaScript code snippet demonstrates how to import the ZohoDeskPortalKB class from the installed SDK package. This import is the first step to using the SDK's functionalities in your React Native application.

```js
import {ZohoDeskPortalKB} from  '@zohocorp/zohodesk-portal-kb';
```

--------------------------------

### Import ZohoDeskPortalSDK in JavaScript

Source: https://github.com/zoho/react-native-zohodesk-portal-sdk/blob/master/zohodesk-portal-apikit/README.md

Demonstrates how to import the ZohoDeskPortalSDK class from the installed package. This import statement is necessary to use the SDK's functionalities in your JavaScript code.

```javascript
import {ZohoDeskPortalSDK} from '@zohocorp/zohodesk-portal-apikit';
```

--------------------------------

### Interact with Chat Modules (JavaScript)

Source: https://context7.com/zoho/react-native-zohodesk-portal-sdk/llms.txt

This code demonstrates how to interact with various chat support features like Guided Conversation, Answer Bot, and Business Messenger using the ZohoDeskPortalChatKit module. It includes showing each chat type, setting and updating session variables, controlling the end chat popup, and clearing chat history.

```javascript
import { ZohoDeskPortalChatKit } from '@zohocorp/zohodesk-portal-chatkit';

// Show Guided Conversation
ZohoDeskPortalChatKit.showGC();

// Show Answer Bot
ZohoDeskPortalChatKit.showAnswerBot();

// Show Business Messenger
ZohoDeskPortalChatKit.showBM();

// Set session variables for Guided Conversation
ZohoDeskPortalChatKit.setGCSessionVariable({
  userId: "user123",
  plan: "premium",
  region: "US"
});

// Update session variables for Guided Conversation
ZohoDeskPortalChatKit.updateGCSessionVariable({
  lastActivity: "2024-01-15T10:30:00Z"
});

// Set session variables for Business Messenger
ZohoDeskPortalChatKit.setBMSessionVariable({
  accountId: "acc456",
  userType: "enterprise"
});

// Update session variables for Business Messenger
ZohoDeskPortalChatKit.updateBMSessionVariable({
  supportTier: "priority"
});

// Hide the end chat confirmation popup
ZohoDeskPortalChatKit.hideEndChatPopupWindow(true);

// Clear chat history for each module
ZohoDeskPortalChatKit.clearGC();
ZohoDeskPortalChatKit.clearBM();
ZohoDeskPortalChatKit.clearAnswerBot();
```

--------------------------------

### Import ZohoDeskPortalChatKit in JavaScript

Source: https://github.com/zoho/react-native-zohodesk-portal-sdk/blob/master/zohodesk-portal-chatkit/README.md

This snippet demonstrates how to import the ZohoDeskPortalChatKit class from the installed package into your JavaScript code. This is the first step to initializing and using the chat functionality.

```javascript
import {ZohoDeskPortalChatKit} from '@zohocorp/zohodesk-portal-chatkit';
```

--------------------------------

### Configure and Show Portal Home Screen (JavaScript)

Source: https://context7.com/zoho/react-native-zohodesk-portal-sdk/llms.txt

This snippet demonstrates how to configure and display the main help center home screen using the ZohoDeskPortalHome module. It allows customization of visible sections like tickets, knowledge base, and chat. It also includes setting up an observer for dismiss events.

```javascript
import { ZohoDeskPortalHome } from '@zohocorp/zohodesk-portal-core';

// Configure home screen features
ZohoDeskPortalHome.setConfiguration({
  enableHeaderLogo: true,
  enableCommunity: true,
  enableHelpCenter: true,
  enableMyTicket: true,
  enableCreateTicket: true,
  enableAddTopic: true,
  showChat: true,
  showGC: true,           // Guided Conversation
  showAnswerBot: true,
  showBM: true            // Business Messenger
});

// Show the home screen
ZohoDeskPortalHome.show();

// Listen for dismiss events
const subscription = ZohoDeskPortalHome.setDismissObserver((event) => {
  console.log("Portal home dismissed:", event);
  // Clean up subscription when component unmounts
  // subscription.remove();
});
```

--------------------------------

### Initialize and Authenticate Zoho Desk SDK

Source: https://context7.com/zoho/react-native-zohodesk-portal-sdk/llms.txt

Initializes the Zoho Desk Portal SDK with organization credentials, enables logging, authenticates users via JWT, checks sign-in status, and manages push notifications. This is a prerequisite for using other SDK features.

```javascript
import { ZohoDeskPortalSDK } from '@zohocorp/zohodesk-portal-apikit';

// Initialize the SDK with your organization credentials
// orgId: Your Zoho Desk organization ID
// appId: Your ASAP application ID
// dc: Data center region (e.g., "US", "EU", "IN", "AU", "CN", "JP")
ZohoDeskPortalSDK.initialise("your-org-id", "your-app-id", "US");

// Enable logging for debugging (disable in production)
ZohoDeskPortalSDK.enableLogs();

// Authenticate user with JWT token
const jwtToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...";
ZohoDeskPortalSDK.loginWithJWTToken(
  jwtToken,
  (success) => {
    console.log("Login successful:", success);
  },
  (error) => {
    console.error("Login failed:", error);
  }
);

// Check if user is currently signed in
ZohoDeskPortalSDK.isUserSignedIn((isSignedIn) => {
  console.log("User signed in:", isSignedIn);
});

// Enable push notifications
ZohoDeskPortalSDK.enablePush();

// Logout and clear session
ZohoDeskPortalSDK.logout(
  () => console.log("Logged out successfully"),
  (error) => console.error("Logout error:", error)
);

// Clear all cached data
ZohoDeskPortalSDK.clearData();

// Disable push notifications
ZohoDeskPortalSDK.disablePush();
```

--------------------------------

### Configure and Show Knowledge Base (JavaScript)

Source: https://context7.com/zoho/react-native-zohodesk-portal-sdk/llms.txt

This code configures the behavior of the knowledge base module, such as disabling like/dislike buttons or search within articles. It shows how to display the main knowledge base screen, navigate to a specific article using its permalink, or to a category.

```javascript
import { ZohoDeskPortalKB } from '@zohocorp/zohodesk-portal-kb';

// Configure knowledge base behavior
ZohoDeskPortalKB.setConfiguration({
  disableArticleLike: false,
  disableArticleDislike: false,
  disableArticleDetailSearch: false
});

// Show the knowledge base home screen
ZohoDeskPortalKB.show();

// Navigate directly to a specific article using permalink
ZohoDeskPortalKB.showArticle("getting-started-guide");

// Navigate to a specific category using permalink
ZohoDeskPortalKB.showCategory("faq");
```

--------------------------------

### Configure and Show Community Forums (JavaScript)

Source: https://context7.com/zoho/react-native-zohodesk-portal-sdk/llms.txt

This snippet illustrates how to configure user permissions for community forums, such as editing or deleting topics and replies. It shows how to display the community forums, navigate to a specific topic by its ID, and fetch popular or most discussed topics using the SDK.

```javascript
import { ZohoDeskPortalCommunity } from '@zohocorp/zohodesk-portal-community';
import { ZohoDeskPortalSDK } from '@zohocorp/zohodesk-portal-apikit';

// Configure community permissions
ZohoDeskPortalCommunity.setConfiguration({
  isTopicEditAllowed: true,
  isTopicDeleteAllowed: true,
  isReplyAllowed: true,
  isReplyEditAllowed: true,
  isReplyDeleteAllowed: true,
  isTopicDetailSearchAllowed: true
});

// Show the community forums
ZohoDeskPortalCommunity.show();

// Navigate to a specific topic by ID
ZohoDeskPortalCommunity.showTopic("1234567890");

// Fetch most popular topics programmatically
const topicParams = {
  categoryId: "123456789",
  from: 0,
  limit: 10
};

ZohoDeskPortalSDK.getMostPopularTopics(
  topicParams,
  (topics) => {
    topics.forEach(topic => {
      console.log("Popular topic:", topic);
    });
  },
  (error) => {
    console.error("Failed to fetch popular topics:", error);
  }
);

// Fetch most discussed topics
ZohoDeskPortalSDK.getMostDiscussedTopics(
  topicParams,
  (topics) => {
    topics.forEach(topic => {
      console.log("Discussed topic:", topic);
    });
  },
  (error) => {
    console.error("Failed to fetch discussed topics:", error);
  }
);
```

--------------------------------

### Configure Zoho Desk Portal SDK Settings and Theming

Source: https://context7.com/zoho/react-native-zohodesk-portal-sdk/llms.txt

Provides global SDK settings for language, theme, feature toggles, and security configurations. This module allows customization of the SDK's behavior and appearance, including UI elements, feature availability, and security-related options.

```javascript
import { ZohoDeskPortalConfiguration } from '@zohocorp/zohodesk-portal-configuration';

// Set SDK language
ZohoDeskPortalConfiguration.setSDKLanguage("en");

// Set theme (1 = light, 2 = dark, 3 = system)
ZohoDeskPortalConfiguration.setTheme(1);

// Configure global SDK settings
ZohoDeskPortalConfiguration.setConfiguration({
  // UI Configuration
  disableSidemenu: false,
  disableLanguageChooser: false,
  disablePoweredByZoho: false,
  disableGlobalSearch: false,

  // Feature Toggles
  disableKB: false,
  disableCommunity: false,
  disableSubmitTicket: false,
  disableAddTopic: false,
  disableMyTicket: false,
  disableGuidedConversation: false,
  disableAnswerBot: false,
  disableBusinessMessanger: false,
  disableSalesIQ: false,
  enableModuleBasedSearch: false,

  // Security Configurations
  disableDownloadAttachment: false,
  disableUploadAttachment: false,
  disableScreenShot: false,
  disableCopyPaste: false
});

```

--------------------------------

### Import ZohoDeskPortalHome from SDK (JavaScript)

Source: https://github.com/zoho/react-native-zohodesk-portal-sdk/blob/master/zohodesk-portal-core/README.md

This snippet demonstrates how to import the ZohoDeskPortalHome class from the @zohocorp/zohodesk-portal-core package in a JavaScript environment. This import is necessary to utilize the SDK's functionalities.

```javascript
import {ZohoDeskPortalHome} from '@zohocorp/zohodesk-portal-core';
```

--------------------------------

### Ticket UI Module

Source: https://context7.com/zoho/react-native-zohodesk-portal-sdk/llms.txt

Provides native UI components for viewing and managing support tickets, with customizable configuration options.

```APIDOC
## Ticket UI Module Configuration

### Description
Configures the behavior and appearance of the native ticket UI module.

### Method
`ZohoDeskPortalTicket.setConfiguration(config)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **config** (Object) - Required - An object containing configuration options.
  - **isReplyAllowed** (boolean) - Optional - Whether replies are allowed.
  - **isCommentAllowed** (boolean) - Optional - Whether comments are allowed.
  - **isTicketUpdateAllowed** (boolean) - Optional - Whether ticket updates are allowed.
  - **isCommentEditAllowed** (boolean) - Optional - Whether comments can be edited.
  - **isCommentDeleteAllowed** (boolean) - Optional - Whether comments can be deleted.
  - **isAddTicketAllowed** (boolean) - Optional - Whether adding new tickets is allowed.
  - **isCustomerHappinessThreadAllowed** (boolean) - Optional - Whether the customer happiness thread is shown.
  - **isTicketChannelAllowed** (boolean) - Optional - Whether ticket channels are shown.
  - **isTicketPropertiesAllowed** (boolean) - Optional - Whether ticket properties are shown.
  - **disableTicketDetailSearch** (boolean) - Optional - Whether to disable search within ticket details.

### Request Example
```javascript
ZohoDeskPortalTicket.setConfiguration({
  isReplyAllowed: true,
  isCommentAllowed: true,
  isTicketUpdateAllowed: true,
  isCommentEditAllowed: true,
  isCommentDeleteAllowed: true,
  isAddTicketAllowed: true,
  isCustomerHappinessThreadAllowed: true,
  isTicketChannelAllowed: true,
  isTicketPropertiesAllowed: true,
  disableTicketDetailSearch: false
});
```

## Show Ticket List

### Description
Displays the native ticket list screen.

### Method
`ZohoDeskPortalTicket.show()`

### Parameters
None

### Request Example
```javascript
ZohoDeskPortalTicket.show();
```

## Show Ticket Detail

### Description
Navigates directly to the detail view of a specific ticket.

### Method
`ZohoDeskPortalTicket.showTicketDetail(ticketId)`

### Parameters
#### Path Parameters
- **ticketId** (string) - Required - The ID of the ticket to display.

### Request Example
```javascript
ZohoDeskPortalTicket.showTicketDetail("1234567890123456789");
```
```

--------------------------------

### Import ZohoDeskPortalCommunity in JavaScript

Source: https://github.com/zoho/react-native-zohodesk-portal-sdk/blob/master/zohodesk-portal-community/README.md

This snippet demonstrates how to import the ZohoDeskPortalCommunity class from the SDK in a JavaScript environment. This is typically the first step before using any functionalities provided by the SDK.

```javascript
import {ZohoDeskPortalCommunity} from '@zohocorp/zohodesk-portal-community';
```

--------------------------------

### Import ZohoDeskPortalSalesIQ in JavaScript

Source: https://github.com/zoho/react-native-zohodesk-portal-sdk/blob/master/zohodesk-portal-salesiq/README.md

This snippet demonstrates how to import the ZohoDeskPortalSalesIQ class from the SDK in your JavaScript or TypeScript project. This is typically done at the top of your component or file.

```javascript
import {ZohoDeskPortalSalesIQ} from '@zohocorp/zohodesk-portal-salesiq';
```

--------------------------------

### Integrate Zoho SalesIQ Live Chat

Source: https://context7.com/zoho/react-native-zohodesk-portal-sdk/llms.txt

Integrates Zoho SalesIQ for real-time live chat support. This module allows extensive configuration options for the chat interface, including brand details, guest user information, launcher visibility, conversation titles, and component visibility. It also supports theming for Android and listening for initialization events.

```javascript
import { ZohoDeskPortalSalesIQ } from '@zohocorp/zohodesk-portal-salesiq';

// Set chat brand details
ZohoDeskPortalSalesIQ.setChatBrandDetails("your-app-key", "your-access-key");

// Set guest user information
ZohoDeskPortalSalesIQ.setGuestUser(
  "guest@example.com",
  "John Doe",
  "+1234567890"
);

// Configure launcher visibility
// Options: "always", "never", "whenActiveChat"
ZohoDeskPortalSalesIQ.showLauncher(ZohoDeskPortalSalesIQ.visibilityMode.ALWAYS);

// Set conversation title
ZohoDeskPortalSalesIQ.setConversationTitle("Support Chat");

// Configure chat component visibility
ZohoDeskPortalSalesIQ.setChatVisibility(
  ZohoDeskPortalSalesIQ.chatComponents.PRE_CHAT_FORM,
  true
);
ZohoDeskPortalSalesIQ.setChatVisibility(
  ZohoDeskPortalSalesIQ.chatComponents.SCREENSHOT_OPTION,
  true
);
ZohoDeskPortalSalesIQ.setChatVisibility(
  ZohoDeskPortalSalesIQ.chatComponents.RATING,
  true
);

// Configure additional features
ZohoDeskPortalSalesIQ.setKnowledgeBaseVisibility(true);
ZohoDeskPortalSalesIQ.setConversationVisibility(true);
ZohoDeskPortalSalesIQ.enableDragToDismiss(true);
ZohoDeskPortalSalesIQ.showFeedbackAfterSkip(true);
ZohoDeskPortalSalesIQ.showOfflineMessage(true);
ZohoDeskPortalSalesIQ.hideQueueTime(false);
ZohoDeskPortalSalesIQ.setLoggerEnabled(true);

// Set theme for Android
ZohoDeskPortalSalesIQ.setThemeForAndroid("dark");
ZohoDeskPortalSalesIQ.syncThemeWithOSForAndroid(true);

// Show the SalesIQ chat interface
ZohoDeskPortalSalesIQ.show();

// Listen for initialization events
const successSubscription = ZohoDeskPortalSalesIQ.addSuccessInitListener((event) => {
  console.log("SalesIQ initialized successfully:", event);
});

const errorSubscription = ZohoDeskPortalSalesIQ.addErrorInitListener((event) => {
  console.error("SalesIQ initialization failed:", event);
});

// Available chat components for visibility configuration:
// - PRE_CHAT_FORM, VISITOR_NAME, SCREENSHOT_OPTION, PHOTO_LIBRARY
// - MEDIA_CAPTURE, FILE_SHARING, EMAIL_TRANSCRIPT, RATING
// - FEEDBACK, REOPEN, END, END_WHEN_IN_QUEUE
// - END_WHEN_BOT_CONNECTED, END_WHEN_OPERATOR_CONNECTED, QUEUE_POSITION

```

--------------------------------

### Configure and Show Zoho Desk Ticket UI (JavaScript)

Source: https://context7.com/zoho/react-native-zohodesk-portal-sdk/llms.txt

This snippet shows how to configure the native UI for viewing and managing support tickets using the ZohoDeskPortalTicket module. It allows customization of various ticket management features and provides methods to display the ticket list or a specific ticket detail.

```javascript
import { ZohoDeskPortalTicket } from '@zohocorp/zohodesk-portal-ticket';

// Configure ticket module behavior
ZohoDeskPortalTicket.setConfiguration({
  isReplyAllowed: true,
  isCommentAllowed: true,
  isTicketUpdateAllowed: true,
  isCommentEditAllowed: true,
  isCommentDeleteAllowed: true,
  isAddTicketAllowed: true,
  isCustomerHappinessThreadAllowed: true,
  isTicketChannelAllowed: true,
  isTicketPropertiesAllowed: true,
  disableTicketDetailSearch: false
});

// Show the ticket list screen
ZohoDeskPortalTicket.show();

// Navigate directly to a specific ticket
ZohoDeskPortalTicket.showTicketDetail("1234567890123456789");

```

--------------------------------

### Import ZohoDeskPortalConfiguration in JavaScript

Source: https://github.com/zoho/react-native-zohodesk-portal-sdk/blob/master/zohodesk-portal-configuration/README.md

Imports the ZohoDeskPortalConfiguration class from the SDK. This allows you to use the configuration functionalities within your JavaScript or TypeScript code.

```js
import {ZohoDeskPortalConfiguration} from '@zohocorp/zohodesk-portal-configuration';
```

--------------------------------

### Fetch Products for a Department via SDK

Source: https://context7.com/zoho/react-native-zohodesk-portal-sdk/llms.txt

Retrieves products associated with a specific department, useful for product-based ticket routing. This function takes a department ID and pagination parameters, returning an array of ZDPProduct objects upon successful retrieval or an error object if the request fails.

```javascript
import { ZohoDeskPortalSDK } from '@zohocorp/zohodesk-portal-apikit';

// Fetch products for a department
const departmentId = "123456789";
const productParams = {
  from: 0,
  limit: 50
};

ZohoDeskPortalSDK.getProducts(
  departmentId,
  productParams,
  (products) => {
    // products is an array of ZDPProduct objects
    products.forEach(product => {
      console.log("Product:", product);
    });
  },
  (error) => {
    console.error("Failed to fetch products:", error);
  }
);

```

--------------------------------

### Ticket Submission UI

Source: https://context7.com/zoho/react-native-zohodesk-portal-sdk/llms.txt

Provides a native ticket submission form that can be pre-populated and customized.

```APIDOC
## Pre-fill Ticket Fields

### Description
Sets pre-filled values for ticket fields in the submission form.

### Method
`ZohoDeskPortalSubmitTicket.preFillTicketFields(customizedForms)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **customizedForms** (Array<ZDCustomizedTicketForm>) - Required - An array of customized form objects.
  - **departmentId** (string) - Required - The ID of the department.
  - **layoutId** (string) - Required - The ID of the layout.
  - **fields** (Array<ZDCustomizedTicketField>) - Required - An array of pre-filled ticket field objects.
    - **fieldName** (string) - Required - The name of the field (e.g., "email", "subject", "cf_custom_field").
    - **fieldValue** (string) - Required - The value to pre-fill.
    - **isMandatory** (boolean) - Optional - Indicates if the field is mandatory.

### Request Example
```javascript
const emailField = new ZDCustomizedTicketField("email", "user@example.com", false);
const subjectField = new ZDCustomizedTicketField("subject", "App Feedback", true);
const priorityField = new ZDCustomizedTicketField("priority", "Medium", true);
const customField = new ZDCustomizedTicketField("cf_app_version", "3.0.1", false);

const customizedForm = new ZDCustomizedTicketForm(
  "123456789",  // departmentId
  "987654321",  // layoutId
  [emailField, subjectField, priorityField, customField]
);

ZohoDeskPortalSubmitTicket.preFillTicketFields([customizedForm]);
```

## Set Visible Ticket Fields

### Description
Specifies which ticket fields should be visible in the submission form.

### Method
`ZohoDeskPortalSubmitTicket.setFieldsListTobeShown(visibleFieldsList)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **visibleFieldsList** (Array<ZDVisibleTicketField>) - Required - An array of objects specifying visible fields.
  - **departmentId** (string) - Required - The ID of the department.
  - **layoutId** (string) - Required - The ID of the layout.
  - **fields** (Array<string>) - Required - An array of field names to be shown.

### Request Example
```javascript
const visibleFields = new ZDVisibleTicketField(
  "123456789",  // departmentId
  "987654321",  // layoutId
  ["subject", "description", "priority", "cf_app_version"]
);

ZohoDeskPortalSubmitTicket.setFieldsListTobeShown([visibleFields]);
```

## Show Ticket Submission Form

### Description
Displays the native ticket submission form.

### Method
`ZohoDeskPortalSubmitTicket.show()`

### Parameters
None

### Request Example
```javascript
ZohoDeskPortalSubmitTicket.show();
```

## Get Callback on Ticket Creation

### Description
Sets a callback function to be executed when a ticket is successfully created via the submission form.

### Method
`ZohoDeskPortalSubmitTicket.getCallbackOnCreate(successCallback, errorCallback)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

### Request Example
```javascript
ZohoDeskPortalSubmitTicket.getCallbackOnCreate(
  (ticket) => {
    console.log("Ticket submitted:", {
      id: ticket.id,
      ticketNumber: ticket.ticketNumber,
      subject: ticket.subject
    });
  },
  (error) => {
    console.error("Ticket submission failed:", error);
  }
);
```

### Response
#### Success Response
- **ticket** (Object) - An object representing the submitted ticket.
  - **id** (string) - The unique ID of the ticket.
  - **ticketNumber** (string) - The ticket number.
  - **subject** (string) - The subject of the ticket.

#### Response Example
```json
{
  "id": "ticket_id_456",
  "ticketNumber": "#9876543210",
  "subject": "App Feedback"
}
```
```

--------------------------------

### Ticket Management API

Source: https://context7.com/zoho/react-native-zohodesk-portal-sdk/llms.txt

APIs for fetching ticket fields and forms, creating tickets programmatically, and adding attachments.

```APIDOC
## Get Ticket Fields

### Description
Retrieves the fields available for creating or updating tickets within a specific department and layout.

### Method
`ZohoDeskPortalSDK.getTicketFields(params, featureFlags, successCallback, errorCallback)`

### Parameters
#### Path Parameters
None

#### Query Parameters
- **departmentId** (string) - Required - The ID of the department.
- **layoutId** (string) - Required - The ID of the layout.

#### Feature Flags
- **includeCustomFields** (boolean) - Optional - Whether to include custom fields in the response.

### Request Example
```javascript
const ticketFieldParams = {
  departmentId: "123456789",
  layoutId: "987654321"
};
const featureFlags = {
  includeCustomFields: true
};
ZohoDeskPortalSDK.getTicketFields(ticketFieldParams, featureFlags, (fields) => { /* ... */ }, (error) => { /* ... */ });
```

### Response
#### Success Response (200)
- **fields** (Array<TicketField>) - An array of ticket field objects.

#### Response Example
```json
[
  {
    "id": "field_id_1",
    "label": "Subject",
    "type": "text",
    "required": true
  }
]
```

## Get Ticket Form

### Description
Fetches the complete configuration for a ticket form, including all its fields and settings.

### Method
`ZohoDeskPortalSDK.getTicketForm(params, featureFlags, successCallback, errorCallback)`

### Parameters
#### Path Parameters
None

#### Query Parameters
- **departmentId** (string) - Required - The ID of the department.
- **layoutId** (string) - Required - The ID of the layout.

#### Feature Flags
- **includeCustomFields** (boolean) - Optional - Whether to include custom fields in the response.

### Request Example
```javascript
const ticketFieldParams = {
  departmentId: "123456789",
  layoutId: "987654321"
};
const featureFlags = {
  includeCustomFields: true
};
ZohoDeskPortalSDK.getTicketForm(ticketFieldParams, featureFlags, (ticketForm) => { /* ... */ }, (error) => { /* ... */ });
```

### Response
#### Success Response (200)
- **ticketForm** (Object) - An object representing the ticket form configuration.

#### Response Example
```json
{
  "departmentId": "123456789",
  "layoutId": "987654321",
  "fields": [
    {
      "id": "field_id_1",
      "label": "Subject",
      "type": "text",
      "required": true
    }
  ]
}
```

## Create Ticket

### Description
Creates a new support ticket programmatically with the provided details.

### Method
`ZohoDeskPortalSDK.createTicket(ticketData, successCallback, errorCallback)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **departmentId** (string) - Required - The ID of the department.
- **layoutId** (string) - Required - The ID of the layout.
- **subject** (string) - Required - The subject of the ticket.
- **description** (string) - Optional - The detailed description of the issue.
- **priority** (string) - Optional - The priority level of the ticket (e.g., "High", "Medium", "Low").
- **email** (string) - Optional - The email address of the customer.
- **cf** (Object) - Optional - An object containing custom field values.
  - **cf_field_name** (string) - The value for the custom field.

### Request Example
```javascript
const ticketData = {
  departmentId: "123456789",
  layoutId: "987654321",
  subject: "Issue with mobile app login",
  description: "Unable to login to the mobile app after updating to version 2.0",
  priority: "High",
  email: "customer@example.com",
  cf: {
    cf_app_version: "2.0.0",
    cf_device_type: "iPhone 14"
  }
};
ZohoDeskPortalSDK.createTicket(ticketData, (ticket) => { /* ... */ }, (error) => { /* ... */ });
```

### Response
#### Success Response (200)
- **ticket** (ZDPTicket) - An object representing the created ticket.
  - **id** (string) - The unique ID of the ticket.
  - **ticketNumber** (string) - The ticket number.
  - **subject** (string) - The subject of the ticket.
  - **status** (string) - The current status of the ticket.
  - **priority** (string) - The priority of the ticket.
  - **createdTime** (string) - The timestamp when the ticket was created.

#### Response Example
```json
{
  "id": "ticket_id_123",
  "ticketNumber": "#1234567890",
  "subject": "Issue with mobile app login",
  "status": "Open",
  "priority": "High",
  "createdTime": "2023-10-27T10:00:00Z"
}
```

## Add Attachments

### Description
Adds an attachment to a ticket.

### Method
`ZohoDeskPortalSDK.addAttachments(fileName, fileData, successCallback, errorCallback)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **fileName** (string) - Required - The name of the file to attach.
- **fileData** (string) - Required - The base64-encoded data of the file.

### Request Example
```javascript
const fileName = "screenshot.png";
const fileData = "base64-encoded-file-data";
ZohoDeskPortalSDK.addAttachments(fileName, fileData, (attachment) => { /* ... */ }, (error) => { /* ... */ });
```

### Response
#### Success Response (200)
- **attachment** (Object) - An object representing the uploaded attachment.

#### Response Example
```json
{
  "id": "attachment_id_123",
  "fileName": "screenshot.png",
  "contentType": "image/png"
}
```
```

--------------------------------

### Manage Zoho Desk Tickets Programmatically (JavaScript)

Source: https://context7.com/zoho/react-native-zohodesk-portal-sdk/llms.txt

This snippet demonstrates how to interact with the Zoho Desk Portal SDK to fetch ticket fields and forms, create new tickets programmatically, and add attachments. It requires the ZohoDeskPortalSDK to be imported and utilizes callback functions for success and error handling.

```javascript
import { ZohoDeskPortalSDK } from '@zohocorp/zohodesk-portal-apikit';

// Get ticket fields for a department/layout
const ticketFieldParams = {
  departmentId: "123456789",
  layoutId: "987654321"
};

const featureFlags = {
  includeCustomFields: true
};

ZohoDeskPortalSDK.getTicketFields(
  ticketFieldParams,
  featureFlags,
  (fields) => {
    // fields is an array of TicketField objects
    fields.forEach(field => {
      console.log("Field:", field);
    });
  },
  (error) => {
    console.error("Failed to fetch ticket fields:", error);
  }
);

// Get complete ticket form configuration
ZohoDeskPortalSDK.getTicketForm(
  ticketFieldParams,
  featureFlags,
  (ticketForm) => {
    console.log("Ticket Form:", ticketForm);
  },
  (error) => {
    console.error("Failed to fetch ticket form:", error);
  }
);

// Create a ticket programmatically
const ticketData = {
  departmentId: "123456789",
  layoutId: "987654321",
  subject: "Issue with mobile app login",
  description: "Unable to login to the mobile app after updating to version 2.0",
  priority: "High",
  email: "customer@example.com",
  cf: {
    cf_app_version: "2.0.0",
    cf_device_type: "iPhone 14"
  }
};

ZohoDeskPortalSDK.createTicket(
  ticketData,
  (ticket) => {
    // ticket is a ZDPTicket object
    console.log("Ticket created:", {
      id: ticket.id,
      ticketNumber: ticket.ticketNumber,
      subject: ticket.subject,
      status: ticket.status,
      priority: ticket.priority,
      createdTime: ticket.createdTime
    });
  },
  (error) => {
    console.error("Failed to create ticket:", error);
  }
);

// Add attachments to a ticket
const fileName = "screenshot.png";
const fileData = "base64-encoded-file-data";

ZohoDeskPortalSDK.addAttachments(
  fileName,
  fileData,
  (attachment) => {
    console.log("Attachment uploaded:", attachment);
  },
  (error) => {
    console.error("Failed to upload attachment:", error);
  }
);

```

--------------------------------

### Import ZohoDeskPortalTicket and ZohoDeskPortalSubmitTicket

Source: https://github.com/zoho/react-native-zohodesk-portal-sdk/blob/master/zohodesk-portal-ticket/README.md

Imports the necessary components, ZohoDeskPortalTicket and ZohoDeskPortalSubmitTicket, from the SDK. These components are essential for interacting with Zoho Desk ticketing features.

```js
import {ZohoDeskPortalTicket, ZohoDeskPortalSubmitTicket} from '@zohocorp/zohodesk-portal-ticket';
```

--------------------------------

### Fetch Zoho Desk Departments and Layouts

Source: https://context7.com/zoho/react-native-zohodesk-portal-sdk/llms.txt

Retrieves a list of all available departments within the Zoho Desk organization and fetches form layouts associated with a specific department. These are used for ticket creation workflows.

```javascript
import { ZohoDeskPortalSDK } from '@zohocorp/zohodesk-portal-apikit';

// Fetch all departments
ZohoDeskPortalSDK.getDepartments(
  (departments) => {
    // departments is an array of Department objects
    departments.forEach(dept => {
      console.log("Department:", {
        id: dept.id,
        name: dept.name,
        nameInCustomerPortal: dept.nameInCustomerPortal,
        description: dept.deptDescription,
        photoURL: dept.photoURL,
        layoutCount: dept.layoutCount
      });
    });
  },
  (error) => {
    console.error("Failed to fetch departments:", error);
  }
);

// Fetch layouts for a specific department
const layoutParams = {
  departmentId: "123456789",
  from: 0,
  limit: 50
};

ZohoDeskPortalSDK.getLayouts(
  layoutParams,
  (layouts) => {
    // layouts is an array of FormLayout objects
    layouts.forEach(layout => {
      console.log("Layout:", layout);
    });
  },
  (error) => {
    console.error("Failed to fetch layouts:", error);
  }
);
```

--------------------------------

### Pre-fill and Customize Ticket Submission UI (JavaScript)

Source: https://context7.com/zoho/react-native-zohodesk-portal-sdk/llms.txt

This snippet demonstrates how to use the ZohoDeskPortalSubmitTicket module to present a native ticket submission form. It allows pre-filling fields with specific values and controlling which fields are visible to the user. Callbacks are provided for handling successful ticket creation or submission errors.

```javascript
import {
  ZohoDeskPortalSubmitTicket,
  ZDCustomizedTicketField,
  ZDCustomizedTicketForm,
  ZDVisibleTicketField
} from '@zohocorp/zohodesk-portal-ticket';

// Create pre-filled ticket fields
const emailField = new ZDCustomizedTicketField("email", "user@example.com", false);
const subjectField = new ZDCustomizedTicketField("subject", "App Feedback", true);
const priorityField = new ZDCustomizedTicketField("priority", "Medium", true);
const customField = new ZDCustomizedTicketField("cf_app_version", "3.0.1", false);

// Create a customized form with pre-filled fields
const customizedForm = new ZDCustomizedTicketForm(
  "123456789",  // departmentId
  "987654321",  // layoutId
  [emailField, subjectField, priorityField, customField]
);

// Apply pre-filled fields
ZohoDeskPortalSubmitTicket.preFillTicketFields([customizedForm]);

// Specify which fields should be visible
const visibleFields = new ZDVisibleTicketField(
  "123456789",  // departmentId
  "987654321",  // layoutId
  ["subject", "description", "priority", "cf_app_version"]
);

ZohoDeskPortalSubmitTicket.setFieldsListTobeShown([visibleFields]);

// Show the ticket submission form
ZohoDeskPortalSubmitTicket.show();

// Get callback when ticket is created
ZohoDeskPortalSubmitTicket.getCallbackOnCreate(
  (ticket) => {
    console.log("Ticket submitted:", {
      id: ticket.id,
      ticketNumber: ticket.ticketNumber,
      subject: ticket.subject
    });
  },
  (error) => {
    console.error("Ticket submission failed:", error);
  }
);

```

--------------------------------

### Update User Profile Information via SDK

Source: https://context7.com/zoho/react-native-zohodesk-portal-sdk/llms.txt

Allows updating user profile information for authenticated users within the Zoho Desk Portal. This method accepts a profile parameters object and provides callbacks for success and error handling, returning a ZDPProfile object upon successful update.

```javascript
import { ZohoDeskPortalSDK } from '@zohocorp/zohodesk-portal-apikit';

// Update user profile information
const profileParams = {
  displayName: "John Doe",
  fullName: "John Michael Doe",
  mobile: "+1234567890",
  phone: "+1987654321",
  twitter: "@johndoe",
  facebook: "johndoe"
};

ZohoDeskPortalSDK.updateUserInformation(
  profileParams,
  (profile) => {
    // profile is a ZDPProfile object
    console.log("Profile updated:", {
      id: profile.id,
      displayName: profile.displayName,
      fullName: profile.fullName,
      emailID: profile.emailID,
      timeZone: profile.timeZone,
      countryLocale: profile.countryLocale,
      photoURL: profile.photoURL,
      joiningTime: profile.joiningTime
    });
  },
  (error) => {
    console.error("Failed to update profile:", error);
  }
);

```
Tokens:
Raw