Zoho Desk Spring '25 update is here!

See what's new
Skip to main content
Zoho desk

ASAP JS API Documentation

Introduction

What is Zoho Desk's ASAP JavaScript API?

Zoho Desk ASAP's JavaScript APIs are client APIs with which we can handle the properties, events, and API calls specific to the new ASAP help widget. These APIs can be used for various actions like data prefilling, tab navigation, and appearance customization within the help widget.

When to use the JavaScript APIs?

Select the necessary JavaScript API, copy and paste the code into your website's source code within the <script> tags and the Zoho Desk's ASAP widget code, and everything else will be handled for you

Info:The selected JavaScript API code should be inserted after the Zoho Desk's ASAP widget Ready function. (window.ZohoDeskAsapReady).

Info:This JavaScript API allows users to open or close the ASAP help widget using custom actions

Open/Close Window

This JavaScript API allows users to open or close the ASAP help widget using custom actions. For example, if a user has a website with a button component labeled "Contact us" and wants to open the ASAP widget when the end-user clicks on it, they can use this JSAPI to open the ASAP help widget.


window.ZohoDeskAsapReady(() => {
            ZohoDeskAsap.invoke('open'); 
});

View Demo
window.ZohoDeskAsapReady(() => {
  ZohoDeskAsap.invoke('close'); 
});

View Demo

Show/Hide Launcher

If users want to show or hide the launcher on their website, they can use this JavaScript API to show or hide it on the dynamic webpage. For instance, if a user intends to activate the ASAP help widget through custom actions and prefers not to display the launcher icon on the website, or if the user has two different pages where they want to display the ASAP help widget on one page and hide it on another, they can use this JavaScript API to show or hide it on the webpage.


window.ZohoDeskAsapReady(function(){
          ZohoDeskAsap.invoke("hide","app.launcher"); 
});    

View Demo
window.ZohoDeskAsapReady(function(){
  ZohoDeskAsap.invoke("show","app.launcher"); 
});    

View Demo
Info:If a user wants to redirect the page, they can use this JavaScript API to route the particular page.

Route to the KB category list

If a user wants to redirect the page to the category list page, they can use this JavaScript API to route the particular page. For example, a user has embedded ASAP on their website and wants to route the screen to the category list when the end-user clicks the ASAP help widget.


ZohoDeskAsapReady(function() {
          ZohoDeskAsap.invoke("routeTo",{ page: "kb.category.list" });
})        

View Demo

Route to the KB category detail page

If a user wants to redirect the page to the category detail page, they can use this JavaScript API to route the particular page. For example, a user has embedded ASAP on their website and wants to route the screen to the category detail page when the end-user clicks the ASAP help widget.


Param Name
Data Type
Description

categoryId

string (optional)

If a user wants to redirect the page to the category detail page

ZohoDeskAsapReady(function(){    
          ZohoDeskAsap.invoke("routeTo",{ page: "kb.category.detail",
       parameters:{ categoryId: "<categoryId>"}});
})   

View Demo

Route to the article detail page

If a user wants to redirect the page to the article detail page, they can use this JavaScript API to route the particular page. For example, a user has embedded ASAP on their website and wants to route the screen to the article detail page when the end-user clicks the ASAP help widget.


Param Name
Data Type
Description

articleId

string (optional)

If a user wants to redirect the page to the category detail page

ZohoDeskAsapReady(function(){                                                   
          ZohoDeskAsap.invoke("routeTo",{ page: "kb.article.detail", parameters:{ articleId: "<articleId>"}});
})    

View Demo

Route to community category list

If a user wants to redirect the page to the Community category list page, they can use this JavaScript API to route the particular page. For example, a user has embedded ASAP on their website and wants to route the screen to the category list when the end-user clicks the ASAP help widget.


ZohoDeskAsapReady(function() {
            ZohoDeskAsap.invoke("routeTo",{ page: "community.category.list" });
})        

View Demo

Route to community topic list

If a user wants to redirect the page to the Community topic list page, they can use this JavaScript API to route the particular page. For example, a user has embedded ASAP on their website and wants to route the screen to the topic list when the end-user clicks the ASAP help widget.


Param Name
Data Type
Description

categoryId

string (optional)

If a user wants to redirect the page to the Community topic list page

ZohoDeskAsapReady(function(){    
            ZohoDeskAsap.invoke("routeTo",{ page: "community.topic.list",
         parameters:{ categoryId: "<categoryId>"}});
})   

View Demo

Route to community topic detail

If a user wants to redirect the page to the Community topic detail page, they can use this JavaScript API to route the particular page. For example, a user has embedded ASAP on their website and wants to route the screen to the topic detail when the end-user clicks the ASAP help widget.


Param Name
Data Type
Description

topicId

string (optional)

If a user wants to redirect the page to the Community topic detail page

ZohoDeskAsapReady(function(){    
            ZohoDeskAsap.invoke("routeTo",{ page: "community.topic.detail",
         parameters:{ topicId: "<topicId>"}});
})  

View Demo

Route to community topic search

If a user wants to redirect the page to the Community topic search page, they can use this JavaScript API to route the particular page. For example, a user has embedded ASAP on their website and wants to route the screen to the community topic search when the end-user clicks the ASAP help widget.


Param Name
Data Type
Description

searchWords

string (optional)

If a user wants to redirect the page to the Community topic search page

ZohoDeskAsap.invoke("routeTo",{ page: "community.topic.search",
            parameters:{ searchWords: "<searchWords>"}});  

View Demo

Route to submit ticket form

This JavaScript API allows users to redirect the page to the submit ticket layout. For example, a user who has embedded ASAP on their website wants to route the screen to the specific ticket layout page when the end-user clicks the ASAP help widget.


Param Name
Data Type
Description

departmentId

string (optional)

This JavaScript API allows users to redirect the page to the submit ticket layout

ZohoDeskAsapReady(function(){    
          ZohoDeskAsap.invoke("routeTo",{ page: "ticket.form", parameters:{ departmentId: '<departmentId>', layoutId : '<layoutId>'} });
})       

View Demo

App Ready

This function prevents issues when loading JSAPIs before the ASAP script is loaded and executed afterwards. All the other JSAPIs must be implemented inside this ready(window) ZohoDeskAsapReady function.


window.ZohoDeskAsapReady(function() {
            // Add your JSAPIs here 
});

App Open/Close Callback

This method triggers a callback whenever the ASAP app is opened or closed, allowing users to conduct other tasks, such as logging a tracking entry or navigating to a specific page after viewing the help documents through ASAP.


ZohoDeskAsapReady(function() {
          ZohoDeskAsap.on("onAppOpen", () => {
              alert("APP open event called ")
  })
}              

View Demo
ZohoDeskAsapReady(function() {
  ZohoDeskAsap.on("onAppClose", () => {
      alert("APP close event called ")
})
}              

View Demo

Logout/Login ASAP

This JavaScript API allows users to listen to the login/logout functionality in the ASAP help widget. For example, if a user wants their end-user to give feedback about the help and support, while logging out from ASAP help widget, they can listen to this API callback.


ZohoDeskAsapReady(function() {
          ZohoDeskAsap.on("onAfterUserLoggedIn", () => {
            alert("userLogged in")
        })    
}              
ZohoDeskAsapReady(function() {
  ZohoDeskAsap.on("onAfterUserLoggedOut", () => {
    alert("userLogged out")
})    
}

Tab Rename

If users want to change the module name on the ASAP help widget, they can use this JavaScript API. For example, if users want to change the Answer Bot module name to "AI Assistant," they can use this API.


ZohoDeskAsapReady(function() {
            ZohoDeskAsap.set("app.tabs.renameTabs", {
                "Home": "landing page",
                "Ticket": "tickets page",
                "Knowledge Base": "knowladge base page",
                "Community": "community page"
      })
})

View Demo

Tab Reorder

If a user wants to change the ordering on the ASAP help widget. For example, we have given the menu options "Home, Knowledge base, Community, Tickets," but if the user wants to reorder, they can use this API.


ZohoDeskAsapReady(function() {
          ZohoDeskAsap.set(
            "app.tabs.reorderTabs", 
          [
          "Home", 
          "Knowledge base", 
          "Community", 
          "Tickets", 
          "Guided Conversations", 
          "AnswerBot", 
          "SalesIQ", 
          "Business Messenger", 
          "ticket_form", 
          "topic_form"
      ])
})      

View Demo

Set hide tabs

If a user wants to hide the specific modules on the ASAP help widget, they can use this JavaScript API to achieve their goal. For example, a user who runs an e-commerce website and wants to hide different modules based on their webpages. They may want to hide the Ticket module on the product buying webpage and the Knowledge Base module on the payment page.


ZohoDeskAsapReady(function() {
            ZohoDeskAsap.set(
              "app.tabs.hideTabs", 
            [
            "Home", 
            "Community", 
            "Ticket", 
            "Knowledge Base", 
            "Guided Conversations", 
            "Answer Bot", 
            "SalesIQ Chat", 
            "Business Messaging",
            "Submit Ticket", 
            "Add Topic"
            ])
        })     

View Demo

Light mode/Dark mode

This JavaScript API allows users to switch to light/dark mode for the ASAP help widget. For instance, if the user's website supports light and dark modes, and when the end-user switches between these modes, this will also apply to the ASAP help widget by using this API.


ZohoDeskAsapReady(function() {
            ZohoDeskAsap.set("app.colorMode", "light");
  })    

View Demo
ZohoDeskAsapReady(function() {
  ZohoDeskAsap.set("app.colorMode", "dark");
})    

View Demo

Change the title of the ticket layout

Users can modify the title in the ticket layout header within ASAP. For instance, if the user wants to change the title to "Submit a Request", they can use this Javascript API.


ZohoDeskAsapReady(function() {
            ZohoDeskAsap.set("ticket.form.title", "Submit Request")
})        

View Demo

Prefill the ticket fields

If the user wants to prefill the fields on the ticket layout, they can use this Javascript API to populate the fields on the ticket automatically. For example, if the user has name and email fields on the ticket layout and does not want the end-users to fill them in, they can be prefilled automatically using the API.


ZohoDeskAsapReady(function() {
            ZohoDeskAsap.set("ticket.form.prefillValues", {
                "<departmentId>&&&<layoutId>": //Ex : "29262000000122184&&&29262000000124226"
                { 
                    "cf_test_field": { //here "cf_test_field" is field name
                        defaultValue: "@zoho.com"
                    },
                    "cf_ram_checkbox_new": 
                    {
                        defaultValue: false
                    },
                    "subject": 
                    {
                        defaultValue: "testing"
                        
                    }
                }
            })
})       

View Demo

Prefill and hide ticket fields

If users need to prefill specific fields and hide them on the ticket layout, they can use the JavaScript API to achieve this. For example, if a user has email, department, and webpage URL fields on the ticket layout, but does not want to display these fields to end-users and instead wants to retrieve those values from the backend, they can use the API to prefill and hide them.


ZohoDeskAsapReady(function() {
            ZohoDeskAsap.set("ticket.form.prefillValues", {
                "<departmentId>&&&<layoutId>": //Ex : "29262000000122184&&&29262000000124226"
                { 
                    "cf_test_field": 
                    { //here "cf_test_field" is field name
                        defaultValue: "@zoho.com",
                isHidden : true // use this config if needed
                    }
                }
            })
        })      

View Demo

Add a custom widget to home page

If users want to add a custom widget via API, they can utilize this JavaScript API to achieve it. For example, if the user has added a custom module to the ASAP with a redirected URL and wants to display it as a card on the home page, they can use this API to add widgets and redirect them to the custom module screen.



            ZohoDeskAsap.set("home.customWidgets", [{
              content: `
                  <h1 onclick="ZohoDeskAsap.invoke('routeTo', { page: 'kb.category.list' })">
                      Category list
                      <button>Category list</button>
                  </h1>
              `,
              description: "",
              name: "Quick Links",
              order: 1,
              showName: true,
              type: "CUSTOM_WIDGETS"
          }])

View Demo
 

Next Steps