Module guide: Send code Action
Send payload to User.com widget
The "Send code" module is one of the most powerful and flexible tools in the User.com automation builder. It allows you to execute custom client-side JavaScript or append raw HTML to a user's browser when they meet specific conditions. This opens up a world of possibilities for personalizing your website, running A/B tests, and integrating with third-party tools.
This module gives you direct access to the web layer of your site, allowing you to dynamically modify the user experience in real time.
Prerequisite: The User.com widget
For the "Send code" module to function, the User.com widget script must be installed and loaded on the page where you want the code to execute. The module relies on the widget to receive and run the payload from your automations.
How it works: The two execution methods
The "Send code" module offers two distinct ways to run your script. It is critical to understand the difference and choose the correct one for your goal.
1. Direct JavaScript execution (Recommended for scripts)
This is the modern and reliable way to execute JavaScript logic. It leverages the User.com widget's built-in onPayloadReceived callback function, which must be defined in your site's widget configuration. To use this method, you place your JavaScript directly into the Content window of the module, ensuring the "Append to HTML" toggle is switched off.
How it Works: The JavaScript you provide in the automation module is passed as a string to the
onPayloadReceivedfunction on your website, which then executes it.Why you should use it: It's fast, secure, and the standard choice for running scripts, manipulating page elements, or making API calls.
Implementation example:
To use this method, you need to define the onPayloadReceived callback within your window.civchat configuration object on your website, like so:
window.civchat = {
// Replace with your actual API Key
apiKey: "YOUR_API_KEY",
// Optional: Pass user data during initialization
// user_id: "ID_from_your_app",
// email: "johndoe@example.com",
/**
* This function handles payloads sent from the "Send code" module.
* It receives the code as a string, creates a new function from it,
* and executes it within a try/catch block for safety.
*/
onPayloadReceived: function (message) {
console.log('User.com payload received:', message);
if (typeof message === "string") {
try {
var fn = new Function(message);
fn();
} catch (e) {
console.error("User.com - error executing payload as function:", e);
}
}
}
};2. Append to HTML (Alternative method)
This method is designed to inject raw HTML content directly into your web page. To use it, you must switch on the "Append to HTML" toggle in the module settings.
How it works: Any content you place in the module is appended directly to the end of the
<body>tag on your site.When to use it:
Adding non-script pixels conditionally: The key advantage is adding third-party tracking pixels (
<img>or<iframe>tags) only for specific user segments (e.g., users who completed a purchase or visited from a specific ad campaign).Triggering scripts on load: While
onPayloadReceivedis recommended for running scripts, you can use theonloadattribute on an injected element (like an invisible image) to trigger JavaScript. This can be a fallback in certain technical scenarios.Injecting simple content: For adding basic HTML content where its final position at the bottom of the page is acceptable.
Example: Injecting a tracking pixel
To add a third-party tracking pixel (that is not JavaScript-based), you can place its <img> tag directly into the content box. Its position on the page doesn't matter as it's typically invisible.
<!-- Example tracking pixel from an affiliate network -->
<img src="https://tracking.example-network.com/pixel?id=12345&event=lead" width="1" height="1" border="0" />What can you do with "Send code"?
Because it runs any JavaScript or injects HTML, its uses are nearly limitless. Here are some common examples:
1. Website personalization with Snippet Tags
You can dynamically alter the content of your website using data from the user's profile. The "Send code" module fully supports Snippet Tags.
Simple example: Greet a returning user
// This code finds an element with the id "user-greeting"
// and changes its text to include the user's first name.
// If the name is not available, it defaults to "there".
var userFirstName = 'there';
var greetingElement = document.getElementById('user-greeting');
if (greetingElement) {
greetingElement.innerText = 'Welcome back, ' + userFirstName + '!';
}Example automation
Example Send Code content
Advanced example: Display content based on aggregated deal value
You can perform complex calculations with Snippet Tags, such as summing the value of all deals associated with a user, and then use that result in your script.
Scenario: You want to show a special banner to users whose total deal value over the last year is more than $1,000.
Code for the "Send code" module:
// This Snippet Tag calculates the total value of the user's deals.
// The result of the calculation is injected here before the code is sent.
// The "| default:0" filter prevents errors if the user has no deals.
var totalDealValue = {{ '{% deals for_last_days=365 as deal_list %}{% aggregate deal_list function="sum" attribute="value" as values_sum %}{{ values_sum | default:0 }}' }};
// We check if the value exceeds our threshold
if (totalDealValue > 1000) {
// Find an element to display a special message for high-value customers
var vipBanner = document.getElementById('vip-banner');
if (vipBanner) {
vipBanner.innerText = 'As a valued customer, you have access to exclusive offers!';
vipBanner.style.display = 'block'; // Make the banner visible
}
}2. A/B testing and dynamic content
You can show different versions of a button, headline, or feature to different segments of users to test for performance. For instance, you could change a button's color for one segment of users and change its text for another, then track which version leads to more clicks. For detailed examples and strategies, please refer to our guide on managing your site's front end.
3. Integrating third-party tracking scripts
While you could add tracking scripts directly to your website's code, the real power of using a marketing automation tool is the ability to fire them conditionally. The "Send code" module is the standard way to trigger events for services like Meta (Facebook) or Google Ads only for users who meet specific criteria (e.g., they are in a certain CRM stage or come from a specific campaign). For a detailed guide on this, see our article on Implementing marketing tags with User.com
How it differs from other modules
vs. HTML Blocks: HTML Blocks are designed to find an existing element on your page (with a specific class) and replace its content. They are great for simple content swaps but do not execute JavaScript. "Send code" is for running logic or appending new HTML.
vs. Pop-ups: Pop-ups are self-contained messages that appear over your website content and are loaded in an
iframe. They cannot directly interact with or modify the elements of your page. "Send code" operates directly on the page itself.
For a comprehensive overview of how you can use User.com to alter your website's front end, please see our guide: Managing the Frontend Layer of Your Website with User.com.