A step-by-step guide to adding the HTML Code block to your UniLink page so you can embed custom widgets, third-party forms, payment buttons, countdown clocks, and any other code that does not have a native UniLink block.
- The HTML Code block runs arbitrary HTML, CSS, and JavaScript inside a sandboxed iframe on your UniLink page — paste the embed snippet from Calendly, Typeform, HubSpot, Stripe, or any other tool and it renders live for visitors.
- Scripts run inside an iframe sandbox and cannot access your page's cookies, localStorage, or parent DOM — this is by design; most embed snippets work fine within it, but full-page scripts built to run at root level do not.
- If your third-party tool shows a blank embed or a permission error, the most common fix is whitelisting
unil.inkin the tool's allowed-origins or trusted-domains settings — not editing the code block itself. - Only paste the embed snippet, not a full HTML page — adding
<!DOCTYPE html>,<html>,<head>, or<body>tags around your snippet is the single most common mistake and it breaks the render every time.
Most link-in-bio platforms give you a fixed set of blocks and leave you waiting for the product roadmap when something is missing. The HTML Code block in UniLink is the escape hatch: if you can get an embed snippet for something — a booking widget, a payment button, a Typeform survey, a custom countdown clock, a HubSpot form, an interactive data visualization — you can put it on your page today without waiting for a native block. You are not limited to what UniLink has built. You are limited by what you can embed, and that set is enormous. This guide walks through exactly how the block works, where it falls short, how to configure it correctly, and how to fix the problems that show up most often when third-party embeds misbehave.
What the HTML Code block does
The HTML Code block renders any HTML, CSS, and JavaScript you paste into it inside a sandboxed iframe that sits within your UniLink page. From the visitor's perspective it looks like a seamless part of the page — whatever you embed appears at that position in the page layout, with the height and width you configure. The iframe isolation means the embedded code cannot accidentally break the rest of your UniLink page: a JavaScript error in your embed does not crash the navigation, a rogue CSS rule does not reformat your header, a malformed script does not expose visitor data from other parts of the page.
The practical uses are wide. Common embeds include Calendly booking widgets (visitors can book a call directly on your page), Typeform surveys and quizzes, Stripe payment buttons for one-time purchases without a full e-commerce setup, HubSpot and Mailchimp embedded forms for lead capture, custom countdown timers with specific business logic, Google Maps embeds, Loom video players with additional context, and any third-party analytics pixel that needs to fire when a visitor lands on your page. If the tool you use has an "embed" or "share → embed code" option in its interface, the HTML Code block is almost certainly the right place to put that output.
The limitations are specific and worth knowing before you build. Scripts inside the iframe run in a sandboxed environment: they cannot read or write to the parent page's cookies, localStorage, or sessionStorage. They cannot call JavaScript functions defined outside the iframe. External CSS injected from inside the iframe does not bleed out to the parent page. These constraints are browser security standards, not UniLink restrictions — the same rules apply to any embedded iframe on any platform. For most third-party embed snippets, the sandbox is not a problem because those tools are designed to be self-contained. Where it does become a problem is when someone tries to paste a full custom script that was written to run at the root page level and relies on reading parent-page context.
Before you start
- Get your embed snippet, not a share URL: Every third-party tool has two ways to share content — a share URL (a link someone visits) and an embed code (an HTML snippet to paste into another page). You want the embed code. In Calendly, this is under Share → Add to Website → Inline Embed → Copy Code. In Typeform, it is under Share → Embed in a web page. In HubSpot, it is under Marketing → Forms → your form → Embed. Copy the snippet exactly as provided — do not add or strip any part of it.
- Check if your tool requires domain whitelisting: Some tools — Typeform, Calendly, certain Stripe configurations — require that the domain embedding them is listed in their trusted-origins or allowed-domains settings before the embed will render. The domain to whitelist is
unil.ink. Do this step before adding the block to your page; otherwise you will see a blank or broken embed and spend time debugging the wrong thing. - Estimate the height you need: Look at the embed on a test page or on the tool's own demo to get a sense of the pixel height it needs to display without scrollbars or cutoff. Calendly inline widgets need around 630px. A simple Typeform question might need 500px. A multi-step form might need 700px or more. Having this estimate before you open the editor saves you multiple save-reload cycles trying to get the height right.
- Confirm you only need the snippet: Open the embed code in a text editor and look at what it contains. If it is a short snippet starting with a
<div>or a<script>tag, it is the right thing. If it starts with<!DOCTYPE html>, you have accidentally copied a full page preview instead of the embed snippet — go back to the tool and find the raw embed code option.
How to add the HTML Code block to your page
- Open your page in the Dashboard: Log in to UniLink, navigate to My Pages, and click Edit on the page where you want the embed to appear.
- Add a new block: Click + Add Block in the editor. In the block picker, find the Advanced or Custom section and select HTML Code.
- Paste your embed snippet: Click into the code input field and paste your embed snippet. Do not wrap it in
<html>,<head>, or<body>tags — paste the raw snippet exactly as you copied it from the third-party tool. If the snippet includes both a<div>and a<script>tag, paste both; they belong together. - Set the iframe height: Enter the height in pixels or leave it on auto. Auto height attempts to detect the content height and resize the iframe accordingly — it works for most static content but can behave unexpectedly with dynamically loaded widgets that change size after initial render. For widgets with a known fixed height (like Calendly), set a specific pixel value. For content that expands unpredictably (multi-step forms), auto is a reasonable starting point and you can override it if the cutoff is a problem.
- Configure sandbox permissions: The sandbox permissions panel lets you enable specific capabilities the iframe needs. The available toggles are allow-scripts (required for any JavaScript-based embed), allow-forms (required for any embed that submits a form — Typeform, HubSpot, lead capture), and allow-same-origin (required if the embed needs to make authenticated requests back to its own origin). Enable only what your specific embed requires. If you are embedding a Calendly widget, you need allow-scripts and allow-forms. If you are embedding a static HTML widget with no JavaScript, you may need none. Enabling allow-same-origin without a clear need is the one permission to be thoughtful about — it allows the iframe content to access origin-level browser features.
- Preview and adjust height: Click the preview button or open your live page in a new tab to see the embed. If the content is cut off at the bottom, increase the height value. If there is a large empty space below the embed, decrease it. Reload after each adjustment to see the effect — preview may cache the previous render.
- Save and publish: Click Save, then Publish. Check the live page on both desktop and mobile. Some embeds that look correct on desktop render poorly at narrow widths — if the embed overflows on mobile, return to the block settings and reduce the iframe width or switch it to 100% fluid width.
Key settings explained
| Setting | What it controls | Best practice |
|---|---|---|
| Code input | The raw HTML, CSS, and JavaScript snippet that renders inside the iframe | Paste only the embed snippet from the third-party tool — no DOCTYPE, no html/head/body tags, no extra wrappers; the block generates the surrounding iframe structure itself |
| Iframe height | The pixel height of the rendered iframe on your page | Use a fixed pixel value for embeds with known dimensions (Calendly: ~630px, simple Typeform: ~500px); use auto only for truly variable-length content and accept that it may need manual override if the widget resizes after load |
| Iframe width | Whether the iframe takes full page width or a specific pixel width | Leave at 100% for almost all embeds — fixed-width iframes overflow on narrow mobile screens and most third-party widgets are responsive by default, so 100% is the correct setting |
| allow-scripts | Permits JavaScript to run inside the iframe | Enable for any JavaScript-based widget; required for Calendly, Typeform, Stripe.js, HubSpot forms, custom countdown timers, and virtually any interactive embed — disable only for purely static HTML content |
| allow-forms | Permits form submission from within the iframe | Enable whenever the embed contains a form — HubSpot, Typeform, Mailchimp embedded forms, any lead-capture widget; without it the submit button will appear to work but no data will be sent |
| allow-same-origin | Allows the iframe to behave as if it is from the same origin as the parent page, enabling access to cookies and certain browser APIs | Enable only when the embed's documentation explicitly requires it; most third-party embeds do not need it and enabling it unnecessarily expands the sandbox in ways that are not required |
| Custom CSS wrapper | CSS applied to the container div that wraps the iframe — not inside the iframe itself | Use this to add margin, padding, border-radius, or a background color around the embed container; these styles apply to the outer wrapper and appear on your page correctly regardless of the iframe sandbox |
unil.ink in the tool's allowed-domains settings — not a problem with your code or the block settings. In Calendly, go to Account → Integrations → Embed and add unil.ink to the allowed domains list. In Typeform, go to Settings → Security → Allowed domains. In Stripe, the Payment Button embed reads the domains you list in your Stripe Dashboard under Payment Links → Settings → Custom domains. Whitelist the domain, reload the live page, and the embed will render without any changes to the block.
Getting the most out of your HTML Code block embeds
The HTML Code block is most valuable when used to close conversion gaps that native blocks leave open. A Calendly embed directly on your bio page removes a step from the booking flow — instead of sending someone to your Calendly link where they arrive cold, they can book while they are already reading about you and already interested. The context you have built in your other blocks (a Testimonials block above, a Bio block below) works together with the booking widget in a way that a standalone Calendly link cannot replicate because a standalone link is a different page with none of that context.
The same logic applies to lead capture forms. A HubSpot or Mailchimp embedded form on your UniLink page lets you capture names and emails directly into your CRM or email list without sending visitors to a separate landing page. Visitors who are already on your bio page and already interested in what you do are far more likely to fill in a short embedded form than to click through to a separate page, read a new page, and fill in the same form there. Fewer steps between interest and action is always better, and the HTML Code block is the tool that eliminates those steps for tools that do not have a native UniLink block yet.
For pixel-based tracking — Google Analytics events, Meta pixel, TikTok pixel snippets — the HTML Code block is also the right place. If you need a pixel to fire when visitors land on a specific page rather than site-wide, adding it inside an HTML Code block on that page fires it for every visitor who loads that block. Position the block anywhere on the page; since it has no visible content, set the height to 1px and the width to 100% so it takes no visible space. The pixel fires on page load without any visible element appearing in the layout.
One important note on performance: every JavaScript-based embed loads external scripts from a third-party CDN. A page with four or five HTML Code blocks each loading external scripts will load noticeably slower than a page with none. Keep embed usage focused on the conversion tools that genuinely matter on a given page — not every tool you use needs to be embedded on every page. A booking page should have the Calendly embed. A lead-capture page should have the form embed. A general bio page probably does not need both simultaneously.
Troubleshooting common issues
| Problem | Likely cause | Fix |
|---|---|---|
| Embed shows blank on the live page | Third-party tool has not whitelisted unil.ink as an allowed embed domain |
Go to the tool's settings and add unil.ink to the allowed/trusted domains list; this is the most common cause of a blank embed and it is never fixed by editing the code in the block |
| Content is cut off at the bottom | Iframe height is set too low for the actual content height | Increase the height value in increments of 50px until the full content is visible; for dynamic widgets that resize after load, switch to auto height and test whether the widget's own resize detection handles it correctly |
| Form submit button does nothing | allow-forms sandbox permission is not enabled | Edit the block, open sandbox permissions, enable allow-forms, save and republish; without this permission, form submissions are silently blocked by the browser's sandboxing rules |
| JavaScript widget appears broken or non-functional | allow-scripts is not enabled, or the snippet is missing its paired script tag | Enable allow-scripts in sandbox permissions; also verify you pasted both parts of the embed snippet — many widgets require a <div> placeholder and a separate <script> tag; pasting only one breaks the initialization |
| Embed overflows horizontally on mobile | The iframe is set to a fixed pixel width that is wider than mobile viewport | Set iframe width to 100% instead of a fixed pixel value; most modern embed widgets are responsive and will adapt to the iframe width correctly |
| Embed renders correctly in preview but not on the live page | The Dashboard preview runs in a different environment than the live page; CORS settings or allowed-domain lists may not match | Test on the actual live URL at unil.ink/yourusername, not just the Dashboard preview; check the browser's developer console on the live page for specific error messages that indicate what the embed is complaining about |
| Large blank space below the embed | Iframe height is set higher than the content requires | Reduce the height value or switch to auto; also check whether the embed widget has a minimum height setting on its own side (some Calendly embed configurations set a minimum regardless of the iframe height) |
Best fit for
- Embedding booking widgets (Calendly, Acuity, Cal.com) so visitors can schedule directly on your page without leaving your bio context
- Adding lead capture forms from HubSpot, Mailchimp, or Typeform directly into your page flow without sending visitors to a separate landing page
- Placing Stripe payment buttons for simple one-time purchases that do not need UniLink's full e-commerce product setup
- Running custom countdown timers, interactive maps, data embeds, or widgets built specifically for your use case that no native UniLink block covers
- Firing analytics pixels or conversion tracking scripts on specific pages rather than site-wide
Not the right tool if
- You need full product checkout with inventory, variants, and order management — the Store or Digital blocks handle e-commerce properly; the HTML Code block is a payment button, not a product catalog
- Your embed requires access to parent-page cookies or localStorage — the iframe sandbox deliberately blocks this and there is no workaround within the block's design
- You are embedding something that has a native UniLink block — a YouTube video, a Spotify player, a Linktree-style link grid — using the HTML Code block for these is more fragile than using the purpose-built block
- You need the embed to load as fast as possible — every external JavaScript embed adds a network request and render delay; for performance-sensitive pages, audit whether each embed is genuinely converting visitors before keeping it
Frequently asked questions
Can I embed a full HTML page with a DOCTYPE tag?
No — paste only the embed snippet, not a complete HTML document. The HTML Code block generates the iframe and its wrapping structure automatically. When you paste a full page with <!DOCTYPE html>, <html>, <head>, and <body> tags, the browser sees nested document declarations inside the iframe and the render breaks in unpredictable ways. Go back to the third-party tool's embed dialog and copy only the snippet it provides — typically a <div> element and a <script> tag, not a full page.
Why does my Calendly embed work in preview but show blank on my live page?
Calendly requires that embedding domains be explicitly listed in your Calendly account settings before the widget renders on external pages. Go to your Calendly account, navigate to Account → Integrations → Embed, and add unil.ink to the allowed domains. The Dashboard preview bypasses this check in some configurations, which is why the embed appears to work in preview but fails on the live page. Once you whitelist unil.ink, the embed will render on your live page without any changes to the block itself.
Can I use the HTML Code block to add tracking pixels like Meta Pixel or TikTok Pixel?
Yes, and the HTML Code block is a clean way to do this for page-specific pixel firing. Paste the pixel snippet into the code field, set the iframe height to 1px so it takes no visible space, and enable allow-scripts. The pixel will fire for every visitor who loads that page. For site-wide pixel firing across all your UniLink pages, this approach requires adding the block to each page individually — there is currently no site-wide script injection in UniLink. For site-wide tracking, consider whether your analytics tool has a native integration in Dashboard settings before using the per-page block approach.
Does the HTML Code block work for Stripe payment buttons?
Yes. Generate a Stripe Payment Link, use Stripe's "Embed a buy button" option in their Payment Links interface, copy the provided snippet, and paste it into the HTML Code block. Enable allow-scripts and allow-forms. The buy button will render on your page and open Stripe's hosted checkout flow when clicked. This is a faster setup than UniLink's full Store block if you only need a single product purchase button without inventory management, variants, or order history tracking.
Can the embedded code access visitor data from other parts of my UniLink page?
No — the iframe sandbox is specifically designed to prevent this. Code running inside the HTML Code block iframe cannot read cookies set by UniLink, cannot access localStorage values from the parent page, and cannot call JavaScript functions defined outside the iframe. This is a security boundary, not a configuration option — it cannot be toggled off. The allow-same-origin permission expands what the iframe code can do within its own origin, but it does not give access to the parent UniLink page's data. Design your embeds assuming full isolation from the surrounding page.
- Paste only the embed snippet from your third-party tool — no DOCTYPE, html, head, or body tags; the block builds the iframe around your snippet automatically and wrapping it in a full page structure breaks the render.
- If the embed shows blank on your live page, the first thing to check is whether you have whitelisted
unil.inkin the third-party tool's allowed-domains settings — this is the cause of blank embeds far more often than any problem with the code block configuration. - Enable only the sandbox permissions your specific embed needs — allow-scripts for JavaScript widgets, allow-forms for form submissions — and leave allow-same-origin off unless the embed's documentation explicitly requires it.
- Set a fixed pixel height for embeds with known dimensions and use auto height only for content that expands dynamically; auto height can produce unexpected results with widgets that resize themselves after the initial load.
- Keep the number of HTML Code blocks per page low — every JavaScript-based embed adds an external script load and measurable page weight; audit each embed for actual conversion value before keeping it on a high-traffic page.
Ready to embed your tools on your page? Create your free UniLink page and use the HTML Code block to put your Calendly, Typeform, Stripe button, or custom widget exactly where visitors will see it — no developer required.