Custom headers/body

This section covers how to manage custom headers/body strings in your app

This feature is only available on paid plans.

What is a custom header or body for?

Using this setting adds a custom header/body to all of your pages. If you want to add them to one or more specific pages, you can do so in the pages property editor.

Article: The page

Custom headers

The content in the header loads before the content on the page and is useful for content that you need to ensure is loaded before the page is loaded and rendered.

A custom header refers to the HTML content that can be added to the <head> section of every page in your app. The content inside the <head> tag does not appear on the page itself, but it sends specific instructions to the browser, such as:

  1. Meta Tags: If you need to add meta tags to all pages (in addition to the tags already built into Bubble), you can place them here

  2. Link to External CSS: External stylesheets are typically linked in the header to ensure that they are loaded before the page content

  3. Link to External JavaScript Libraries: Although JavaScript can be loaded in the header or the body, certain libraries and scripts that must be loaded before the page content are placed in the header

  4. Third-party Integrations: Some third-party integrations require code snippets to be placed in the head. The third-party documentation will usually instruct where to place the code.

Custom body

The content in the body loads as the page is being rendered. It's useful for code that interacts with elements and content that don't necessarily need to be loaded before the page starts displaying

A custom body refers to content placed within the <body> tag of the HTML document. This is where the content displayed on the webpage itself is housed (including every element you place on the page in the Design tab). You might use a custom body for:

  1. Embedding Custom HTML Elements: For special content that should be present on every page.

  2. Embedding JavaScript: When scripts are dependent on the page content, or when they should execute after the content has been loaded, they are typically placed near the end of the body section.

  3. Third-party Integrations: Certain third-party integrations are placed in the body.

As you can see from the examples, there is some overlap as to what kind of content is placed where. If you are relying on a third-party code snippet, we recommend you check the documentation for that third party to make sure it's implemented in the right place.

Last updated