Restricting the number of times to use a feature in a Google Addon Sidebar

One model of monetization for a Google Addon is to allow a certain number of free uses before restricting that feature. This post shows 1 way to restrict a feature in a Google Editor Addon sidebar.

In the previous post we showed how to differentiate Google Addon sidebar content based on a license. This post shows how to build upon that by allowing the user a certain number of free uses of a feature before restricting it. This is a great way to allow full use of your Addon and then create a paywall for continued use of that feature. (This post is only going to show the "wall" part. Adding the "pay" part of the paywall component will come in a future post).

The basic rundown is we will run a Google Apps Script function (server) from the sidebar (client) and then return information to the sidebar. We will keep track of the usage on the server side and utilize the UserProperties again. Then we will return some info back to the sidebar and when the number of uses are up, disable the button so it will no longer run the server code.

I will only touch on the new bits of code, feel free to check out the previous posts for a more complete picture of all the code.

We are going to add 2 bits to that initial code:

1. Run awesome feature and track feature usage on Apps Script (server)
2. Sidebar (client) code to run a server function and then update the sidebar.

Run awesome feature and track feature usage on Apps Script (server)

We only create 1 new function for our awesome feature. It will be called by the button click on the Sidebar, do some stuff, and then return information to the sidebar.

Our decreaseCount function will be called by the sidebar in the google.script.run.decreaseCount() function. The first thing the function does is call the UserProperty 'usageCount' to see how many times the user has used the feature. This will return the number of times it has been used or null if it hasn't been used yet. The next bit of code you could add would be any of the awesome Google APIs to run with Apps Script. Like create a new slide or send an email. I will leave that part up to your imagination or inspiration. Now let's handle tracking the feature usage. We then set the default amount of times the feature can be used. If the user has used it before then we will decrease the usage. Now we craft the message to return, telling the user how many times left they have to use this awesome feature. Finally we update the 'countUsage' property with how much usage is left. Then we return the message to the Sidebar (client). It will be the 'this' value in the google.script.run.withUserObject(this)

Sidebar (client) code to run a server function and then update the sidebar.

Recall the showSidebar code from the previous posts, we will update some of the HTML and add some Javascript as well.

The updated HTML part. Here we added a few components: a button, an error, and a div for the info returned from the Google server Then add some Javascript to the HTML file to run some of our updating bits. The script part can be overwhelming so lets go through it in a bit more detail. We start off by adding jQuery to our page. This will allow us to use jQuery shorthand ($ stuff) instead of 'vanillaJS' to get the DOM elements. Feel free to read up on jQuery or convert it to vanillaJS if you like. Using jQuery we set a function $(function(){ code }) to run onLoad of the HTML (so once the Sidebar is loaded with our HTML content). Within this function we set all of our functions that we will use to update the page and run our server code. We set a click handler so we will run the runServerFunction when the button is clicked. We used the jQuery command to get the element with the id of 'run-server-function'. Now we create our runServerFunction function. This will call the Google Apps Script code on our server called decreaseCount. It also has an onSuccess and onFailure Handler and carries the info to pass on to use with those functions. Feel free to read more up on how to use script.google.run in the documentation: https://developers.google.com/apps-script/guides/html/reference/run?hl=en Now set the onSuccess function. This will take the info returned from the server, which was our message, as a parameter that we can work with. Here we use jQuery to get the returnedServerDiv and set the html for it with the message we returned from the server. (We only used a text string but could have crafted much more complicated HTML on the server to return and render here). Then we show that element since it was hidden initially. Finally we check to see if the message was saying we used up all the uses. I just used a .indexOn of the first part of the message. Another method to use would be to return an object from the server and then parse it but I wanted to keep it simple. If it finds that text in the returned message then it gets the element with the id of run-server-function (which was our button) and sets the disabled property to true. This renders the button disabled so the user can't click it anymore. In this function you could also set some info to prompt the user to purchase a license! The last bit of the code is what we return onError from the server function. Feel free to craft a different message there.

Now you have created a Sidebar that will run a Google Apps Script function and update the sidebar, keeping track of properties on the server for the user!

Follow along for the next part in the series where we add the Pay part to the paywall! Some would say this is the most important part ;) As always, hit me up by email or on LinkedIn or Twitter with any questions! If you are interested in having us create a Custom Addon for your company, please reach out as well.