Embedding a fully custom page (with your own HTML, CSS, and JavaScript)

If you've built a custom page with your own HTML, CSS, and JavaScript, there is a supported way to display it inside uConnect. This guide explains what's supported, why it works this way, and how to set it up.

Best practice: whenever possible, build your content directly in uConnect using native blocks in the Block Editor and page tools. Native content is easier to manage and works automatically with platform features like AI Search — no extra steps needed.

What to know first

uConnect does not support pasting a full standalone HTML document directly into a page or post.

For security and platform stability, <script> and <style> tags are automatically removed when content is saved in standard page or post editors. This prevents one page's code from accidentally interfering with the rest of the platform.

You can still use small amounts of inline styling directly on individual elements (for example, <h2 style="font-size: 36px; color: #19132d;">). In those cases, don't include global document tags like <html>, <head>, or <body>.

When native uConnect content is the better choice

If your content is mostly informational and doesn't require advanced interactivity, we generally recommend building it directly in the Block Editor instead of embedding a separate custom page.

A few examples to help you decide:

Use native blocks (Block Editor)	Use the iframe method
A list of resources or events	A custom interactive quiz or assessment with its own JavaScript logic
A styled landing page with headings, images, and text	A data dashboard or visualization tool you've built independently
A page using inline styles for custom formatting (see example below)	A page that needs its own scripts to function — calculators, custom external forms, interactive timelines, animations

Building natively also means:

It's easier to edit inside uConnect going forward.
It works automatically with AI Search and other platform search/discovery features.
It avoids the extra step of hosting your page elsewhere.

A custom embedded page is usually the right choice only when you need a self-contained experience with its own scripting, styling, or interactive behavior that can't be achieved with inline styles.

The supported approach: iframe embedding

For fully custom, self-contained pages, uConnect supports embedding your page through an iframe.

An iframe lets your custom page run as its own separate document inside the uConnect page. Your scripts and styles stay fully contained, while the surrounding uConnect site remains stable.

This approach works well for three reasons:

Isolation: your HTML, CSS, and JavaScript run in their own context rather than inside the main uConnect page.
Reliability: your original <script> and <style> tags live on your hosted page, so they're never stripped out.
Accessibility support: because the embedded content is treated as a separate document, it won't conflict with the heading structure or navigation of the page it's embedded on.

How it works

Build your custom page using your own HTML, CSS, and JavaScript.
Host that page on a static hosting service (see options below — this just means your page lives on a separate website that you control, outside of uConnect).
Share the hosting URL with your uConnect contact so it can be reviewed and approved.
Embed the hosted page into uConnect using the supported iframe shortcode.

Don't worry if you haven't used external hosting before — both options below are free and don't require any coding experience beyond what you've already used to build your page.

Hosting requirements

Your iframe source must be hosted on a client-specific URL that we can individually review and approve.

We review each hosting source individually — we can't approve arbitrary embed destinations, because approving an entire shared hosting platform outright would mean trusting all the other content on that platform too, not just yours. Approving your specific subdomain or site keeps things secure while still giving you full flexibility over your own page.

Generally supported:

Client-specific subdomains or site URLs on static hosting platforms such as Netlify or GitHub Pages

Generally not supported:

Broad shared hosting domains that would effectively approve content from many unrelated users
Open-ended approvals for entire multi-tenant platforms

Tip: Whenever possible, host multiple custom pages under one reusable base URL. Once that hosting location is approved, future pages under the same location typically won't need a new request.

Recommended hosting options

Option 1: Netlify

Create or sign in to a Netlify account.
Create a new site by uploading your static files or connecting a Git repository.
Choose or confirm the site subdomain.
Send that site URL to your uConnect contact for approval.
After approval, use pages hosted on that same site for future embeds — no new request needed.

Option 2: GitHub Pages

Create or use an existing GitHub repository.
Enable GitHub Pages in the repository settings.
Publish your files to the Pages URL.
Share the published URL with your uConnect contact for approval.
Continue adding new HTML files under the same hosted location as needed.

Embedding the page in uConnect

Once your hosting URL has been approved, embed a specific page using the iframe shortcode below:

[iframe src="<your approved URL>" title="Descriptive title for the embedded page"]

The title should clearly describe the embedded content for accessibility and usability.

Making the embed full width

If you want the embedded page to span the full content width of the page:

Place the Shortcode block inside a Group block.
Set the Group block to full width.
In the Group block settings, turn off Inner blocks use content width.

This allows the iframe to expand across the available width of that group container.

Important limitation: AI Search cannot read iframe contents

Content displayed inside an iframe is not visible to AI Search. This means visitors won't find the embedded page's contents through AI Search unless you provide separate text-based context.

If your embedded page contains important information, add a plain-language summary using the AI Search Context field when available. This helps AI Search understand what your embedded experience contains, even though it can't read inside the iframe itself.

Quick summary

Build your page with your own HTML, CSS, and JavaScript as usual.
Host it on a static site platform such as GitHub Pages or Netlify (free, no extra coding required).
Send us the URL — we'll add it to our approved list once reviewed.
Use the [iframe] shortcode with your specific page URL wherever you want it embedded.
Optional but recommended: use the AI Search Context field to add a plain-text summary of your embedded content, since AI Search can't see inside an iframe on its own.
Future pages hosted on the same domain typically won't need a new approval request.

Have questions about getting your page hosted or approved? Reach out to our support team!