Embedding Bump.sh in your own portal

If you want to offer a fully branded developer experience, Embed Mode is for you. It lets you serve your Bump.sh documentation under your own domain, within your own portal, with your own layout, headers, footers, and custom scripts.

This guide walks you through how it works, how to set it up, and how to make it yours.

What is Embed Mode? #

Embed Mode lets you integrate Bump.sh-generated documentation inside your own frontend stack, giving you 100% control over your branding and navigation.

It’s designed for larger teams and companies who need their docs to look and feel like a native part of their platform or developer experience.

Benefits #

How it works #

Here’s a high-level view of how requests and rendering flow in Embed Mode:

Embed Mode Flow

Step-by-step flow #

Integration Guide #

Configure your proxy #

To use Embed Mode, you’ll need a reverse proxy in front of Bump.sh that can rewrite and forward traffic correctly.

Bump.sh will start rendering in Embed mode: it will change the layout and scrolling mechanism to adapt to your header, and will inject 3 customization zones in HTML that can be safely manipulated.

Customize the experience #

You can inject up to three types of content into the page: head, topbar and footer.

Head injection

Insert content into the <head> section: stylesheets, metadata, scripts. This is were you can apply your branding by specifying CSS variables, load your own fonts and Javascript, and add custom scripts.

<!-- Bump.sh: head start -->
<meta name="custom-head" />
<!-- Bump.sh: head end -->

Topbar injection

Add a custom top bar, including your logo, main website links, search engine, language switcher, auth links, etc… This topbar is automatically hidden when the user scrolls down to keep most of the content visible.

<!-- Bump.sh: top-body start -->
<div id="embed-top-body"></div>
<!-- Bump.sh: top-body end -->

Footer injection

Show a branded footer with support links or legal information.

<!-- Bump.sh: bottom-body start -->
<div id="embed-bottom-body"></div>
<!-- Bump.sh: bottom-body end -->

Custom CSS

You can safely style your documentation using the following CSS variables:

You may also override styles using your own custom CSS, but keep in mind:

We are always open to add more customization options: if you need to customize other parts of the UI, just send us a message and we’ll add the required CSS variables.

Technical requirements #

To use Embed Mode, you’ll need a reverse proxy or CDN that allows:

Here is a list of typical platforms that support this:

If you do not find the tool you are using in this list, ask us directly, and we will tell you if your platform is compatible.

Best Practices #

SEO, bots & metadata #

Automatic translation #

Be careful not to auto-translate reserved words (like string, boolean, etc.)

FAQ #

What happens if the headers are missing?

The documentation won’t render in embedded mode. The default Bump.sh layout will be shown.

Can I use my own JS framework on top?

Yes. Just make sure your injected scripts don’t interfere with the core rendering.

Can I track page views with my analytics tools?

Yes. Just inject your analytics script via the head.