Ticket editor

The app is displayed as a button in the toolbar of the ticket's editor. Clicking the button opens the app. A ticket editor app typically adds functionality to the editor.

Example manifest

...
"location": {
  "support": {
    "ticket_editor": {
      "url": "assets/iframe.html",
      "flexible": true
    }
  }
},
...

See Setting the app location.

Each editor app must have an SVG icon named icon_ticket_editor.svg. It must meet the same design specs as SVG icons for nav bar and top bar apps. See Styles and assets.

You can use the global resize action with editor apps, but the dimensions are limited as follows:

• height: 100px - 320px
• width: 100px - 1000px

In addition to objects available in all locations and the ticket sidebar, the following objects, properties, and actions are available in this location:

• Ticket editor object
• Target channel object
• Capabilities object
• Additional properties
• Additional actions

Limited API functionality when a ticket is in Chat mode

When a ticket is in Chat mode, the following APIs will not produce the expected output:

Object / Property	Action
ticket.editor.*	invoke

An API call with these APIs is not attempted and invokes a console.error.

Invoking ticket.editor.insert works in Chat mode and auto-transpiles rich text into plain text (Markdown syntax) in the chat editor.

Note: API restrictions apply to the Chat feature in the Zendesk Agent Workspace.

Events

In addition to the core events, the following events are available to apps in the ticket editor:

• pane.activated

Example:

client.on('pane.activated', function() {
  // handler
});

For details, see pane.activated in the top bar documentation.

• ticket.editor.targetChannel.changed
• ticket.editor.capabilities.changed

Ticket editor object

Represents the editor in the ticket interface.

Actions

• ticket.editor.insert
• ticket.editor.indent
• ticket.editor.outdent
• ticket.editor.bold
• ticket.editor.italic
• ticket.editor.unorderedList
• ticket.editor.orderedList
• ticket.editor.blockquote
• ticket.editor.codespan
• ticket.editor.codeblock
• ticket.editor.hyperlink
• ticket.editor.inlineImage
• ticket.editor.hr
• ticket.editor.targetChannel
• ticket.editor.capabilities

ticket.editor.insert

Inserts a string at the cursor.

Note: When using ticket.editor.insert, HTML comments goes through a HTML sanitizer and normalizer for security reasons and to match the HTML rules for the ticket editor. This involves removing most CSS and some HTML tags which affects table formatting.

invoke

client.invoke('ticket.editor.insert', 'My <b>printer</b> is on fire')

ticket.editor.indent

Increases the indentation of the paragraph that contains the cursor.

invoke

client.invoke('ticket.editor.indent')

ticket.editor.outdent

Decreases the indentation of the paragraph that contains the cursor.

invoke

client.invoke('ticket.editor.outdent')

ticket.editor.bold

Bolds a text selection.

invoke

client.invoke('ticket.editor.bold')

ticket.editor.italic

Italicizes a text selection.

invoke

client.invoke('ticket.editor.italic')

ticket.editor.unorderedList

Starts an unordered list at the cursor.

invoke

client.invoke('ticket.editor.unorderedList')

ticket.editor.orderedList

Starts an ordered list at the cursor.

invoke

client.invoke('ticket.editor.orderedList')

ticket.editor.blockquote

Applies quote formatting to the paragraph that contains the cursor.

invoke

client.invoke('ticket.editor.blockquote')

ticket.editor.codespan

Applies the code font to a text selection. The font is usually the browser's default monospace font.

invoke

client.invoke('ticket.editor.codespan')

ticket.editor.codeblock

Applies the code font to the paragraph that contains the cursor.

invoke

client.invoke('ticket.editor.codeblock')

ticket.editor.hyperlink

Applies a link to a text selection, or inserts it at the cursor if no text is selected. The action displays a modal view to specify the link text and URL.

invoke

client.invoke('ticket.editor.hyperlink')

ticket.editor.inlineImage

Inserts an image at the cursor. You can specify the image as a URL or a base64-encoded string.

The maximum file size for all Zendesk Suite plans is 50 MB.

invoke

URL

client.invoke('ticket.editor.inlineImage', 'http://www.example.com/image.png')

base64-encoded string

client.invoke('ticket.editor.inlineImage', 'data:image/png;base64,iVBORw0KGgoAA…')

ticket.editor.hr

Inserts a horizontal rule (horizontal line) at the cursor.

invoke

client.invoke('ticket.editor.hr')

ticket.editor.targetChannel

Provides details about the editor channel that the agent is currently on.

get

client.get('ticket.editor.targetChannel')

returns

{
  "ticket.editor.targetChannel": {
    //Target Channel object properties
}

See Target Channel properties.

ticket.editor.capabilities

Provides the rich-text capabilities of the channel based on the editor that the agent is currently using.

get

client.get('ticket.editor.capabilities')

returns

{
  "ticket.editor.capabilities": {
    // Capabilities object properties
  }
}

See Capabilities properties.

Target channel object

Properties

• targetChannel.name
• targetChannel.sessionBased
• targetChannel.sessionActive

targetChannel.name

get

client.get('ticket.editor.targetChannel.name')

returns

{
  "ticket.editor.targetChannel.name": string //email, chat, web, facebook, whatapp, etc..
}

This property should only be used for reporting and analytics purposes. Channel to capability mapping may change at any point in the future. When inserting content into the editor, we advise to always reference the Capabilities object to determine what an app is able to render in the editor, and not rely on targetChannel.name.

targetChannel.sessionBased

Specifies if the channel is asynchronous or synchronous. This property could be used to drive agent experience functionality in a Zendesk Support app depending on the immediacy of the channel that the agent is on.

Session-based messaging is defined as communication channels that involve real-time conversations between two parties who are simultaneously participating. Example of session-based messaging include Zendesk Chat and Zendesk Talk conversations. Non-session-based messaging refers to channels featuring conversations that can occur in real-time but are usually asynchronous. Examples include email, social messaging, or web form ticketing.

client.get('ticket.editor.targetChannel.sessionBased')

returns

{
  "ticket.editor.targetChannel.sessionBased": boolean
}

targetChannel.sessionActive

If the current channel of the editor is synchronous, then this property specifies if the channel is currently in a live session or not.

get

client.get('ticket.editor.targetChannel.sessionActive')

returns

{
  "ticket.editor.targetChannel.sessionActive": boolean
}

Capabilities object

Properties

• capabilities.richText

capabilities.richText

Specifies if the current channel that the editor is on supports rich-text rendering.

get

client.get('ticket.editor.capabilities.richText')

returns

{
  "ticket.editor.capabilities.richText": boolean
}

Additional properties

• ticket.comment.text
• ticket.comment.attachments

Additional actions

• app.close

app.close

Closes the popover containing the ticket editor app.

invoke

client.invoke('app.close')