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:

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 / PropertyAction
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

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')

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

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

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

Additional actions

app.close

Closes the popover containing the ticket editor app.

invoke
client.invoke('app.close')