JavaScript Examples

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.

Insert a JavaScript action to your flows via the actions library

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 output in Workflow logs for an inbound email containing ‘This is my message!’

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.

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

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.

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!).

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.

https://gnatta.atlassian.net/wiki/spaces/HELP