How to Add Custom JavaScript to UniLink (Track Events and Add Custom Behavior)
How to Add Custom JavaScript to UniLink (Track Events and Add Custom Behavior)
Inject custom JavaScript into your UniLink page to add advanced tracking, chat widgets, dynamic content, and any behavior the native editor doesn't support.
- Custom JS runs after your page loads, giving you full access to the page's DOM and all loaded third-party scripts.
- Access it via Dashboard → Settings → Advanced → Custom JS — requires a Business plan.
- Common uses include custom analytics events, chat widgets, A/B testing scripts, and dynamic content injection.
The native UniLink editor supports the most common integrations through dedicated settings — Google Analytics, Facebook Pixel, and similar tools have first-class support. But when you need to go beyond built-in integrations, Custom JavaScript is the tool for the job. Whether you want to fire a custom conversion event on a specific button click, load a third-party chat widget that UniLink doesn't have a native connector for, or run a simple A/B test on your call-to-action wording, Custom JS gives you the access you need without requiring any changes to the platform itself.
What Custom JavaScript Does
Custom JS on UniLink is injected into your page and executed after the page has finished loading. This timing is intentional: by running after the DOM is fully constructed, your scripts can safely query and manipulate any element on the page without risk of running before the content they target exists. The execution context is a standard browser environment — you have access to window, document, standard Web APIs, and any third-party scripts that were loaded earlier in the page lifecycle (such as analytics tags configured in your page settings).
The scope of what Custom JS can do is broad. You can listen for events on page elements (clicks, form submissions, scroll depth) and send those events to analytics platforms, trigger popups or notifications based on user behavior, dynamically modify text or images based on URL parameters, load and initialize third-party widgets such as chat tools or appointment booking embeds, and run lightweight A/B testing by randomly applying different styles or content to a page. The practical constraint is that your script runs in a sandboxed page context and cannot access other users' pages or UniLink's internal data.
Because Custom JS runs in a real browser environment, you can also use it to load additional scripts dynamically. A common pattern is writing a small script that creates a <script> element, sets its src to a third-party CDN URL, and appends it to the document. This is how you'd load a chat widget SDK, a heatmap tool like Hotjar, or any other tool that provides a JavaScript snippet for installation. This approach works cleanly and gives you control over when the third-party script loads relative to your page content.
How to Get Started
- Verify your plan. Custom JavaScript requires the Business plan. Go to Settings → Billing in your Dashboard to confirm your current plan. If you're on Starter or Pro, upgrade before proceeding.
- Open Dashboard → Settings → Advanced. Log in at app.unilink.us, navigate to your page editor, click "Settings" in the sidebar, and open the "Advanced" tab.
- Locate the Custom JS field. Scroll down in the Advanced tab to find the "Custom JavaScript" textarea. This is where you'll write or paste your scripts.
- Write a test script. Before adding production code, test that the field works with a simple script:
console.log('Custom JS loaded');. Save, preview the page, and open the browser console (F12) to verify the message appears. - Save and test thoroughly. After adding your actual script, save the settings and test every behavior on both desktop and mobile. Custom JS runs on all devices, so verify that scripts behave correctly across screen sizes and browsers.
How to Use Custom JS
- Add a custom analytics event. If you use Google Analytics 4 and want to track clicks on a specific link block, write an event listener that fires a
gtag('event', ...)call when that element is clicked. Usedocument.querySelectorwith data attributes to find the element reliably across platform updates. - Load a third-party chat widget. Paste the chat widget's installation snippet (usually 10–15 lines of JavaScript) directly into the Custom JS field. Most chat providers give you a script snippet specifically for pasting into a site's code — this field is exactly where it goes.
- Inject dynamic content based on URL parameters. Write a script that reads
window.location.search, parses query parameters (e.g.,?source=instagram), and updates visible text or shows/hides elements accordingly. This is useful for personalized landing experiences from different traffic sources. - Set up A/B testing. Write a script that uses
Math.random()to assign visitors to variant A or B, applies the appropriate CSS class or content change, and fires an analytics event recording which variant was shown. Keep A/B tests simple in Custom JS — complex experiments are better handled by dedicated testing tools. - Trigger retargeting pixel events on specific actions. If you're running Facebook or TikTok ads, fire pixel events like
fbq('track', 'Lead')when users complete a meaningful action on your page, such as clicking a booking link or scrolling to a certain depth. This improves the signal quality for your ad platform's optimization algorithm.
Key Settings
| Setting | What It Does | Recommended |
|---|---|---|
| Custom JS Field | Executes your JavaScript after page load in the browser's standard runtime context | Keep scripts minimal and well-commented; complex logic belongs in external files loaded via dynamic script injection |
| Execution Timing | Scripts run after the page DOM is fully loaded — equivalent to being inside a DOMContentLoaded handler | Do not wrap your code in an additional DOMContentLoaded listener; the field already ensures the DOM is ready |
| Error Handling | JavaScript errors in your custom code can break other scripts on the page if unhandled | Wrap potentially failing code in try/catch blocks to prevent one error from disabling all custom scripts |
| Third-Party Script Loading | Dynamic script injection lets you load external SDKs from the Custom JS field | Load only necessary scripts; each additional third-party script adds page load time |
| Plan Requirement | Business plan required — the field is not accessible on Starter or Pro plans | Confirm plan before investing time writing scripts that you then can't deploy |
(function() { /* your code */ })();. This keeps your variables scoped locally and prevents accidental conflicts with variables defined by the platform or other scripts running on the page.
Get the Most Out Of Custom JS
The most impactful use of Custom JS for most UniLink users is improving analytics fidelity. Default page view tracking tells you how many people visited your page, but click-level event tracking on specific links and blocks tells you which content actually drives behavior. Adding five lines of event tracking code to fire GA4 events on your most important link blocks — your booking link, your product link, your newsletter signup — transforms your analytics from vanity metrics into actionable conversion data. This makes it possible to make real decisions about block placement, copy, and design based on what's actually working.
Chat widgets are the second most common use case and one of the highest-conversion additions to a link-in-bio page for service businesses. Tools like Intercom, Tidio, Crisp, and Drift all provide JavaScript snippets that load their chat bubbles onto any web page. Pasting that snippet into the Custom JS field takes 30 seconds and immediately gives visitors a direct channel to message you. For coaches, consultants, and service providers, the conversion lift from an accessible live chat can be significant — especially on mobile where filling out a form feels like friction.
Be deliberate about performance. Every script you add to Custom JS runs in the browser and consumes processing time. A poorly written script that queries the DOM in a loop, or a third-party SDK that loads a large bundle, will noticeably slow down your page — and page load speed has a direct impact on both SEO and user experience. Before adding any third-party tool via Custom JS, check the tool's script size and test your page load time in Google PageSpeed Insights before and after adding it. If the score drops significantly, consider whether the tool is worth the trade-off.
Keep your Custom JS organized as it grows. After adding several scripts over time, the field can become difficult to maintain if there's no structure. Use comment blocks to label each distinct piece of functionality, and consider consolidating related scripts rather than accumulating independent snippets. If your Custom JS exceeds 50 lines, evaluate whether some of the logic could be moved to a hosted external script that you dynamically load — this keeps the field clean and allows you to update the script without touching the UniLink settings each time.
Troubleshooting
| Problem | Cause | Fix |
|---|---|---|
| Script not executing on the page | Syntax error in the JavaScript prevents the entire script block from running | Open browser DevTools console, look for the error message and line number, then fix the syntax issue in the Custom JS field |
| Element not found when trying to query it | Script targeting an element that doesn't exist on this specific page | Add a null check before acting on the element: const el = document.querySelector(...); if (el) { /* do something */ } |
| Third-party widget not loading | External script URL blocked by browser Content Security Policy or ad blocker | Test in a browser with extensions disabled; if the widget loads there, the issue is a browser extension on the test device, not a code problem |
| Custom JS field not visible in Settings → Advanced | Account is not on the Business plan | Upgrade to Business plan in Settings → Billing; the Custom JS field becomes visible immediately after the plan change processes |
- Runs after page load with full DOM access — covers any use case that needs browser-side scripting
- Enables third-party tools without requiring native UniLink integrations for each one
- Custom analytics events improve conversion tracking far beyond default page view data
- A/B testing and dynamic content personalization are possible without external tools
- Requires Business plan — not accessible on Starter or Pro
- Poorly written scripts can break page behavior or slow load times
- No version history — errors require manual reverting by editing the field directly
Frequently Asked Questions
Does Custom JS run on every page visit or just once?
Custom JS runs on every page load, not just the first visit. There is no session-based suppression built in. If you need scripts to run only once per user session, implement that logic yourself using sessionStorage or localStorage to track whether the script has already run.
Can I use jQuery in Custom JS?
jQuery is not loaded by default on UniLink pages, so you cannot use the $ shorthand without loading it first. You can dynamically load jQuery via a script tag if needed, but modern vanilla JavaScript covers the same use cases with less overhead. Most analytics and widget snippets also work fine without jQuery.
Is Custom JS safe to use? Could it expose my page to security risks?
Custom JS runs only in your visitors' browsers within the context of your page. It cannot access other users' UniLink data or the platform backend. The main risk is to your own page — malicious or buggy code can break your page experience or expose visitors to tracking scripts if misused. Only add scripts from trusted sources.
Will my Custom JS break if UniLink updates the platform?
Scripts targeting stable APIs (analytics gtag calls, document.querySelector with data attributes, window.location) are very unlikely to break on platform updates. Scripts that rely on specific DOM structure or internal class names may need updating if the page structure changes. Use data attributes for element selection to minimize this risk.
Can I load a remote .js file instead of writing code directly in the field?
Yes. Write a short script in the Custom JS field that dynamically creates a script element and sets its src to your hosted .js file URL. This is a common pattern: var s = document.createElement('script'); s.src = 'https://yourcdnhost.com/script.js'; document.head.appendChild(s);. This lets you update the hosted script without changing the Custom JS field in UniLink.
- Custom JS executes after page load with full browser DOM access — use it for tracking, widgets, and dynamic behavior.
- Wrap all code in an IIFE to scope variables and prevent conflicts with platform scripts.
- Use try/catch blocks to prevent one script error from disabling all your custom JavaScript.
- Minimize third-party script loads — each one adds page load time that affects user experience and SEO.
- Business plan is required; confirm your plan before investing time writing production scripts.
Ready to add custom tracking or widgets to your UniLink page? Open your Dashboard and find Custom JS under Settings → Advanced.
Create Your Free Link-in-Bio Page
Join thousands of creators using UniLink. 40+ blocks, analytics, e-commerce, and AI tools — all free.
Get Started Free