How To Customize a Knowledge Base Header & Footer
A simple guide on how to customize a KB header and footer
If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.
- Getting Started
- API V2
- API V3
- Article Editor
- Knowledge Base Settings
- Swifty (In-App Widget)
- Billing / Subscription
To Customize a knowledge base by attaching it's header & footer, all you need to do is make sure to grab the header & footer html and CSS (and any fonts, etc.) and attach it to the knowledge base using the Customization page.
This entire process takes less than 8-10 minutes – takes me ~5 minutes as I use shortcuts.
We recommend using the CSS Used Chrome plugin. You can install it here: https://chrome.google.com/webstore/detail/css-used/cdopjfddjlonogibjahpnmjpoangjfff?hl=en
Video instructions: https://www.loom.com/share/aec1b4f70e64497d854d23e88b4a4216
- Open the clients KB & website
- On the clients website, open up Inspect Element (CMD + SHIFT + C on MAC).
- Find the header, select the code, copy it, paste it onto their KB in Main Layout
- Using the CSS Used, you'll see the header CSS Used, click it, and copy over the CSS, paste into the CSS for the KB. (screenshot)
- Save changes
- Go back and fourth, and copy/correct changes until it's perfect.