Embedding the Onboard.io Customer Portal

You can embed the Onboard.io Customer Portal directly into your app or website using a simple <iframe>. This lets your customers access their onboarding projects in a fully branded, integrated experience.

How It Works

If you’re using a custom domain for your portal, use that domain in the src attribute.
If you’re not using a custom domain, use your standard portal URL, e.g. https://board.onboard.io/acme/.
When a customer visits the embedded portal, they’ll be prompted to sign in.
They’ll receive a magic-link / code via email to complete sign-in.
Clicking the link or using the code will sign them in.
Once signed in, they are authenticated for both:
- The main portal (direct link), and
- The embedded experience in your app or site.
You can adjust the height/width of the iframe to fit your layout.

Basic Embed Snippet

Replace the src value with your Customer Portal URL (either your custom domain or your Onboard subdomain):

<iframe
  src="https://board.onboard.io/acme/"
  width="100%"
  height="600"
  style="border: none; overflow: hidden;"
  allowfullscreen
></iframe>

Using a Custom Domain

If you’ve configured a custom domain for your Onboard.io portal (e.g. https://onboarding.yourcompany.com), use it in the src:

<iframe
  src="https://onboarding.yourcompany.com/"
  width="100%"
  height="600"
  style="border: none; overflow: hidden;"
  allowfullscreen
></iframe>

This keeps the experience fully branded and consistent with your own URL.

See https://learn.onboard.io/setting-up-a-custom-domain for instructions on setting up a Custom Portal Domain.

Sizing & Layout

You can control the size of the embedded portal to match your page layout:

Full-width layout in a dashboard view:

<iframe
  src="https://board.onboard.io/acme/"
  width="100%"
  height="800"
  style="border: none; overflow: hidden;"
></iframe>

Fixed-size card inside a grid or panel:

<iframe
  src="https://board.onboard.io/acme/"
  width="100%"
  height="500"
  style="border-radius: 8px; border: 1px solid #e5e7eb; overflow: hidden;"
></iframe>

You’re free to style the surrounding container (borders, shadows, padding) however you like. The portal UI itself is controlled by Onboard.io.

Sign-In & Session Behavior

Customers authenticate using the same magic-link / email-based sign-in flow they use for the standard portal.
After signing in once, their session will carry across:
- Direct portal links (e.g. sent via email).
- Any embedded iframe using the same domain.
If their session expires, they’ll be prompted to sign in again from within the embedded portal.

Summary

Decide whether you’ll embed with your custom domain or your Onboard.io subdomain.
Drop the <iframe> snippet into your app or website.
Replace the src with your actual portal URL.
Adjust width, height, and surrounding styling as needed.

Once in place, your customers get a seamless in-app onboarding experience powered by Onboard.io, without needing to leave your product.

Embedding the Onboard.io Customer Portal

You can embed the Onboard.io Customer Portal directly into your app or website.