Hello Biginners!

In our previous post, we explored how to embed custom UI components inside Bigin using widgets. Building on that, this post looks at Bigin Variables and how they work together with widgets to build a topping that is easy to configure and maintain. To show this in action, we will walk through a real use case for a topping called Bigin With GLM, an AI-powered follow-up email composer built into the Contacts module of Bigin.

Bigin Variables are org-level values stored in your Bigin account. They are not tied to any record or module. They belong to the topping and can be read or updated by your code at any time. 

You can think of them as a settings layer for your topping. Instead of hard-coding values directly into your code, you store them as separate variables for which values can be dynamically provided by the end user during topping installation. Once the topping is published, admins can access and manage these values directly from their Bigin account based on the permissions you set, without any involvement from the developer.

Fill in the Variable Name and choose a Variable Type based on the kind of value the variable will hold, such as Single Line for short text values like a model name. Next, set the Permission to control who can see and change the value. A Read/Write variable is visible to the end user and can be updated by them at any time. A Read Only variable is visible but cannot be changed. A Hidden variable is hidden from the UI and is only accessible through code. Once you have filled in all the details, click Save.

Now that we know what Bigin Variables are, let us see how they are used in a real topping.

Sales reps spend a lot of time writing follow-up emails after calls and meetings. Writing a good, personalized email for every contact takes time, especially when managing many deals at once.

Bigin With GLM solves this by adding an AI email composer directly into the Contacts module. When a rep opens a contact record and clicks the Send AI Mail button, a widget opens. The widget reads the contact's details, such as their name, job title, company, industry, open deals, recent activities, and notes, and uses that information to generate a personalized follow-up email using the GLM AI model. The rep can review and edit the email, then send it from within Bigin. The sent email is saved as a note on the contact record automatically.

This topping uses four components from the Bigin Developer Console: Connections, Bigin Variables, widgets, and Deluge REST API functions. Let's put these components together and build the topping.

To build and test Bigin With GLM, follow these steps in order.

Start by creating the two Connections in the Bigin Developer Console. BiginWithGLM is a default Bigin service connection with the OAuth scopes ZohoBigin.modules.ALL, ZohoBigin.settings.variables.READ, and ZohoBigin.send_mail.all.CREATE. GLM Connection is a custom service connection using API Key authentication for the GLM API at https://api.z.ai. For step-by-step instructions on creating these connections, refer to our earlier posts on setting up default service connections and setting up custom service connections in this series.

Next, let's create a Bigin Variable that will be used to get the AI model name from the end user. AI providers update and deprecate their models regularly, and hard-coding the model name in the Deluge function would mean a developer has to update the code and republish the topping every time that happens. By storing it as a Read/Write variable instead, an admin can update the model name directly from their Bigin account the moment a newer model is available, and the topping will start using it right away, with no code changes and no republishing needed. This is how Bigin Variables are of real value. To do this, go to Custom Properties and create the AI Model name variable. Set the Variable Name to AI Model name, the Variable Type to Single Line, the Permission to Read/Write, and leave the value field empty. Then click Save.

After that, set up the widget. If you have not read our previous post on widgets, we recommend going through it first: using widgets to extend the Bigin UI.

Then go to Components and select the Links & Buttons tab. Click Create Your Button. Set the module to Contacts, name the button Send AI Mail, and set the placement to View Page. For the action, select Invoke a Widget. In the Sandbox URL, provide the path to your widget file.

The Production URL will be populated automatically from your Connected App once the zip file is uploaded. The Dimension is set to 700 x 700 px by default. Click Save.

When the Send AI button is clicked, the widget opens and calls the Deluge functions (which will be discussed be in next section) in the background to fetch the contact's details and generate a personalized email draft.

The widget is built as a simple HTML file that loads inside Bigin using the Bigin Widget SDK. It has three fields: a To field that is pre-filled with the contact's email address from the PageLoad event, a Subject field, and a Body field that the rep can edit. There are two buttons: Generate Draft and Send Email.

The rep can review the draft, make any edits, and send it directly to the contact's email address from within Bigin. Let's look at how these Deluge functions make that happen.

Bigin with GLM uses two Bigin REST API Functions, both called by the widget using ZOHO.BIGIN.FUNCTIONS.execute(). The first function generates the email draft, and the second function sends it. The full code for both functions is available in the attachment.

The first function, generate_followup_draft, is the main function of the topping. It reads the AI model name from the biginai__AI_Model_name variable, then fetches the Contact record, the linked Company record, open Deals, Activities, and Notes. After gathering all the data, the function builds a prompt, calls the GLM API using the GLM Connection with the model name from the variable, and returns the draft to the widget.

The second function, send_followup_mail, sends the email and saves it as a note on the Contact record. After sending, it saves the email as a note titled Follow-up Email Sent.

With both functions in place, the topping is ready to be published. For detailed instructions on how to test and publish your topping, refer to our post on testing and publishing Bigin toppings in this series.

Once the topping is published, you can test it by creating a Contact record in Bigin with relevant details such as the contact's name, job title, company, and email address. Adding a description about the contact's background and a note about your recent interaction with them will help the AI generate a more personalized and contextual email draft.

Once the contact record is ready, open the Contact record and click the Send AI Mail button. The widget will open and generate a personalized email draft based on the contact's details. Review the draft, make any edits, and click Send. The email will be sent from your account and saved as a note on the contact record automatically.

Combined with the Connections, Deluge Functions, and other components we have covered in our previous posts, you now have a complete picture of how a production-ready topping is built. We will continue exploring more components of the Bigin Developer Console in our next posts.

Stay tuned!

<< Previous