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. 

To access the API documentation related to the ASAP web add-on, click here.

Also read: 
                                                                                                                                                            


    • Related Articles

    • Working with the ASAP SDK for iOS

      SDK v2.0 Introduction The ASAP SDK for iOS makes help available within quick reach for the end-users of your iOS app. Using this SDK, you can create and customize an add-on that resides within your app and provides end-users with easy access to your: ...

    • Working with the ASAP Add-Ons for Mobile Platforms

      The ASAP SDKs for mobile platforms--iOS and Android--make help available within quick reach for the end-users of your mobile apps. Using these SDKs, you can create and customize add-ons that reside within your app and provide end-users with easy ...

    • Guide to building a multilingual Help Center

      Whether you are a global business or expanding into a new market, you need to find a way to help customers in their native language. Because it doesn't matter how well-written or comprehensive your knowledge base articles are if your customers can't ...

    • Renaming your Help Center Sub Domain

      It is not uncommon for established companies to make a name change and start again. In fact, there are plenty of very good reasons for the same. For instance, the name no longer represents what they do; the brand has become stagnant; or for trademark ...

    • 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 ...