Custom CSS, JavaScript, HTML

When publishing your API documentation, you can add custom global HTML, CSS, and JavaScript to personalize page styles and extend functionality.

This feature is useful for:

Embedding third-party services (e.g., chatbots, AI assistants)

Modifying default styles (e.g., font, color, background)

Adding interactive elements (e.g., buttons, popups, quick feedback)

By using this feature wisely, your documentation can better reflect your brand identity and improve the user experience.

CSS

With custom CSS, you can change fonts, hide elements, adjust margins, alter colors, and more.

Since the documentation structure may change in future updates, we recommend following these two principles to ensure your styles remain effective:

Use reserved CSS variables

Use reserved CSS class names

Use reserved CSS variables

Apidog provides a set of CSS variables prefixed with --g- to control basic page styles such as font, color, and background. These variables adapt well to both light and dark modes, making your styles more stable and maintainable.

Common Variables Reference

Example: Change main text color

Use reserved CSS class names

To target specific areas for styling, use Apidog’s reserved class names with the .g- prefix, which are relatively stable and less likely to break due to DOM changes.

Common CSS Class Reference

Example: Hide the left sidebar

Inspecting page structure and class names

In addition to the reserved CSS variables and class names mentioned above, you can also use the browser's developer tools to find the class name corresponding to the page element you want to modify, and then write CSS to adjust the style.

It is recommended to use class names starting with .g- first. These are reserved by the platform, have a relatively stable structure, and are not easy to fail. For other structural class names, please use them with caution to avoid style failure after product upgrades.

You can open the published doc site in the browser and use the developer tools (developer mode/console) to view the page structure and style class names:

Mac: Command + Option + Iorfn + F12

Windows: Ctrl + Shift + Iorfn + F12orF12

Upon opening, click the "Element Selector" (the mouse icon), and then click any area on the page to view the HTML tags and class names corresponding to that area.

You can also use the search function (Cmd/Ctrl + F) to locate a class name.

JavaScript

Custom JavaScript is used to embed third-party services like AI assistants or support widgets. Note: Apidog's custom JavaScript field does not support <script> or <style> tags. You must convert these into pure JavaScript. For example:

❌ Original(not supported)

✅ Converted to Pure JavaScript

If you want to embed a third-party script or style but are not sure how to rewrite it into pure JS format, you can copy the prompt below and paste it into an AI tool (such as Claude) to let AI help you convert it automatically:

I'm using Apidog's "Custom JavaScript" feature, which only allows pure JavaScript (no <script> or <style> tags).

Please convert the following code to pure JavaScript. Here are the requirements:
1. Rewrite the <script> tag to document.createElement('script') dynamic creation method;
2. Inject the <style> content into the newly created style tag and insert the head;
3. Please use standard methods (such as createElement, appendChild) for all DOM operations, and do not use document.write;
4. If the original code uses window.addEventListener('DOMContentLoaded'...), please replace it with the 'load' event, which is more stable;
5. The final generated JavaScript should be able to run directly in the browser without any explanation.

Original code:
---
(paste your code here)
---

For security, custom JavaScript only works when accessing docs via Custom domain.

If you access it through the default documentation address provided by Apidog (such as starting with https://xxx.apidog.io/), the custom JS will not be loaded and executed.

Please ensure that the code itself is reliable to avoid affecting normal loading or destroying the page structure.

If you need to wait for the page to load before executing the code, use load instead of DOMContentLoaded, for example:

Example: Click the button to expand/collapse the iframe dialog

Script for "Click the button to expand/collapse the iframe dialog"

How to use:

Paste the code into Apidog's "Custom JavaScript" area.

Visit doc sites via your custom domain

A button appears at the bottom-right corner; click to open the chat iframe.

Replace iframe.src with your AI service, e.g.:

Script for "Embedding Chatbase Chat Widget"

How to use:

Create a Chatbase app, get the embed code, convert it to pure JS using the prompt above.

Paste the converted code into the Apidog's Custom JS section.

Visit the doc sites via your custom domain.

A button will appear at the bottom-right corner. Click it to open a dialog window.

HTML

Coming soon...

FAQs

Custom JS not working?

Make sure you're visiting the documentation via a custom domain. Custom JavaScript is only executed when using a bound custom domain.

Why use 'load' instead of 'DOMContentLoaded'?

Custom CSS, JavaScript, HTML

CSS#

Use reserved CSS variables#

Use reserved CSS class names#

Inspecting page structure and class names#

JavaScript#

Example: Click the button to expand/collapse the iframe dialog#

Example: Embedding Chatbase widget#

HTML#

FAQs#

CSS

Use reserved CSS variables

Use reserved CSS class names

Inspecting page structure and class names

JavaScript

Example: Click the button to expand/collapse the iframe dialog

Example: Embedding Chatbase widget

HTML

FAQs