Comment on page
This section covers how to manage custom headers/body strings in your app
This feature is only available on paid plans.
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
- 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.
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.
- 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.