Tracking Custom Events

You can track any action that isn't a standard page view or click. This is perfect for things like form submissions, video plays, or other unique interactions. To do this, you track a custom event from your site's code.

window.seentics.track('your_custom_event_name');

Example: Tracking a custom "video-played" event

// Get your video element
const videoPlayer = document.getElementById('product-demo-video');

// Add an event listener
videoPlayer.addEventListener('play', function() {
  // Send the event to Seentics when the video starts playing
  window.seentics.track('video-played');
});
                    

Tracking Pre-configured Conversion Events

To make things even easier, you can use our pre-configured event names to automatically track primary conversion goals. Using the conversion: prefix will count the event towards your main dashboard metrics.

Custom UI (Modals & Banners)

For fully custom experiences, use the "Show Modal" or "Show Banner" actions with Display Mode = Custom. We render your HTML/CSS/JS inside an isolated iframe so your animations and scripts work reliably without affecting the host page.

What you can provide

• Custom HTML: Provide a complete snippet or a full HTML. We automatically extract the body.
• Custom CSS: Paste styles, including keyframes and media queries.
• Custom JS: Vanilla JS; runs when the iframe loads.

Notes

• Iframe sandbox allows scripts and same-origin for functionality while isolating styles from the host.
• We auto-resize the iframe to match content height for banners.
• Close button is overlayed outside the iframe for consistent UX.

Example: Custom Banner

<div class="banner">
  <div class="banner-content">
    <h1>Create Something <span class="highlight">Amazing</span></h1>
    <p class="subtitle">Transform your ideas into reality</p>
    <button id="primaryBtn">Get Started</button>
  </div>
</div>

html, body { margin: 0; padding: 0; }
.banner { width: 100vw; min-height: 40vh; display: grid; place-items: center; background: linear-gradient(135deg,#667eea,#764ba2); }
.banner-content { max-width: none; padding: 0 1rem; text-align: center; color: #fff; }
.highlight { color: #ffd93d; }

document.getElementById('primaryBtn')?.addEventListener('click', () => {
  window.parent?.postMessage({ type: 'banner_cta_click' }, '*');
});

Using Webhooks

The "Webhook" action is the primary tool for sending data from your workflows to other services (like Zapier, Make, or your own backend). When a workflow executes a Webhook action, Seentics will send a `POST` request to the URL you specify with a JSON payload containing all available data about the user and event.

To send tag or other event information to your backend, you should chain a "Webhook" action after the "Add/Remove Tag" action in your workflow.

Using Dynamic Data

Server-side actions like "Send Email" and "Webhook" can be personalized with data from the user's browser `localStorage`. This is useful for including dynamic information like a cart ID, a username, or other details your application stores locally.

In the settings for a server action, you can map a `localStorage` key to a `payloadKey`. You can then use this `payloadKey` in your action's text fields (like an email subject) using placeholders, like {{payloadKey}}. This will be replaced with the actual value from the user's `localStorage` at the time of execution.