Help center: Custom CSS & head injection

src/_data/sidebars/help.yml

@@ -77,12 +77,14 @@ resources:
     items:
       - label: Custom domains
         link: /customization-options/custom-domains/
-      - label: Color, logo and meta images
+      - label: Branding customization
         link: /customization-options/color-logo-meta-images/
       - label: Login page
         link: /customization-options/login/
       - label: Operations & Navigation
         link: /customization-options/operations-navigation/
+      - label: Head injection (analytics and tools integration)
+        link: /customization-options/head-injection-analytics-tools-integration/
       - label: Embed mode
         link: /customization-options/embed-mode/
   - type: category
@@ -162,4 +164,4 @@ resources:
     icon: help-circle
   - label: Support and SLA
     link: /support-and-sla/
-    icon: heart-plus
+    icon: heart-plus

src/_help/customization-options/color-logo-meta-images.md

@@ -1,5 +1,5 @@
 ---
-title: Color, logo and social media image
+title: Branding customization
 ---
 
 - TOC
@@ -54,6 +54,44 @@ It is advisable not to exceed a width of 1200px and to maintain the height betwe
 
 ![Meta image upload](/images/help/meta-image.png)
 
+## Advanced customization through CSS variables
+
+> Deep customization options are available in our [paid plan](https://bump.sh/pricing/).
+{: .info}
+
+Bump.sh offers deeper customization options, offering full control of your branding. It makes your Bump.sh doc portal truly blend in with your platform. 
+
+Custom CSS can be added either through a [reverse proxy](/help/customization-options/embed-mode/#configure-your-proxy) you've set up (by injecting these variables in the [`head` section of documentation](/help/customization-options/head-injection-analytics-tools-integration/#how-to)), or managed by Bump.sh. Feel free to [contact us](mailto:hello@bump.sh) so we can assist you.
+
+> If you customize fonts, make sure to use a font that is available on the user's device, or loaded in your custom headers.
+{: .info}
+
+You can safely customize the style of your doc portal using these CSS variables:
+
+- `--font-family`: the global font family;
+- `--heading-font-family`: the font family used for headings (h1, h2, h3, ...). If none is defined, the global font family is displayed;
+- `--code-font-family`: the font used for code blocks and examples;
+- `--doc-font-size`: the global font size. The default value is 14px;
+- `--code-font-size`: the font size used on code blocks and examples. The default value is 12px;
+- `--nav-font-size`:  the font size used on side and top navigation bars. The default value is 14px;
+- `--doc-font-weight`: the default font weight. The default value is 500;
+- `--nav-font-weight`: the font weight used on side and top navigation bars. The default value is 500;
+- `--logo-width`: logo width, if the default width doesn't fit your logo width;
+- `--logo-height`: logo height, if the default height doesn't fit your logo height;
+- `--doc-success-color`: the color used for success messages;
+- `--doc-error-color`: the color used for error messages;
+- `--doc-warning-color`: the color used for warning messages;
+- `--doc-warning-light-color`: the color used for warning messages with a lighter background;
+
+You could also apply your own custom CSS, but keep in mind:
+
+- We don't guarantee the stability of HTML or CSS class names
+- Custom overrides might break if we update the rendering engine
+
+The [Embed mode](/help/customization-options/embed-mode/) is an even more advanced way to integrate Bump.sh with your existing doc sites and branding.
+
+We are always open to adding more customization options: if you need to customize other parts of the UI, just [send us a message](mailto:hello@bump.sh) and we'll add the required CSS variables.
+
 ## Hub customization
 
 All of these customization settings can be applied to all the documentation within a [hub](/help/hubs/).

src/_help/customization-options/embed-mode.md

@@ -91,11 +91,16 @@ Show a branded footer with support links or legal information.
 
 You can safely style your documentation using the following CSS variables:
 
-- `--font-family`: the global font family used. Make sure to use a font that is available on the user's device, or loaded in your custom headers;
+- `--font-family`: the global font family;
+- `--heading-font-family`: the font family used for headings (h1, h2, h3, ...). If none is defined, the `--font-family` is displayed;
 - `--code-font-family`: the font used for code blocks and examples;
+- `--doc-font-size`: the global font size. The default value is 14px;
+- `--code-font-size`: the font size used on code blocks and examples. The default value is 12px;
+- `--nav-font-size`:  the font size used on side and top navigation bars. The default value is 14px;
+- `--doc-font-weight`: the default font weight. The default value is 500;
+- `--nav-font-weight`: the font weight used on side and top navigation bars. The default value is 500;
 - `--logo-width`: logo width, if the default width doesn't fit your logo width;
 - `--logo-height`: logo height, if the default height doesn't fit your logo height;
-- `--doc-base-color`: the main color, which will be used for links, button backgrounds, and cURL examples background;
 - `--doc-success-color`: the color used for success messages;
 - `--doc-error-color`: the color used for error messages;
 - `--doc-warning-color`: the color used for warning messages;
@@ -106,7 +111,7 @@ You may also override styles using your own custom CSS, but keep in mind:
 - We don't guarantee the stability of HTML or CSS class names
 - Custom overrides might break if we update the rendering engine
 
-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.
+We are always open to adding 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
 

src/_help/customization-options/head-injection-analytics-tools-integration.md

@@ -0,0 +1,22 @@
+---
+title: Head injection (analytics and tools integration) 
+---
+
+- TOC
+{:toc}
+
+`<head>` injection allows you to set up the same set of tools that you have on your own platform, for example, by adding analytics to your Bump.sh documentation or integration support tools such as Intercom, using a script injected in the `<head>` section of your docs.
+
+## How-to
+
+Head injections can be done either through a [reverse proxy](/help/customization-options/embed-mode/#configure-your-proxy) you've set up or managed by Bump.sh. Feel free to [contact us](mailto:hello@bump.sh) so we can assist you.
+
+The `<head>` section is the place to do it. It supports any attribute that can be added in a `<head>` section: metadata, scripts, stylesheets, fonts, ...
+
+```
+<!-- Bump.sh: head start -->
+<meta name="custom-head" />
+<!-- Bump.sh: head end -->
+```
+
+

src/_help/customization-options/index.md

@@ -7,9 +7,10 @@ title: Customization options
 
 Bump.sh offers several customization options for your documentation and hubs to provide a tailored and unique experience for your API consumers.
 
-[Custom Domains](/help/customization-options/custom-domains/) allow you to replace Bump.sh's domain in URLs with your own, making it easier to access your documentation. You can also customize the color, [logo and social media image](/help/customization-options/color-logo-meta-images/) to maintain your brand's visibility.
+[Custom Domains](/help/customization-options/custom-domains/) allow you to replace Bump.sh's domain in URLs with your own, making it easier to access your documentation. You can also customize the [color, logo and social media image](/help/customization-options/color-logo-meta-images/) to maintain your brand's visibility.
 
 Finally, you can define the method for [sorting API operations](/help/customization-options/operations-navigation/) to offer a comfortable and smooth reading experience.
 
-> Some customization options, such as [Embed mode](/help/customization-options/embed-mode/), depend on the plan you have subscribed to. Feel free to [contact us](mailto:hello@bump.sh) if you’d like to take advantage of a specific feature.
-{: .info}
+> Some customization options, such as [Embed mode](/help/customization-options/embed-mode/) [advanced style customization](/help/customization-options/color-logo-meta-images/#advanced-customization-through-css-variables), or [head injection](/help/customization-options/head-injection-analytics-tools-integration/) (for analytics and tools integration) depend on the plan you have subscribed to. Feel free to [contact us](mailto:hello@bump.sh) if you’d like to take advantage of a specific feature.
+{: .info}
+

src/_help/hubs/customize-ui.md

@@ -22,6 +22,9 @@ By default, we apply filters to make your light mode color and logo blend in dar
 
 ![Dark mode settings](/images/help/dark-mode-settings.png)
 
+## Advanced customization through CSS variables
+The [advanced customization settings](/help/customization-options/color-logo-meta-images/#advanced-customization-through-css-variables) available for documentation can also be applied to all the documentation within a hub.
+
 ## Operations sorting
 
 Finally, you can choose to apply a general sorting parameter to all the documentations in your hub with the Group by operations (by path or tag) and Navigation options.