π dynamic cards
π Help Needed: Accessing Webhook Variables in Typebot Script Block
Problem Summary
I'm having trouble accessing webhook data in a Typebot Script Block to create a dynamic carousel/cards component. The webhook is receiving data from n8n successfully, but I can't access the variables in my script.
Current Setup
Webhook Block: Receiving JSON data from n8n β
Webhook Variables Configured:
data.images β Images
data.titles β Titles
data.descriptions β Descriptions
Script Block: Trying to access and process these variables β
Cards Block: Should display the processed data
What I've Tried
Direct Variable Access
javascriptconsole.log('Images:', Images);
console.log('Titles:', Titles);
console.log('Descriptions:', Descriptions);
Result: Variables show as undefined or display internal IDs like vqbfnb2u1t9zz84l9jkczh7jq
Typebot.getVariable() Method
javascriptconst images = Typebot.getVariable('Images');
const titles = Typebot.getVariable('Titles');
const descriptions = Typebot.getVariable('Descriptions');
Result: Returns null or undefined
Common Variable Names
Tried accessing: respuesta_completa, data, webhook_response, response, result, webhookData
Result: None found
setVariable Error
Getting error: ReferenceError: setVariable is not defined
Console Output Examples
π Script iniciado
Images: No encontrado
Titles: No encontrado
Descriptions: No encontrado
β No se encontraron las variables del webhook
π Para usar en Cards Block:
Image URL: vqbfnb2u1t9zz84l9jkczh7jq
Title: veeqe66xwnmruocfhn6ssw0nu
Description: vdatbsoi6uf5hwup09pb00gr5
Questions



7 Replies

Why do you need a Script block?
My webhook receives an array which is saved in different variables, for example for images I have the array data.images which is saved in the variable {{Images}} then the cards node is connected the same variables are configured but in preview it appears empty how the image looks the truth is somewhat confusing I don't know if I'm doing something wrong I want to create dynamic carousels but the documentation is not very clear can you give me a guide or instructions I tried with a code script to debug bugs and it threw me the following

Problem Summary
I'm having trouble accessing webhook data in a Typebot Script Block to create a dynamic carousel/cards component. The webhook is receiving data from n8n successfully, but I can't access the variables in my script.
Current Setup
Webhook Block: Receiving JSON data from n8n β
Webhook Variables Configured:
data.images β Images
data.titles β Titles
data.descriptions β Descriptions
Script Block: Trying to access and process these variables β
Cards Block: Should display the processed data
What I've Tried
1. Direct Variable Access
javascriptconsole.log('Images:', Images);
console.log('Titles:', Titles);
console.log('Descriptions:', Descriptions);
Result: Variables show as undefined or display internal IDs like vqbfnb2u1t9zz84l9jkczh7jq
2. Typebot.getVariable() Method
javascriptconst images = Typebot.getVariable('Images');
const titles = Typebot.getVariable('Titles');
const descriptions = Typebot.getVariable('Descriptions');
Result: Returns null or undefined
3. Common Variable Names
Tried accessing: respuesta_completa, data, webhook_response, response, result, webhookData
Result: None found
4. setVariable Error
Getting error: ReferenceError: setVariable is not defined
Console Output Examples
First Script Attempt:
π Script iniciado
Images: No encontrado
Titles: No encontrado
Descriptions: No encontrado β No se encontraron las variables del webhook ReferenceError: setVariable is not defined at eval (eval at g4 (2525.13b8d02994e410db.js?dpl=dpl_B9fCKUiYCvLrBaSd29mfr6wtbth1:1:315491), <anonymous>:40:5) Complex Script Attempt - React/Syntax Errors: Uncaught Error: Minified React error #421; visit https://reactjs.org/docs/error-decoder.html?invariant=421
Descriptions: No encontrado β No se encontraron las variables del webhook ReferenceError: setVariable is not defined at eval (eval at g4 (2525.13b8d02994e410db.js?dpl=dpl_B9fCKUiYCvLrBaSd29mfr6wtbth1:1:315491), <anonymous>:40:5) Complex Script Attempt - React/Syntax Errors: Uncaught Error: Minified React error #421; visit https://reactjs.org/docs/error-decoder.html?invariant=421
Minified React error #421 β React
The library for web and native user interfaces
SyntaxError: Unexpected token '}'
at AsyncFunction (<anonymous>)
at g4 (2525.13b8d02994e410db.js?dpl=dpl_B9fCKUiYCvLrBaSd29mfr6wtbth1:1:315491)
Simple Script Attempt:
π Script simple iniciado
π Buscando variables del webhook...
π Probando variables comunes...
β No se encontraron variables del webhook
π Intentando con IDs especΓficos...
β No se encontraron datos del webhook
β¨ Script completado
Variables Showing as Internal IDs:
π Para usar en Cards Block:
- Image URL: vqbfnb2u1t9zz84l9jkczh7jq
- Title: veeqe66xwnmruocfhn6ssw0nu
- Description: vdatbsoi6uf5hwup09pb00gr5
Questions
How do I properly access webhook variables in a Script Block?
Should I use Typebot.getVariable()?
Are there other methods to access webhook data?
Why are variables showing as random IDs instead of actual data?
Is this normal Typebot behavior?
How do I convert these IDs to actual values?
What's the correct way to set variables for use in Cards Block?
Is Typebot.setVariable() the right method?
Are there alternative approaches?
Is there a specific order or timing issue?
Should the Script Block be placed in a specific position?
Do I need to add delays or wait conditions?
Expected Outcome
I want to:
Extract JSON arrays from webhook data
Process and format the data (add emojis, handle missing values)
Create Images, Titles, Descriptions variables
Use these in a Cards Block to display a dynamic carousel
Environment
Typebot Version: [Latest]
Webhook Source: n8n
Data Format: JSON with arrays
Browser: Chrome/Firefox (both tested)
Sample Webhook Data
json{
"images": ["url1.jpg", "url2.jpg", "url3.jpg"],
"titles": ["Property 1", "Property 2", "Property 3"],
"descriptions": ["Description 1", "Description 2", "Description 3"]
}
Any help, code examples, or guidance would be greatly appreciated! π
Has anyone successfully created dynamic carousels from webhook data in Typebot? What's the best practice for this use case?
not fund
