A step-by-step guide to adding the Custom App block to your UniLink page so you can embed Calendly, Typeform, Gumroad, Ko-fi, Stripe payment links, and dozens of other third-party tools — with pre-configured settings and no raw code required.
- The Custom App block embeds third-party tools directly on your UniLink page using a pre-configured list of supported apps (Calendly, Typeform, Gumroad, Ko-fi, Stripe, and more) — choose from the list and enter your embed URL, and the correct iframe settings are applied automatically.
- The key difference from the HTML Code block: Custom App has pre-validated integrations for common tools with correct embed parameters already set; HTML Code is for arbitrary raw snippets and requires you to configure sandbox permissions manually.
- If the app you want to embed is on the supported list, use Custom App — not HTML Code — for a faster and more reliable setup.
- The most common failure mode is embedding a URL that requires the visitor to log in; the visitor sees a login screen instead of the app, which is never fixable within UniLink — the app itself must provide a public embed URL.
Native blocks in UniLink handle the tools that creators use most frequently — Spotify, YouTube, booking calendars, product listings, lead capture forms. But the ecosystem of tools creators actually use is larger than any predefined block list, and new tools appear faster than any platform can build native integrations for them. The Custom App block is the answer to that gap. It gives you a structured, validated way to embed a wide range of third-party apps without writing code — pick your app from a list, paste your embed URL, and the block applies the correct iframe configuration for that app automatically. It is more managed than the raw HTML Code block and more flexible than the set of native UniLink blocks. For the tools it supports, it is almost always the right choice.
What the Custom App block does
The Custom App block renders a third-party application inside your UniLink page using an iframe. The core distinction from the HTML Code block is the pre-configuration layer: for supported apps — Calendly, Typeform, Jotform, HubSpot forms, Stripe payment links, Gumroad products, Ko-fi widget, Buy Me a Coffee, Patreon, and any URL that supports iFrame embedding — the block already knows the correct iframe parameters, sandbox permissions, and default height settings for that app. When you select Calendly from the app list and paste your Calendly embed URL, you do not need to manually enable allow-scripts and allow-forms or figure out that Calendly needs at least 630px height to render correctly. The block handles those decisions. You paste the URL and get a working embed.
For apps not on the supported list, the block also accepts a custom embed URL or raw iframe code — in this mode it behaves more like the HTML Code block, but with a cleaner interface. You still get the display height and width controls, the custom CSS wrapper, and the structured settings panel rather than a raw text field. This makes Custom App the generally preferable starting point for any embed attempt, with HTML Code as the fallback when you need to paste a multi-part snippet with both a div and a script tag that the Custom App interface cannot handle.
The block is a visual configuration tool, not a development environment. The target user is a creator who knows the embed URL for their Calendly event or their Typeform form and wants it to appear on their UniLink page without reading documentation about iframe sandbox attributes. For that user, Custom App takes a task that used to require three rounds of troubleshooting the HTML Code block down to a two-minute setup. The tradeoff is that the block is optimized for the supported tools list — if what you need is a highly customized embed with specific JavaScript hooks, the HTML Code block gives you more control.
Before you start
- Find the correct embed URL for your app: The Custom App block needs the embeddable URL for your specific content, not the public page URL. In Calendly, this is your event link (e.g.,
calendly.com/yourname/30min— the block converts this to the inline embed format automatically). In Typeform, use your form's public URL from Share → Copy link. In Gumroad, go to the product page and find the embed URL from Share → Embed. In Stripe, use a Payment Link URL from your Stripe Dashboard under Payment Links. The URL must resolve to a public page — not a dashboard, admin panel, or anything behind a login. - Verify the app allows cross-origin embedding: Open your browser's developer tools on any page, paste your embed URL as a test iframe, and check the console for
X-Frame-Options: DENYorContent-Security-Policy: frame-ancestorserrors. If you see these, the app is blocking iFrame embedding at their end — and no amount of configuration on the UniLink side will fix it. Check the app's documentation for embed support or contact their support team to enable embedding for your domain (unil.ink). Most tools on the supported list have already confirmed that embedding works. - Whitelist unil.ink if the app requires it: Several tools on the supported list — Calendly in particular — require that the embedding domain be added to an allowed-domains list in their settings before the embed will render. For Calendly, go to Account → Integrations → Embed → Allowed domains and add
unil.ink. Do this before adding the block to your page; a missing domain whitelist looks identical to a broken embed and is frequently misdiagnosed. - Check whether a native UniLink block already exists: Before using the Custom App block for a booking tool, a form, or a video player, check whether UniLink has a native block for that specific use case. Native blocks — the Form block, the Booking block, the YouTube block — are purpose-built with better mobile optimization and page performance than an iframe embed. The Custom App block is the right choice when no native block exists, not a shortcut around native blocks that do.
How to add the Custom App 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 embedded app to appear.
- Add a new block: Click + Add Block. In the block picker, find the Advanced or Integrations section and select Custom App.
- Select your app: In the app selector dropdown, choose the tool you are embedding. The list shows all pre-configured integrations — Calendly, Typeform, Jotform, HubSpot, Stripe, Gumroad, Ko-fi, Buy Me a Coffee, Patreon, and others. If your tool is on the list, select it. If your tool is not on the list, select Custom URL or Custom Embed at the bottom of the dropdown.
- Paste your embed URL: Enter your app's embed URL in the URL field. For pre-configured apps, the block validates the URL format for that specific tool and shows an error if the format is wrong. For Calendly, use the event URL format
calendly.com/username/event-name. For Typeform, use the form public link. For Gumroad, use the product embed URL from the Gumroad share panel. For Stripe, use the Payment Link URL directly. - Set display height: For apps on the supported list, the block pre-fills a recommended height. You can override this. Calendly inline embeds work at around 630px minimum — setting it lower clips the booking interface. Typeform generally needs 500–600px depending on how many questions your form has. Gumroad product embeds work at around 400–500px. If you are unsure, set a generous height (700px) and reduce it after previewing.
- Configure width: Leave width at 100% for almost all use cases. Fixed pixel widths overflow on narrow mobile screens. Most embedded apps are responsive by design and will adapt to a 100% width container correctly.
- Apply custom CSS wrapper if needed: If you want to add a border, rounded corners, a background color, or margin around the embedded app, enter those styles in the custom CSS wrapper field. These styles apply to the container div that wraps the iframe, not inside the iframe itself, so they work correctly regardless of what the embedded app is doing internally.
- Save and verify on the live page: Click Save, then Publish. Open your live page at
unil.ink/yourusernamein an incognito window and verify the embed renders correctly. Check on mobile as well — a Calendly embed that looks correct on desktop may need a height adjustment on mobile if the booking interface stacks differently at narrow widths.
Key settings explained
| Setting | What it controls | Best practice |
|---|---|---|
| App selector | Chooses the integration template — pre-configures iframe settings, sandbox permissions, and default height for the selected tool | Always select the specific app if it appears in the list; selecting "Custom URL" instead of "Calendly" when embedding Calendly bypasses the pre-configured settings and requires manual troubleshooting |
| Embed URL | The public URL of the specific content being embedded — event link, form link, product link, payment link | Use the direct embeddable URL, not the app's dashboard URL or admin panel URL; the URL must resolve without requiring the visitor to log in — anything behind authentication will show a login screen |
| Display height | The pixel height of the embedded app within your page | Use the pre-filled recommended value for supported apps as a starting point; Calendly needs at least 630px, Typeform around 500–600px depending on form length, Gumroad around 400–500px; always verify on the live page before publishing |
| Display width | The width of the embedded iframe — 100% fluid or a fixed pixel value | Leave at 100% for all embeds intended to be viewed on mobile; fixed widths overflow on small screens and most embedded apps handle responsive width natively |
| Sandbox permissions | Which capabilities the iframe is allowed — scripts, forms, same-origin — controls what the embedded app can do in the browser | For apps on the supported list, these are pre-configured correctly; for custom URL embeds, enable allow-scripts for any JavaScript app and allow-forms for any form submission — do not enable allow-same-origin unless the app's documentation requires it |
| Custom CSS wrapper | CSS applied to the outer container div, not inside the iframe | Use for cosmetic adjustments — border, border-radius, padding, background — that make the embed feel integrated with your page design; avoid setting overflow: hidden on the wrapper if the embedded app has dropdown menus or popups that extend beyond the iframe boundary |
unil.ink to the allowed domains list. Calendly requires this step before it will serve the inline embed to any external domain. The same applies to Typeform: go to Settings → Security → Allowed domains and add unil.ink. These domain-whitelist steps are one-time, and once done, every Custom App block embedding that tool will work on your page without further configuration.
Getting the most from embedded apps on your page
The strategic value of the Custom App block is conversion without context-switching. When a visitor encounters a Calendly link in your bio, they click through, arrive at a generic Calendly page with no information about you beyond what you have set up in Calendly's own interface, and book from there — or do not book, because the context that was building while they were on your UniLink page disappears the moment they leave it. A Calendly embed via the Custom App block means the booking happens while the visitor is still surrounded by your bio, your testimonials, your content links. The context that built the motivation to book is still visible. The conversion rate difference between an external link and an in-page embed is real and consistent across booking, checkout, and form tools.
The same principle applies to payment embeds. A Gumroad product embed or a Stripe Payment Link on your page means the transaction occurs without the visitor ever leaving. They learn about the product in your context and buy in your context. For digital products — ebooks, templates, presets, courses sold through a payment link — this reduces one of the most reliable conversion killers: the context gap between where the visitor gets interested and where they have to go to pay. Closing that gap with an in-page embed is one of the highest-leverage configuration changes available in the UniLink block system.
For lead capture, an embedded Typeform or HubSpot form has an important edge over a native Form block in specific circumstances: if you have already built complex multi-step logic in Typeform — branching questions, conditional flows, scoring — re-creating that in a native UniLink form is significant work with no gain. Embed the Typeform instead. Use native blocks when you are starting fresh or when the form logic is simple enough that the native block handles it in minutes. Use the Custom App block when the tool you are embedding has functionality that the native block does not replicate.
Troubleshooting
| Problem | Likely cause | Fix |
|---|---|---|
| Embed shows a login screen instead of the app | The embedded URL requires the visitor to log in before displaying content | Use the public-facing embed URL for your content, not the dashboard URL; check the app's share or embed panel for a public link; there is no fix within UniLink for an app that requires visitor authentication to display |
| Embed is blank on the live page but worked in Dashboard preview | The app has not whitelisted unil.ink as an allowed embedding domain |
Add unil.ink to the app's allowed domains list — Calendly: Account → Integrations → Embed; Typeform: Settings → Security → Allowed domains; this step is required once and applies to all embeds of that app |
| Content is cut off at the bottom of the block | Display height is set lower than the app needs to render fully | Increase the height by 50–100px increments and check the live page after each save; Calendly needs at least 630px, multi-step Typeforms may need 700px+, Gumroad products vary by product layout |
| Embed overflows or scrolls horizontally on mobile | The display width is set to a fixed pixel value wider than the mobile viewport | Set width to 100% in the block settings; fixed-width iframes do not adapt to narrow screens and cause horizontal scroll or layout overflow |
| App loads but interactive elements (forms, buttons) do not respond | Sandbox permissions are missing allow-scripts or allow-forms for a custom URL embed | Edit the block, open sandbox permissions, enable allow-scripts and allow-forms, save and republish; for apps on the supported list this should already be configured, but verify if you used "Custom URL" instead of the named app |
| Embedded app dropdown menus or popups are clipped by the block boundary | The custom CSS wrapper has overflow: hidden set, or the block height is insufficient for the expanded state of the UI | Remove overflow: hidden from the custom CSS wrapper if you added it; increase the display height to give popups and expanded states room to render without clipping |
| The app I need is not in the supported list | The app does not have a pre-configured integration in the Custom App block | Select "Custom URL" or "Custom Embed" from the app selector and enter your embed URL; if the app provides a raw iframe code rather than just a URL, use the HTML Code block instead, which accepts full snippets including script tags |
Best fit for
- Embedding Calendly, Typeform, Gumroad, Stripe Payment Links, Ko-fi, Buy Me a Coffee, and other tools on the supported list — the pre-configured settings handle iframe permissions automatically
- Creators who want a booking widget, payment flow, or lead form on their page without writing or debugging iframe code
- Existing users of complex tools (Typeform with branching logic, Gumroad product pages with upsells) where re-creating the functionality in native UniLink blocks would require significant rework
- Any embed where the app provides a clean public URL and you want the interaction to happen on your UniLink page without sending visitors to an external destination
Not the right tool if
- UniLink already has a native block for the tool — use the Form block for simple forms, the Booking block for calendars, the YouTube block for videos; native blocks have better mobile UX and faster load performance than iFrame embeds
- The app you need to embed blocks cross-origin iFrames at their end — no configuration in UniLink can override an app that serves its content with
X-Frame-Options: DENY - Your embed needs a multi-part snippet (a div and a script tag together) — use the HTML Code block, which handles raw snippets; the Custom App block's URL field cannot parse combined snippet code
- The app requires visitor authentication before displaying content — the visitor will see a login prompt, not the app, and there is no workaround for login-gated embeds
Frequently asked questions
What is the difference between the Custom App block and the HTML Code block?
The Custom App block has pre-configured settings for a list of commonly embedded tools — Calendly, Typeform, Gumroad, Stripe, Ko-fi, and more. When you select one of those apps, the correct sandbox permissions, default height, and URL handling are applied automatically. The HTML Code block is for arbitrary raw HTML, CSS, and JavaScript snippets — it accepts any embed code you paste, including multi-part snippets with both a div and a script tag, but requires you to configure sandbox permissions manually. If the app you want to embed is on the Custom App supported list, use Custom App. If it is not, or if the embed requires pasting a raw snippet rather than entering a URL, use HTML Code.
Can I embed a Calendly team event or group event, not just a personal event?
Yes. Calendly team event URLs and round-robin scheduling URLs are valid embed URLs for the Custom App block. Paste the public event URL — calendly.com/teamname/event-type or calendly.com/d/xxx-yyy/event-name — exactly as you would a personal event URL. The block treats any valid Calendly event URL the same way. Ensure the event is set to public in Calendly's visibility settings; a private or hidden event will show a login screen or a 404 when embedded.
Can I embed a Typeform that uses hidden fields for pre-filling answers?
Yes. Typeform supports hidden field pre-fill via URL parameters — append them to your Typeform URL in the format ?field_name=value. Paste the full URL with parameters into the Custom App block's embed URL field. The block passes the URL as-is to the iframe, and Typeform reads the parameters correctly on load. This works for pre-filling UTM data, referral sources, or any custom hidden field you have configured in your Typeform logic.
Why does my Gumroad product embed show a "This content is not available" message?
There are two common causes. First, the product may be unlisted or draft status in Gumroad — only published, publicly available products can be embedded. Second, Gumroad's embeddable product URL is different from the product page URL; use the embed URL from Gumroad's Share → Embed panel rather than copying the product page URL from your browser address bar. If you are using the correct embed URL and the product is published, check whether Gumroad has enabled embedding for your account tier — some Gumroad embed features require a paid Gumroad plan.
Is the Custom App block available on the free UniLink plan?
The Custom App block is available on paid UniLink plans. The exact plan level required depends on the current plan structure — check your account's block availability under Dashboard → Blocks to see which blocks are available on your current plan. The HTML Code block has similar availability requirements. If you are on the free plan and need to embed a third-party tool, check whether a native UniLink block (Form, Booking, YouTube, Spotify) covers the use case — native blocks are available on the free tier and do not require a Custom App block.
- Always select the named app from the supported list rather than using "Custom URL" if your app appears there — the pre-configured settings handle iframe permissions automatically and prevent the most common setup mistakes.
- The embed URL must resolve to a public page with no login requirement; an app that shows a login screen when embedded is not configurable within UniLink — the app itself must provide a public embed URL or enable cross-origin embedding.
- Add
unil.inkto the allowed-domains list in any app that requires domain whitelisting (Calendly, Typeform) before publishing the block — this is the most common cause of blank embeds on the live page. - Check whether a native UniLink block already exists for your use case before using Custom App — native blocks (Form, Booking, YouTube) offer better mobile performance and simpler setup than an embedded iframe for their specific use cases.
- If the app provides a raw multi-part embed snippet rather than a clean embed URL, use the HTML Code block instead — Custom App's URL field cannot parse raw snippet code that combines a div and a script tag.
Ready to embed your tools directly on your page? Create your free UniLink page and use the Custom App block to put Calendly, Typeform, Gumroad, or any supported app exactly where your visitors will engage with it — no code, no context-switching, no lost conversions.