JavaScript Examples
- Gnatta
- Abbey Brown
Quick links in this article:
This advanced Workflow action can be used to interact with our Workflow APIs, or manipulate data so that it can be stored in custom variables in your flow. In this article, we’ll provide a selection of tried and tested examples to get you started.
ChatGPT can be a useful tool to generate JavaScript if you know what you want to achieve! We’d recommend briefing your AI with some of the examples below to help it along.
How To Use JavaScript Actions
Creating and using a JavaScript action is as easy as using any other action in Gnatta Workflow! Simply select it from the actions library, then write (or paste in) your JavaScript snippet and you’re good to go. We’d recommend taking the time to give your JS actions a good name and description, to help other Gnatta admins on your domain understand what the action is for.
In-Flow Delays
Gnatta Workflows are executed extremely quickly - as good as instantly for most use cases! Therefore, sometimes you might need to cause an artificial delay in the execution of your flow, to create a more natural experience for your customers.
Example use cases include:
Adding a very small (perhaps a second or two) delay between sending multiple autoresponses in a chatbot, so it feels more like a ‘natural’ conversation.
Adding a small delay after warning you’re closing a chat, before actually closing the chat - this gives the customer time to read the message before a post-chat survey is presented.
and more!
If you’d like to cause a delay in the current flow (vs scheduling a different flow with the Start Timer action), this simple JS snippet will do the trick.
This example will create a 2 second delay. Simply adjust the delay (in milliseconds) to create your own custom delay.
function delay(milliseconds) {
const start = new Date().getTime();
while (true) {
if (new Date().getTime() - start > milliseconds) {
break;
}
}
}
// Usage: Delay for 2000 milliseconds (2 seconds)
delay(2000);
// Code to be executed after the delay...
console.log("Delayed execution completed.");Logging
If you’re troubleshooting or carrying out tests on the Workflows in your domain, it can be useful to use a JS action to ‘log out’ the values for your contextual data. This will collect all of the context values generated when an event is triggered and make them available in the Workflow log after the event has been triggered. This is handy if you want to sense check your flows and make sure your Decisions are hinged on the right piece of data.
For example, this short snippet will surface the contents of the message body into the Workflow log when the event is fired - this applies to any available contexts (see Contextual Data for more information).
var echoBody = context.Get("Echo.Body");
context.Log(echoBody);
The below example will log all available contexts - we’d recommend putting this in a JS action on its own, in a separate flow, so you can add it to any of your events as needed.
const echo = context.GetObjectJson("Echo");
const conversation = context.GetObjectJson("Conversation");
const interaction = context.GetObjectJson("Interaction");
const queue = context.GetObjectJson("Queue");
const note= context.GetObjectJson("Note");
const variables = context.GetObjectJson("Variables");
context.Log("Echo: " + echo);
context.Log("Conversation: " + conversation);
context.Log("Interaction: " + interaction);
context.Log("Queue: " + queue);
context.Log("Note: " + note);
context.Log("Variables: " + variables);Unassign Non-Live Interactions
This JavaScript will check all the interactions assigned to the user and the active channel. Interactions that are not a chat or a call (i.e. not a live interaction) are unassigned. This would typically be placed on a ‘User State Changed’ event, after a Decision action to check if the current user is in an available state.
var userId = context.Get("UserState.User");
var json = Gnatta.Interactions.GetForUser(userId);
var interactions = JSON.parse(json);
context.Log("Logging interactions for: " + userId);
for (var i = 0; i < interactions.length; i++) {
var interaction = interactions[i];
var channel = interaction.ActiveChannel;
context.Log("Interaction: " + interaction.Id + ", Channel: " + channel);
// Do not unassign live channels
if (channel != null && channel !== "WebChat" && channel !== "Voice") {
Gnatta.Interactions.SetWorker(interaction.Id, null);
context.Log("Unassigning Interaction: " + interaction.Id);
}
else {
context.Log("Not unassigning Interaction: " + interaction.Id);
}
}Extract Website Form Submissions
If you’ve used the HTTP request method to connect your website forms to Gnatta, the first action in your routing workflow will likely need to be JavaScript in order to collect and organise the data from that HTTP Request, creating and storing the relevant variables to use later in your routing flow (such as the customer email address, order number or message body).
// Grab Data
var data = JSON.parse(context.GetObjectJson("Interaction.Data"));
context.Log(JSON.stringify(data));
// Helper function to find an object by ID
function findById(id) {
return data.find(function (d) {
return d.Type.Id === id;
});
}
// Extract values with null-checks
var phoneNumber = findById("INSERT YOUR GNATTA DATA GUID");
phoneNumber = phoneNumber ? phoneNumber.Data.value : '';
var reason = findById("INSERT YOUR GNATTA DATA GUID");
reason = reason ? reason.Data.value : '';
var contacting = findById("INSERT YOUR GNATTA DATA GUID");
contacting = contacting ? contacting.Data.value : '';
var regarding = findById("INSERT YOUR GNATTA DATA GUID");
regarding = regarding ? regarding.Data.value : '';
// Log and set values in context
function logAndSet(varName, value) {
context.Log(varName + ": " + value);
context.Set("Var." + varName, value);
}
logAndSet("PhoneNumber", phoneNumber);
logAndSet("Reason", reason);
logAndSet("Contacting", contacting);
logAndSet("Regarding", regarding);Set Custom Variable
You might choose to use JS to set a custom variable in your flow, so you can insert it elsewhere. In the example below, we’re creating a custom variable for the language ISO Code ‘en’, so we can use Var.Translate as the Language setting in a later Translate action.
// Setting the variable Var.Translate to "en"
context.Set("Var.Translate", "en");
// Log the action for debugging purposes
context.Log("Set Var.Translate to 'en'");Get Dates
This example checks and then stores the next several working days as context outputs like Var.TwoDays, which can then be inserted later into your flows (such as a quick reply option in an autoresponse!).
var now = new Date();
// Function to check if a given date is a weekend (Saturday or Sunday)
function isWeekend(date) {
var day = date.getDay();
return (day === 0 || day === 6); // Sunday (0) or Saturday (6)
}
// Function to get the next working day after a given date
function getNextWorkingDay(date) {
var nextDay = new Date(date);
nextDay.setDate(nextDay.getDate() + 1); // Move to the next day
while (isWeekend(nextDay)) {
nextDay.setDate(nextDay.getDate() + 1); // Skip weekends
}
return nextDay;
}
// Function to get the date after n working days
function getDateAfterWorkingDays(date, n) {
var nextDate = new Date(date);
for (var i = 0; i < n; i++) {
nextDate = getNextWorkingDay(nextDate);
}
return nextDate;
}
// Function to format the date as "Day, Date Month" with ordinal suffix (e.g., "Wednesday, 28th February")
function formatDate(date) {
var options = { weekday: 'long', day: 'numeric', month: 'long' };
var formattedDate = date.toLocaleDateString('en-US', options);
var day = date.getDate();
var suffix = getOrdinalSuffix(day);
return formattedDate.replace(/\d+/, day + suffix);
}
// Function to get the ordinal suffix for a number (e.g., st, nd, rd, th)
function getOrdinalSuffix(number) {
if (number >= 11 && number <= 13) {
return 'th';
}
var lastDigit = number % 10;
switch (lastDigit) {
case 1:
return 'st';
case 2:
return 'nd';
case 3:
return 'rd';
default:
return 'th';
}
}
// Calculate dates for 2, 3, 4, and 7 working days ahead
var twoWorkingDays = getDateAfterWorkingDays(now, 2);
var threeWorkingDays = getDateAfterWorkingDays(now, 3);
var fourWorkingDays = getDateAfterWorkingDays(now, 4);
var sevenWorkingDays = getDateAfterWorkingDays(now, 7);
// Logging the calculated dates
context.Log("Date in 2 working days: " + formatDate(twoWorkingDays));
context.Log("Date in 3 working days: " + formatDate(threeWorkingDays));
context.Log("Date in 4 working days: " + formatDate(fourWorkingDays));
context.Log("Date in 7 working days: " + formatDate(sevenWorkingDays));
// Set context variables for the calculated dates with updated names
context.Set("Var.TwoDays", formatDate(twoWorkingDays));
context.Set("Var.ThreeDays", formatDate(threeWorkingDays));
context.Set("Var.FourDays", formatDate(fourWorkingDays));
context.Set("Var.SevenDays", formatDate(sevenWorkingDays));Need more help?
This is very advanced functionality! The JavaScript action was designed to be used primarily by trained config teams and technical users. If you’d like help with your JavaScript actions, please get in touch.