How to Embed a UniLink Page in an iFrame (Display Your Page on Any Website)

Embed your UniLink page inside any website, portfolio, or tool that accepts HTML — a single iframe tag is all it takes to display your full link-in-bio page inline.

Embedding your UniLink page in another website lets visitors browse your links, products, and content without leaving your portfolio, Notion workspace, or client presentation. It is useful when your primary web presence is somewhere other than UniLink — a WordPress site, a Squarespace portfolio, or a custom HTML page — but you want to display your dynamic link hub inline without duplicating content. The embed is a live view of your actual UniLink page, so any updates you make in the dashboard appear automatically everywhere the iframe is embedded.

What iFrame Embedding Does

An HTML iframe element loads an external web page inside a rectangular region of your page. When you point an iframe at your UniLink URL, visitors see your full UniLink page — with your links, blocks, theme, and branding — rendered inside your host site. Clicks on links within the iframe open in the iframe's context by default; you can add target="_blank" behavior to individual links in your UniLink dashboard to ensure clicks open in a new tab rather than navigating the iframe itself.

UniLink pages load over HTTPS, which is a requirement for iframe embedding on any HTTPS-hosted site. If your host site runs on HTTP (uncommon today but still seen on some self-hosted setups), embedding an HTTPS UniLink page may trigger a mixed-content warning and block the iframe. The solution is to ensure your host site itself uses HTTPS — modern browsers block HTTP iframes inside HTTPS pages by default. UniLink pages do not set restrictive X-Frame-Options headers, so embedding is permitted from any origin without special configuration.

The iframe approach has a key limitation to understand: the embedded page is visually isolated from your host site's layout. Your host site's CSS, fonts, and JavaScript do not affect the rendered UniLink page inside the iframe, and the UniLink page's scripts cannot access the host site's DOM. This isolation is actually a feature from a security standpoint — it means embedding a UniLink page cannot interfere with your host site's functionality. But it does mean you cannot inject additional styles or scripts into the embedded view from outside the iframe.

How to Get Started

1. Find your UniLink page URL — either your default URL at https://unil.ink/username or your custom domain URL if you have one connected.
2. Copy the basic iframe snippet: <iframe src="https://unil.ink/username" width="100%" height="600" frameborder="0"></iframe>. Replace username with your actual username.
3. Open the HTML editor of your host site — the "Custom HTML" block in WordPress, the "Embed" element in Squarespace, the "/Embed" block in Notion, or the raw HTML of your static site.
4. Paste the iframe snippet into the editor. Save and preview the page to confirm your UniLink page renders inside the iframe.
5. Adjust the height attribute to match your page's content length. If your UniLink page is long, increase the height value (e.g., height="900") to avoid scroll bars inside the iframe.

How to Use iFrame Embedding

1. Basic embed: Paste <iframe src="https://unil.ink/username" width="100%" height="600" frameborder="0"></iframe> into any HTML editor. The frameborder="0" attribute removes the default browser border around the iframe.
2. Responsive height: For pages where content length varies, wrap the iframe in a div with position: relative; padding-bottom: 150% and set the iframe to position: absolute; top:0; left:0; width:100%; height:100% for a fully fluid embed.
3. Fixed-width centered embed: Wrap the iframe in a div with max-width: 420px; margin: 0 auto; to match the phone-width layout that UniLink pages are optimized for — this avoids stretching the design on wide screens.
4. Notion embed: In Notion, type /embed, paste your https://unil.ink/username URL into the embed dialog, and Notion renders it as an inline frame. Resize the block in Notion to control the displayed height.
5. Client presentation: In Google Slides or Canva presentations that support web embeds, use the embed or iframe option and paste your UniLink URL. Visitors can interact with your links during the presentation without leaving the slide deck viewer.

Key Settings

Get the Most Out Of iFrame Embedding

Use iframe embedding in client proposals and case studies to show your UniLink page live inside the proposal document. Tools like Notion, Coda, and GitBook all support iframes — paste your UniLink URL as an embed and the client sees your actual working page rather than a static screenshot. This is especially effective for creator portfolios: the client can click through your links and explore your content as part of reviewing the proposal, without you needing to share a separate URL.

For WordPress sites, the classic block editor supports a Custom HTML block where you can paste the iframe code directly. The block editor's Embed block also supports arbitrary URLs — try pasting your UniLink URL there first, and if it auto-detects as an oEmbed (see the oEmbed article for details), it will render as a formatted card instead of a raw iframe. If you want the full interactive page rather than a card, use Custom HTML with the explicit iframe tag.

The iframe does not resize automatically to match your UniLink page's content height — this is a fundamental browser security restriction (cross-origin iframes cannot communicate their height to the parent page without a postMessage setup). If your UniLink page grows significantly as you add blocks and links, remember to update the height attribute in your iframe embed. A height that is too short shows internal scroll bars inside the iframe, which creates a poor user experience.

For pages where you want the embedded UniLink page to look completely seamless — no scroll, no cut-off — consider using the iframe as a full-section embed rather than an inline element. Set the iframe to width: 100%; height: 100vh; inside a full-height section of your page. This gives visitors the full UniLink experience in a section of your site while keeping your site's header and navigation visible above.

Troubleshooting

• The basic embed snippet is <iframe src="https://unil.ink/username" width="100%" height="600" frameborder="0"></iframe> — paste it into any HTML editor.
• Wrap in a max-width: 420px container to keep the mobile-optimized layout looking correct on desktop screens.
• Height must be set manually — increase it if content is cut off; there is no auto-resize without custom JavaScript.
• Your host site must use HTTPS — HTTP host sites cannot embed HTTPS iframes without a mixed-content error.
• Updates to your UniLink page reflect automatically in all iframe embeds without changing any embed code.