Working with the ASAP Add-On for the Web

Working with the ASAP Add-On for the Web

Working with the ASAP Add-On for the Web

Introduction

The ASAP add-on for websites makes your help center available within quick reach for your end-customers. By integrating this add-on with your website, you can provide your customers with easy access to your: 
  • Customer support team (to raise tickets)
  • Knowledge base (to access help articles) 
  • User community (to interact with other customers)
  • Zia Bot (to find quick answers through Zia, our AI-powered virtual assistant)
You can choose to display the same add-on across all the pages of your website or a unique add-on for each webpage. Following the latter approach would deliver contextual support for your customers. For instance, if you run an e-commerce business, you can display a department-specific add-on, on the page for each department, i.e., the add-on for the Electronics page can be configured to display help articles related to electronics alone, while the add-on for the Footwear page can be configured to display help articles related to footwear alone, and so on. 

What ASAP means to your end-customers is that they do not have to navigate to a different page on your website to access help articles or seek help from your customer service personnel or interact with fellow users of your service or product. They just have to click a single icon on your website.  


 

Setting up the ASAP Add-On

To include the ASAP add-on in your website, you must first embed a code snippet in your website's HTML source code. To retrieve this code snippet, perform the following steps: 

  1. On the upper-right corner of your Zoho Desk portal, click the Setup icon.
  2. On the Setup page, under Channels, click ASAP.
    The ASAP for the Web page appears.
  3. On this page, click the Create Web Add-On button. 
    The Create Web Add-On page appears.


  4. Under Add-On Details, configure the following settings, as required:
    • Name: Name of the add-on; this name appears on screen when your end-customers hover over the ASAP icon on your website
    • Departments: Department(s) from which information must be displayed; you can select all departments or a specific department
    • Tab Selection: The help modules that you want to make available through the ASAP add-on. The toggle switches next to each module help you enable or disable the modules, as required. 



      Note: To include Zia Bot in your ASAP add-on, you must first enable the Bot option in the Zia preferences page (Setup --> General --> Zia). 
    • Authentication Method: Method for authenticating users and providing access to more help components accordingly



      • Anonymous - In this method, end-users are considered guest users. They can only submit tickets and view posts in the user community. They cannot view the tickets they submitted or actively participate in the user community.
      • JWT - In this method, end-users are considered authenticated users. In addition to the activities that guest users can perform, authenticated users can also view the tickets they submitted and actively participate in the user community (with rights to perform actions, such as following a topic, adding a topic, and adding a comment to existing posts). For more information on JWT authentication, refer to this article.
After configuring the ASAP add-on as required, click the Save button. 

The ASAP web add-on is successfully created in your portal. 

A new section called Code Snippet appears in the Add-On Details tab. 



Copy the code snippet and paste it before the closing <body> tag in your website's HTML source code. 


  • Make sure to include the code snippet in the HTML source code of all the individual pages that must display the add-on. 
  • If you want each webpage to display a department-specific add-on, create a unique add-on for each department and embed the respective code snippet on each page.
  • The department settings of an ASAP add-on cannot be changed after the code snippet is generated. Therefore, make sure to select the right department(s) while creating the add-on. 

After you paste the snippet in the HTML source code, the ASAP icon appears on your webpage, making it easy for your customers to seek help. 







Customizing the ASAP Icon

You can change the appearance and position of the icon on your website, using the different customization options available. To customize the ASAP icon, perform the following steps:

  1. On the upper-right corner of your Zoho Desk portal, click the Setup icon.
  2. On the Setup page, under Channels, click ASAP. 
    The list of active ASAP instances appears. 
  3. Click the name of the add-on you want to customize. 
    The Add-On Details page for that add-on instance appears. 
  4. On this page, click the Customization tab. 




  5. Under the Customization tab, choose the icon, shape, position, and theme options you prefer. You can use one of the default themes or define a custom theme for your add-on window. 
  6. After customizing the icon as required, click the Save button.

Customizing the Add-On Home Screen

The home screen of your add-on is the first screen that appears when end-users click the ASAP icon on your webpage. You can customize this screen as required, based on which help components you want to display prominently. To customize the home screen of your ASAP add-on, perform the following steps:
  1. On the upper-right corner of your Zoho Desk portal, click the Setup icon.
  2. On the Setup page, under Channels, click ASAP. 
    The list of active ASAP instances appears. 
  3. Click the name of the add-on you want to customize. 
    The Add-On Details page for that add-on instance appears. 
  4. On this page, click the Home Screen Customization tab.

  5. From the widgets pane on the right, drag the widgets that you want to display on the home screen and drop them on the canvas.
  6. Reorder and/or delete the widgets on the canvas as required. 

  7. Click the Preview button to have a look at how the home screen will appear on the add-on window. 

  8. If you are satisfied with the preview, click the Save button. Else, click Go Back, make the necessary changes, and then click the Save button.
    The home screen of your ASAP add-on will now reflect the changes you made. 

    • Related Articles

    • Working with the ASAP Extension for Google Chrome

      Introduction The ASAP extension for Google Chrome is a nifty tool that helps you bridge your website with your knowledge base for the benefit of your customers/site visitors. This extension enables you to easily configure tooltips that display ...

    • Working with Cases

      In the world of Internet, online Customer Support has become an integral part of the organizations' business process. Customer Support is an important activity in all types of product and service industries. In general, case trouble tickets are used ...

    • Working with Connections

      Connections is a simple authentication mechanism to connect your Zoho CRM account with any third-party application. Connections can be used to invoke any third party applications’ REST APIs and get access to your authenticated data from your ...

    • Working hours

      Super admins and admins can view and edit this information. Managers can only view this information. Staff members will not have access to this information. This section lets you define the working hours for your business. Additionally, you can set ...

    • Web Tabs

      Introduction Web tabs help you to open web pages like company-wide announcements, web applications, etc. inside Zoho Workerly. All the Zoho Workerly users across the organization can view these web tabs. By default, the web tabs functionality is ...