Custom JS
Run custom JavaScript when an action fires — small UI behaviors, DOM updates, or chained API calls.
In the builder: select a widget → On Click or On Change → Add action → Custom JS
Behavior
When the action runs, Calcopolis executes your script in the embed context.
- Runs in the visitor's browser.
- Available objects:
event,variables,form(the root form element),api(Calcopolis helpers). apimethods are async — useawait.- Keep scripts short; prefer built-in actions (Save Lead, Send Email, Calculate) when they fit.
Setup fields
Open the action settings (gear icon next to Custom JS):
| Field | Description |
|---|---|
| JS Code | JavaScript to execute. Use variables.email to read form values, form.querySelector(...) for DOM access. |
Action name
Internal label in the builder action list. Use distinct names when the same widget runs multiple actions.
FAQ
What can I access in the script?
| Name | Contents |
|---|---|
event |
The DOM event that triggered the action |
variables |
All form variables (keys = widget Names) |
form |
Root HTMLFormElement of the embed |
api |
saveLead, sendMessage, registerGoal, sendWebhook helpers |
Simple examples
Log all values:
console.log(variables);
Read one field:
console.log(variables.email);
Prevent default button behavior:
event.preventDefault();
When should I use built-in actions instead?
| Need | Use |
|---|---|
| Save contact | Save Lead |
| Send template email | Send Email |
| Refresh formulas | Calculate |
| Track conversion | Register Goal |
| POST to CRM | Send Webhook |
Reserve Custom JS for logic that no single action covers.
Security notes
Scripts run in the visitor's browser. Never embed secrets (API keys, private tokens) in JS Code — use server-side Send Webhook or Send Email instead.