Skip to main content
Functions define the behavior behind interactive widget elements like buttons and forms. You attach a function to an element by referencing its function name, and the function’s type determines what happens when a user triggers it.

​
Function Types

Each function type serves a different purpose. Select the type that matches the action you want to perform.
Makes a request to an external API. The configuration is never visible to the end user.
SettingDescription
URLThe endpoint to send the request to. Supports template tokens.
MethodHTTP method: GET, POST, PUT, PATCH, or DELETE.
HeadersKey-value pairs sent as request headers. Supports template tokens.
ParametersQuery parameters appended to the URL. Supports template tokens.
BodyRequest body (for POST, PUT, PATCH). Supports template tokens.
Return FieldsFields to extract from the response for use in follow-up actions.
On SuccessFollow-up action when the request succeeds.
On FailureFollow-up action when the request fails.
Additional InputsExtra data passed in at the call site in the code. See Additional Inputs.
Sends a message to the parent webpage. This is designed for widgets embedded inside iframes that need to communicate with the host page.
SettingDescription
Wait for ResponseWhether to wait for a response from the parent page (up to 60 seconds).
InputsKey-value pairs sent in to the client side code. Supports template tokens.
Return FieldsFields to extract from the client side code’s response.
On SuccessFollow-up action when the parent responds successfully.
On FailureFollow-up action when the communication fails.
Additional InputsExtra data passed in at the call site in the code. See Additional Inputs.
Sends a message into the current conversation.
SettingDescription
Message TemplateThe message content. Use {{fieldName}} template tokens to insert dynamic values.
Hide MessageWhen enabled, the message is sent in the background and not displayed to the user.
On ExecuteFollow-up action that runs after the message is sent.
Additional InputsExtra data passed in at the call site in the code. See Additional Inputs.
Closes the widget. There are two ways to use this:
  1. Directly — Attach it to a button so the user can close the widget on click.
  2. As a follow-up — Use it as the follow-up action on another function (e.g., close the widget after a successful API call).
Dismissal state is persisted. If a user dismisses a widget, it stays dismissed even after a page refresh.
Updates widget data values without making any external calls. Useful for storing user selections or transforming data between steps.
SettingDescription
VariablesKey-value pairs to set. Values support template tokens.
Additional InputsExtra data passed in at the call site in the code. See Additional Inputs.

​
Loading Behavior

When a function runs, you can control how the UI indicates progress.
ValueBehavior
NoneNo loading indicator is shown.
SelfThe triggering element displays a spinner.
ContainerThe entire widget shows a loading overlay.

​
Additional Inputs

Sometimes a function needs extra context that depends on where it is called. For example, you might have a list of classes, each with a “Book” button that should pass a different classId to the same function. 
{classes.map((item) => (
  <Button
    label={item.name}
    onClickAction={{ functionName: "bookClass", additionalInputs: { classId: item.id } }}
  />
))}
Once provided, you can reference additional inputs as template tokens anywhere the function accepts them — in the URL, headers, body, or parameters. For the example above, use {{classId}} to insert the value.
Additional inputs are not variables. They only exist for the duration of the function execution. If you need to persist a value, use a Set Variables follow-up action to save it after the function runs.

​
After a Function Runs

Every function supports a follow-up action that runs after it completes.
  • Server Function and Client Function provide two follow-up slots: On Success and On Failure.
  • Send Message, Link, Dismiss, and Set Variables functions provide a single On Execute slot.
Each follow-up action can do one of the following:
ActionDescription
DismissCloses the widget. The dismissal is persisted across page refreshes.
Set VariablesUpdates widget data values. For server and client function follow-ups, you can reference response data using template tokens.

​
Template Tokens

Template tokens are placeholders written as {{fieldName}} that get replaced with current values at runtime. You can use them in any setting that supports dynamic content, including URLs, headers, body content, messages, and variables.
For follow-up actions on Server and Client functions, template tokens can also reference fields from the response data. This lets you capture API results and store them as widget variables for use elsewhere.

​
Results

Every function produces one of two outcomes:
OutcomeDescription
SuccessThe function completed. For server and client functions, the result may include response data that can be referenced in follow-up actions via template tokens.
ErrorThe function failed. The result includes an error message describing what went wrong.