Variable

​

Configuration Options

​

Variable Selection

• Variable Dropdown: Choose from existing variables in your bot or create a new one
• Automatic Creation: New variables are created on-the-fly if they don’t exist
• System Variables Hidden: System variables (like {{system_now}}) are not shown in the dropdown for this block

​

Operation Type

• Set: Assign a value using text or JavaScript expressions
• Empty: Reset the variable to an undefined state
• Append value(s): Add values to arrays (automatically converts to array if needed)
• Pop: Remove and optionally store the last item from an array
• Shift: Remove and optionally store the first item from an array
• Map item with same index: Cross-reference between two related arrays

​

Operation-Specific Configuration

​

For “Set” Operation:

• Text/Code Mode Toggle: Switch between simple text input and full JavaScript editor
• Value Input: Enter the value or expression to assign to the variable

​

For “Pop” and “Shift” Operations:

• Store Item Variable: Optional dropdown to select where to store the removed item

​

For “Append value(s)” Operation:

• Value to Append: Text input supporting variables to append to the array

​

For “Map item with same index” Operation:

• Base Item Variable: The item you’re searching for
• Base List Variable: The array containing the base item
• Target List Variable: The array to retrieve the corresponding value from

​

For “Empty” Operation:

• No additional configuration needed

​

Set

​

Expressions with existing variables

{{Score}} + 5

{{Score}} + {{Answer}}

{{Score}} * {{Multiplier}}

{{Score}} * 100 / {{Max Score}}

{{Full name}}.split(' ')[0]

{{Name}}.toUpperCase()

{{Name}}.toLowerCase()

const name = 'John' + 'Doe'
return name

'John' + 'Doe'

return 'John' + 'Doe'

​

Text vs Code Mode

​

Text Mode

• Simple text input with variable interpolation
• Best for straightforward expressions and string concatenation
• Variables are automatically parsed when enclosed in {{}} syntax
• Ideal for basic calculations and simple string operations

{{Score}} + 5
{{First Name}} {{Last Name}}

​

Code Mode

• Full JavaScript editor with syntax highlighting
• Best for complex logic and multi-line scripts
• Access to the complete JavaScript expression engine
• Supports advanced operations like loops, conditionals, and array methods

const total = {{Price}} * {{Quantity}}
const discount = {{User Type}} === 'premium' ? 0.15 : 0.05
return total * (1 - discount)

​

Empty

​

Append value(s)

• If the variable is empty, it will create a new array with the provided value(s)
• If the variable is not an array, it will create a new array with the existing value followed by the provided value(s).
• If the variable is an array, it will concatenate the provided value(s) to the existing array.

​

Pop

• Removes the last element from the array stored in the selected variable
• Optionally stores the removed item in another variable for later use
• If the variable is not an array, it returns the value as-is

• Select a variable to store the removed item (optional)

Variable: {{Responses}} = ["First", "Second", "Third"]
After Pop → {{Responses}} = ["First", "Second"]
Removed item: "Third"

​

Shift

• Removes the first element from the array stored in the selected variable
• Optionally stores the removed item in another variable for later use
• If the variable is not an array, it returns the value as-is

• Select a variable to store the removed item (optional)

Variable: {{Queue}} = ["First", "Second", "Third"]
After Shift → {{Queue}} = ["Second", "Third"]
Removed item: "First"

​

Map item with same index

1. Base Item Variable: The specific item you’re looking for (e.g., selected label)
2. Base List Variable: The array containing the base item (e.g., array of labels)
3. Target List Variable: The array to retrieve the corresponding item from (e.g., array of IDs)

1. Find the index of the base item in the base list
2. Return the item at that same index from the target list

Labels = ["Basic Plan", "Pro Plan", "Enterprise"]
IDs = ["plan_001", "plan_002", "plan_003"]
Selected Label = "Pro Plan"

Result: "plan_002" (item at index 1 in both arrays)

​

Advanced Features

​

JavaScript Expression Engine

// Mathematical calculations
{{Price}} * {{Quantity}} * (1 - {{Discount}} / 100)

// String manipulation
{{First Name}}.toUpperCase() + ' ' + {{Last Name}}.toLowerCase()

// Conditional expressions
{{Score}} > 80 ? 'Pass' : 'Fail'

// Date calculations
new Date({{Birthday}}).getFullYear()

// Array operations
[{{Answer1}}, {{Answer2}}, {{Answer3}}].filter(a => a.length > 0)

​

Dynamic Array Management

// Create arrays from user responses
Append Values: {{New Response}}
// Result: ["Response1", "Response2", "Response3"]

// Process survey responses
Pop from {{Responses}} → stores last response in new variable
Shift from {{Responses}} → stores first response in new variable

// Cross-reference arrays
Map Item: Find item in {{IDs}} at same index as {{Selection}} in {{Labels}}

​

Context-Aware Variable Setting

• Session Variables: Temporary data that expires with the conversation
• Persistent Variables: Data saved to results table for long-term storage
• Linked Variables: Variables connected to user blocks for automatic updates
• Computed Variables: Variables that depend on other variables and update automatically

​

Best Practices

​

Variable Management Strategy

• Naming Conventions: Use clear, descriptive names (e.g., “User Email” not “email”)
• Scope Planning: Decide which variables need persistence vs session-only
• Type Consistency: Keep variable types consistent throughout the flow
• Documentation: Document complex variable relationships for team collaboration

​

Performance Optimization

• Minimal Processing: Keep JavaScript expressions simple to avoid delays
• Efficient Arrays: Use appropriate array operations (pop vs shift vs append)
• Variable Cleanup: Reset or empty variables when no longer needed

​

Data Privacy and Security

• Sensitive Data: Use session-only variables for passwords or tokens
• Input Validation: Validate user input before storing in variables
• PII Handling: Be mindful of personally identifiable information storage
• External APIs: Secure API keys and sensitive endpoints in expressions

​

User Experience Considerations

• Loading States: Provide feedback during complex variable calculations
• Error Handling: Set fallback values for failed operations
• Accessibility: Ensure variable-driven content works with screen readers

​

Example Use Cases

​

E-commerce Cart Management

// Calculate total price with tax and discount
const subtotal = {{Cart Items}}.reduce((sum, item) => sum + (item.price * item.quantity), 0)
const discount = {{User Type}} === 'premium' ? 0.15 : 0.05
const tax = subtotal * 0.08
return (subtotal * (1 - discount) + tax).toFixed(2)

​

User Personalization

// Set personalized greeting based on time and user data
const hour = new Date().getHours()
const name = {{User Name}} || 'there'
const timeOfDay = hour < 12 ? 'morning' : hour < 17 ? 'afternoon' : 'evening'
return `Good ${timeOfDay}, ${name}!`

​

Survey Response Processing

// Calculate satisfaction score from multiple responses
const responses = [{{Q1 Rating}}, {{Q2 Rating}}, {{Q3 Rating}}]
const validResponses = responses.filter(r => r !== null && r !== undefined)
const average = validResponses.reduce((sum, r) => sum + parseInt(r), 0) / validResponses.length
return Math.round(average * 10) / 10 // Round to 1 decimal

​

Dynamic Content Selection

// Select content based on user profile
const segments = {
  'new': 'Welcome! Here\'s what you need to know...',
  'returning': 'Welcome back! Here\'s what\'s new...',
  'premium': 'Welcome to your premium experience...'
}
return segments[{{User Segment}}] || segments['new']

​

Troubleshooting

​

Common Variable Issues

• Undefined Variables: Check that variables are created before use
• Type Conflicts: Ensure consistent data types (string vs number vs array)
• Scope Problems: Verify variables are accessible in their usage context
• Naming Conflicts: Avoid duplicate variable names that could cause confusion

​

JavaScript Expression Errors

• Syntax Errors: Validate JavaScript syntax before deployment
• Variable References: Use {{Variable Name}} syntax correctly
• Return Statements: Remember that expressions auto-prepend return if not present
• Null Handling: Check for null/undefined values before operations

​

Array Operation Problems

• Empty Arrays: Handle cases where arrays might be empty
• Index Errors: Verify array indices exist before accessing
• Type Mixing: Ensure array elements are compatible types
• Memory Usage: Be mindful of large arrays in browser memory

​

Integration Challenges

• External APIs: Handle API failures and timeout scenarios gracefully
• Data Format: Ensure data formats match expected patterns
• Session Management: Handle session expiration and variable persistence
• Cross-platform: Test variable behavior across web and WhatsApp environments