How to embed a microapp on a webpage

Skip to content

English

Embedding places a microapp directly inside one of your own web pages, so visitors can interact with it without leaving your site. Microapps are not a replacement for a webpage, but they work well as a supplement — an interactive product tour, a configurator, or a guided explainer sitting inside a page that provides the surrounding context.

Generate an Embed Link

1. Find — the microapp you want to embed in your library.

2. Click — the share icon.

3. Select — Public link.

4. Select — Embed.

5. Choose the adaptive format — you want to embed. See Choosing a Format below.

6. Set the loading behavior — — optionally toggle Hide loader on. See Hiding the Loading Page below.

7. Copy — the embed code.

8. Paste — the HTML into your webpage’s code.

Heads Up: Embedding uses a Public link, which means anyone who can reach the page can open the microapp. If the content should not be publicly accessible, embedding is not the right distribution method — use a direct share instead.

Choosing a Format

The formats offered at step 5 are the formats the microapp has actually been published in. If it is only published at desktop size, that is the only option you will see.

Microapps with multiple adaptive formats

If the microapp was built and published in more than one format — a desktop layout and a mobile layout, say — each published format appears as a separate choice, and you pick which one the embed will serve.

Pro Tip: Choose the format that matches the container you are embedding into, not the device your visitor is on. A narrow sidebar suits a mobile-format embed even on a desktop browser, because the format governs the layout inside the frame.

Hiding the Loading Page

By default, a microapp shows a loading page while it opens. Inside an embed, that loading page often looks out of place — it interrupts the visual flow of the surrounding page and may not match its styling. The Hide loader option suppresses it.

Toggle Hide loader on in the share form before copying your embed code. The option appears specifically when you are creating an Embed share link.

It is worth using when:

• A loading page breaks visual continuity with the page it sits inside

• The loading page styling does not match your site’s design

• You want a clean entry from the first frame, such as in a live demo

Heads Up: Hiding the loading page hides the visual only — it does not make the microapp load faster. Visitors may briefly see a blank frame instead of a loading indicator while content downloads. On a slow connection that can look more broken than the loader did, so test on a throttled connection before committing.

Pro Tip: You can apply the same behavior to a non-embed share link by appending ?hideLoader=true to the URL manually:

https://your-share-link?hideLoader=true

Placing the Embed on Your Page

The embed code is standard HTML and goes wherever you want the microapp to appear in your page’s markup. A few things to keep in mind:

• The container has to have height — an embed placed in a container with no defined height can collapse to nothing. Give the surrounding element explicit dimensions if the microapp does not appear.

• Format and container should agree — a desktop-format microapp squeezed into a narrow column will be cramped. Match the format to the space.

• Test on real devices — how the embed behaves depends on both your page’s responsive behavior and the format you chose.

Heads Up: If your site uses a page builder or CMS that strips scripts and iframes from content blocks, you may need to use a dedicated HTML or embed block, or paste into a template rather than the page body. This is a limitation of the platform you are embedding into, not of Tiled.

Engagement from Embedded Microapps

Engagement from an embedded microapp is captured and appears in your Tiled analytics alongside share-link and direct-access activity. You can see sessions, page-level activity, and completion events exactly as you would for any other view.

Heads Up: Because embeds use a Public link, viewers are generally not identified individually. Expect embedded traffic to appear as anonymous sessions rather than named recipients, unless you have configured something that captures viewer identity.

Embedding and SEO

Embedded microapps can contribute to search performance, though indirectly. A few points worth knowing:

• Search engines do crawl microapp content. Text added through text tiles is indexed, and title and alt text on media help search engines understand the content.

• A microapp published with links on an indexable page will likely be indexed by Google.

• The stronger SEO contribution is indirect — an embed that increases dwell time, clicks, or earns backlinks helps more than the embed existing on its own.

For more information about microapps and SEO please read this article.

Pro Tip: Adding title and alt text to media in your microapp serves two purposes at once: search engines get context, and the microapp becomes more accessible. Worth doing regardless of whether SEO is your goal.

Microapps Cannot Be Embedded in Email

Microapps cannot be embedded in an email. Email clients block JavaScript and iframe content as a security measure, and an embed relies on both, so it will not render — recipients will see nothing or a blank block. For more information about the limitations of microapps and email we recommend this article.

Pro Tip: Send a share link instead. Use a static image of the microapp’s cover as a clickable element in the email, linking out to the share link. Recipients get a visual hook in the email and the full interactive experience in their browser.

Common Questions

Question	Answer
Why do I only see one format at step 5?	Only published formats appear. If the microapp is published at desktop size only, that is your one option. Adaptive formats are also a Builder 2.0 feature — Builder 1.0 microapps have a single format by design.
My embed shows a blank area instead of the microapp. What’s wrong?	Most often the container has no defined height, so the frame collapses. Give the surrounding element explicit dimensions. Also check whether your CMS or page builder strips iframes and scripts from content blocks — if so, use a dedicated HTML block.
Can I hide the loading page?	Yes. Toggle Hide loader on in the share form before copying the embed code. You can also add ?hideLoader=true to a share link manually. Note it hides the loading visual without making the microapp load any faster.
Does embedded engagement show up in analytics?	Yes. Embedded sessions are captured and appear alongside other engagement. Because embeds use a Public link, expect them largely as anonymous sessions rather than named recipients.
Why can’t I embed a microapp in an email campaign?	Email clients block JavaScript and iframes, which embeds depend on. Link to the microapp instead — a static cover image in the email that opens the share link works well.
Can I embed a microapp that isn’t public?	Embedding is generated from a Public link, so the content is reachable by anyone who can load the page. For content that needs access control, use a direct share rather than an embed.
Will an embedded microapp help my search rankings?	Indirectly. Microapp content is crawlable and text tiles are indexed, but the bigger effect comes from improved engagement signals and backlinks rather than from embedding alone.

Related Articles

• SEO & Microapps — How microapps are crawled and indexed, and where they help search performance.

• How to Hide the Loading Page on a Share Link — The hide loader option and the manual URL parameter.

• Public Links — The share link type embedding is built on.

• How to Use the Unified Share Form in Tiled — The share form and the options available in it.

• Engagement: Microapp Analytics — Reading engagement data, including sessions from embedded microapps.

• Adaptive Format — Publishing a microapp in multiple formats in Builder 2.0.