Tahsim Ahmed
Tahsim Ahmed
  • Updated

Introduction to Functions Page

The Functions page in Voiceflow serves as a central hub for managing custom functions that enhance the capabilities of your AI agent. Here, you can create, edit, and organize functions that execute specific logic or calculations based on user inputs or other data.


Functions Table Overview

The Functions page displays a list of all functions you've added to your project, providing key details at a glance:

  • Name: Displays the function's name, which should be indicative of its operation.
  • Description: A brief summary describing the purpose of the function and its role in the conversation.
  • Last Editor: Shows who last edited the function, aiding in collaborative development.
  • Updated: Indicates the date when the function was last modified, helping to track changes over time.

You can organize your functions list using sorting options like alphabetical order, last editor, and update date.


Create a function

  1. In the Function page, click on the 'New function' button in the upper right area of the screen.
  2. A modal will appear prompting you to enter details for the new function.
  3. Enter a name for the function in the 'Name' field—choose a name that clearly represents the function's purpose, such as "Create Ticket".
  4. Provide a description in the 'Description' text box, which explains the function's purpose, like "This function will create a Zendesk ticket." The function description will be displayed on the function step editor when used on canvas for designer visibility.
  5. Once all information is entered, click 'Create function' to save the new function.


Configure a function

  1. Once created, you can define the function's logic within the editor. You can learn more about how to write function code here
  2. On the right editor, you should see the Input variables, output variables, and paths sections. Input variables, output variables, and paths define the function interface that a designer would interact with to use your function as a step.
  3. Input Variables:
    • Adding Variables: You can define input variables that the function will accept. These are the data points you provide to the function for processing.

    • Instructions: For each input variable, you can add instructions that describe the variable's purpose or provide guidance on the type of data expected, available as a Builder note on-canvas.

  4. Output Variables:
    • Defining Outputs: Output variables are where you specify what data the function will return after processing. These variables can be used in subsequent steps of your conversation flow.
    • Instructions: Just like with input variables, you can provide instructions or a description for each output variable, ensuring users understand what data will be provided.
  5. Paths:
    • Creating Execution Paths: Paths allow you to define different execution flows based on the function's output. You can specify multiple paths for different scenarios or outcomes of the function.
    • On-Canvas Labels: Each path can be given an on-canvas label, which serves as a visual cue on the design canvas, helping users understand where each path leads.
  6. Description: The description section is where you provide a high-level overview of what the function does. This should be a clear and concise explanation to ensure that anyone using the function can understand its intended purpose and the context in which it should be used.
  7. Image: You can upload or select an image to represent your function visually. This image will appear as an icon on the design canvas, making it easier to identify the function at a glance and aiding in creating a more intuitive design experience.


Delete a function

Single function

  1. To delete a single function, select the function you wish to remove, and in the editor view click the '...' (more options) button, and select 'Delete' from the dropdown menu.
  2. Confirm the deletion when prompted to remove the function from your table.

Bulk deleting functions

  1. For bulk actions, select multiple functions by selecting the checkboxes next to the function names.
  2. Once selected, on the bulk action toolbar above the table, click the 'Delete' button to initiate the bulk deletion process.
  3. Confirm the bulk deletion to remove all selected functions simultaneously.


Testing a function

The editor includes a testing tool designed to ensure your functions operate correctly before they are integrated into the conversational experience. Here's how to utilize the testing features effectively:

  1. Select the function you wish to test from the list of available functions. From the editor, select the Run button at the bottom of the function editor
  2. On the 'Test function' pane, you can simulate input variables if they are set in the functions settings. 
  3. Click the 'Execute' button to run the function with the provided inputs. The testing environment will process the inputs through the function's code and display the outputs.
  4. After execution, review the 'Output variables' section. It will display the results based on the function's logic.
  5. Confirm that the correct path is taken after the function executes in the Resolved Paths section.
  6. The 'Traces' section provides a detailed log of the messages that the function is returning. 
  7. Use the 'Re-use last value(s)' option to quickly retest the function after making code adjustments. This allows for an efficient iterative process to refine the function's code based on the test results.
  8. For a more in-depth analysis, you can download the complete logs by clicking 'Download logs'. This can be helpful when you need to troubleshoot more complex issues or keep a record of your tests for future reference.

By following these steps, you can thoroughly test and validate your functions within Voiceflow, streamlining the development process and ensuring a high-quality user experience when the assistant is deployed. Testing is a critical step in developing reliable and robust conversational experiences.


Functions that you create can be utilized in your designs in the:

Exporting and Importing

Exporting functions

  1. Select one or multiple functions by selecting the checkboxes next to the function names.
  2. With the desired function(s) selected, click on the 'Export' button located in the top bar of the table. This will generate a .json file that contains the selected function(s) along with their respective JavaScript code and configurations.
  3. Once the export process is complete, a file will be downloaded to your local machine. This file can be stored, shared, or used as a backup, allowing you to share your functions with others or import them into different Voiceflow projects.

Importing functions

  • Click on the 'Import' button to open the 'Import file' modal. Here you can select the function file that you previously exported or that was shared with you.
  • Choose the appropriate file from your local system that contains the exported function(s). The file will be in a .json format and will contain all the necessary information to recreate the function steps in your current Voiceflow project.
  • Completing the Import: After selecting the file, Voiceflow will process the contained information and recreate the function(s) within your project, complete with the original code and settings.


Was this article helpful?

0 out of 1 found this helpful

Have more questions? Submit a request



Please sign in to leave a comment.