Widget Locations

Here, you will be learning about locations in detail. It is one of the keys addressed in "widgets" attribute under ''modules'' of plugin-manifest.json file of your extension. This key defines the location(s) for your widgets. You can render a single widget in multiple locations.

Ticket Detail Page

Ticket detail right panel: desk.ticket.detail.rightpanel

This location refers to a collapsible panel on the right panel of the ticket detail page.

To view your widget:

• Click Marketplace icon which displays a collapsible panel listing all the widgets configured in this location.
• Scroll-down to view your widget, if you have loaded more than one widget.

By default, the widget will load at the right side of the ticket detail page.

Ticket detail subtab: desk.ticket.detail.subtab

It refers to the sub-tab (More Icon) in the ticket detail page.

To view the widget loaded:

• Click More Icon of the ticket, all the widgets installed in this location will be listed.
• Select the widget to be loaded.

The selected widget will be loaded in the entire sub-tab of the ticket.

Ticket detail leftab: desk.ticket.detail.lefttab 

This location refers to the vertical strip on the left side of the ticket detail page.

To view the widget loaded:

• Click the Zoho Desk icon on the vertical stripe of the ticket detail page.The widgets installed in this location will be listed.
• Select the widget to be loaded.
  The selected widget will be loaded on the left side of the ticket detail page.

Ticket detail more action: desk.ticket.detail.moreaction 

This location refers to the more actions icon at the top-right side of the ticket detail page.

To view your widget:

• Click More Action icon.
  The widgets installed in this location will be listed below the other standard ticket-related actions such as Edit, Share, Follow, Delete, and more.
• Select the widget to be loaded from the list.

The selected widget will be loaded on the right side of the ticket detail page.

Ticket thread more action: desk.ticket.thread.moreaction 

This location refers to the more actions icon at the top-right side of an individual thread of the ticket.

To view the widget loaded:

• Click the More Actions icon of ticket's thread.
  The widgets installed in this location will be listed below the other standard thread-related actions such as Reply, Forward, Print, and more.
• Select the widget to be loaded from the list.

The selected widget will be loaded on the right side of the ticket detail page.

Ticket Form Page

Ticket form right panel: desk.ticket.form.rightpanel

This location refers to the Marketplace icon at the top-right side of the Add Ticket form.

To view your widget:

• Click the Marketplace icon which displays a collapsible panel listing all the widgets configured in this location.

Contact Detail Page

Contact detail right panel: desk.contact.detail.rightpanel

This location refers to a collapsible panel on the right panel of the contact detail page.

To view your widget:

• Click Marketplace icon which displays a collapsible panel listing all the widgets configured in this location.
• Scroll-down to view your widget, if you have loaded more than one widget.

Contact detail subtab: desk.contact.detail.subtab

This location refers to the Sub-Tab (More icon) in the contact detail page.

To view your widget:

• Click Marketplace icon.
  The widgets configured in this location will be listed.
• Select the widget to be loaded.

The selected widget will be loaded in the entire sub-tab of the Contact Detail page.

Contact detail lefttab: desk.contact.detail.lefttab

This location refers to the vertical strip on the left side of the contact detail page.

To view the widget loaded:

• Click the Zoho Desk icon on the vertical stripe of the contact detail page.
  The widgets installed in this location will be listed.
• Select the widget to be loaded.
  The selected widget will be loaded on the left side of the contact detail page.

Contact Form Page

Contact form righpanel: desk.contact.form.rightpanel

This location refers to the Marketplace icon at the top-right side of the Add Contact form.

To view your widget:

• Click Marketplace icon which displays a collapsible panel listing all the widgets configured in this location.
   

Account Detail Page

Account detail right panel: desk.account.detail.rightpanel

This location refers to a collapsible panel on the right side of the Account Detail page.

To view your widget:

• Click the Marketplace icon which displays a collapsible panel listing all the widgets configured in this location.
• Scroll-down to view your widget, if you have loaded more than one widget.

Account detail subtab: desk.account.detail.subtab

This location refers to the Sub-Tab (More icon) in the Account Detail page.

To view your widget:

• Click the Marketplace icon.
  The widgets configured in this location will be listed.
• Select the widget to be loaded.

The selected widget will be loaded in the entire sub-tab of the Account Detail page.

Account detail lefttab: desk.account.detail.lefttab

This location refers to the vertical strip on the left side of the Account Detail page.

To view the widget loaded:

• Click Zoho Desk icon on the vertical stripe of the Account Detail page.
  The widgets installed in this location will be listed.
• Select the widget to be loaded.
  The selected widget will be loaded on the left side of the Account Detail page.

Account Form Page

Account form right panel: desk.account.form.rightpanel

This location refers to the Marketplace icon at the top-right side of the Add Account form page.

To view your widget:

• Click Marketplace icon which displays a collapsible panel listing all the widgets configured in this location.

Product Level

Desk topband: desk.topband

This location refers to the top band from where users navigate between Zoho Desk modules.

To view your widget:

• Click the More icon on the top of Zoho Desk portal
  The widgets configured in this location will be listed.
• Select the widget to be loaded.

The selected widget will be loaded on the entire screen of desk.

Desk bottomband: desk.bottomband

This location refers to the Marketplace icon next to the Keyboard Shortcuts icon on the bottom-right side of the Zoho Desk portal.

To view your widget:

• Click Marketplace icon on the bottom of Zoho Desk portal.
  The widgets configured in this location will be listed.
• Select the widget to be loaded.
  The selected widget will be loaded at the bottomband.

Desk Telephony: desk.extension.telephony

This location refers to the Zoho Desk icon next to the Keyboard Shortcuts icon on the bottom-right side of the Zoho Desk portal.

To view the widget:

• Click the Zoho Desk icon on the bottom of Zoho Desk portal.
  The widgets configured in this location will be loaded.

Note: This location is exclusively for telephony-based extensions. There can be only one active telephony extension in a Zoho Desk portal.

Desk background: desk.background

This location is neither visible to end-users nor does it appear in the DOM elements. Extensions installed here will not appear anywhere, but the HTML code for them can be defined as required. The main purpose of this location is to aid inter-widget communication, which refers to the communication between two widgets when they are active. In some cases, one of the widgets might not be active. In such a scenario, data can be pushed from one widget to another using the widget configured in this location.

Extension preference: desk.extension.preference

This location refers to the Configuration tab next to the General Settings tab in the extension details page. The main purpose of this location is to get the configuration details from the end-user. Extensions configured in this location are visible to users with the Support Administrator profile even if the extension visibility setting is not exclusively enabled for the profile. This location is enabled only if all other configuration is completed.

Blueprint Transition page : desk.ticket.blueprint.transition

This location refers to the during transition page while configuring the Blueprint.

To associate your widget with the Blueprint:

After creating the extension, you need to associate it with the Blueprint. When setting up Blueprint during transition, find the operations dropdown menu, which will display the Extensions tab among the menu options.

The extension which you have developed with the location mentioned as Blueprint will be listed. Select the developed extension and its widget from the pop-up list.

The chosen extension will be configured in the Blueprint transition.

Note:

• The extension for the Blueprint can only be configured in the during transition.
• If the developer mode is turned off and on again, you will have to reconfigure the extension and associate it with the Blueprint.

How can the user view your developed widget? 

1. The user will navigate to the ticket detail page; at the bottom of the ticket, Blueprint transitions can be viewed.

 2. When the transition is clicked, the enabled extension and its widget will appear from the right side of the page.

Learn more about widgets in Blueprint.