'Using NuxtJS for Zoho CRM Widgets

Zoho CRM has something called Widgets to extend it's functionality. Using the widgets feature, you can directly embed UI components in a CRM and use the data form a third-party application to perform actions as per requirement.

A widget is basically an HTML file which is loaded in a popup once a custom button is fired. To store/retrieve data from Zoho CRM you need to load jQuery and their JS SDK in the HTML file.

The most basic HTML file looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://live.zwidgets.com/js-sdk/1.0.5/ZohoEmbededAppSDK.min.js"></script>
    <title>Document</title>
  </head>
  <body>

    <script>
      ZOHO.embeddedApp.on("PageLoad",function(data) {
        console.log(data);
        //Custom Business logic goes here
      });

      ZOHO.embeddedApp.init();
    </script>
  </body>
</html>

In this file console.log(data) will log information about the page on which the widget is fired. On for instants a Lead page, it will log information about that lead, like the id.

Functions to store/retrieve data need to be used where it says //Custom Business logic goes here.

The code for getting all Leads in this widget looks like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://live.zwidgets.com/js-sdk/1.0.5/ZohoEmbededAppSDK.min.js"></script>
    <title>Document</title>
  </head>
  <body>

    <script>
      ZOHO.embeddedApp.on("PageLoad",function(data) {
        ZOHO.CRM.API.getAllRecords({Entity:"Leads"})
          .then(function(data){
            console.log(data)
          })
      });

      ZOHO.embeddedApp.init();
    </script>
  </body>
</html>

Because I need to create multiple Zoho Widgets and use the same Vue Components on every Widget I thought of using NuxtJS. I successfully create the Vue Components, but I have no clue how to incorporate Zoho's JS SDK.

Is there anybody who can give me some suggestions how to make this work? Thanks!

Solution 1:^[1]

why not having the SDK function in a external file from your html, where you invoke all the methods from the SDK api?

simply import your SDK to the header of the html.

Solution 2:^[2]

hey i found this solution on the github issues page that actually worked. hopfully it will help you.

under data you can define your script as a string somthing like this:

<template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div v-html="scripts"></div>
</template>
<script>
export default {
  data: () => ({
    scripts: "<script src='https://www.google.com/recaptcha/api.js'><\/script>"
  })
}
</script>

and then just add a div tag in your page with v-html="script"

i tried it and it worked fine. but i don't feel it's the best practice. hopfully this will help you.

the source and all the discussion on github: https://github.com/nuxt/nuxt.js/issues/2000

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Jorge Gonçalves
Solution 2	Ranger

'Using NuxtJS for Zoho CRM Widgets

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]