Introduction

The Gladly Help Center code snippet enables you to build an FAQ/help page on your website powered by Public Answers in Gladly’s Answers knowledgebase. It works by injecting a javascript file and a css file into the webpage that you choose to embed it in. The Help Center has some content structure, but applies minimal CSS by default, allowing for the CSS you already have in your website to override and make it feel like a natural extension of your website right out of the box. The minimal CSS applied tries to achieve a balance of minimal structural defaults and using your site's own CSS to fill in more of the brand specific styling. This happens automatically due to the way CSS definitions "cascade" or apply to the elements in your webpage. Gladly’s Customer Success team will work with you to generate and structure the code snippet, but if you want to further tweak the styling beyond what’s possible automatically; this documentation describes each element the Help Center adds to your webpage and the purpose of it.

What a Help Center can look like

Browser Support

The Gladly Help Center supports major browsers. For the desktop, we support current + previous major versions of Chrome, Firefox, and Safari along with IE11 and the current version of Microsoft Edge. For mobile, we support current + previous major versions of Chrome on Android and iOS and the current + previous versions of Safari on iOS.

How to Override Styles

It's easy to override any of the styles defined in the Styles section:

  1. Create a new .css file or <style> tag within the webpage where you have installed the Gladly Help Center snippet.
  2. Using the Styles section below, find the CSS class name of the element you want to override and create a css selector definition in your file or style tag.
  3. Test your modifications by reloading the page, thats it!

What Can I Change?

Because we place a specific CSS class on almost every element we add to the page, you can really do anything that is possible with CSS. Some basic examples include:

  • Changing the hover color of search results
  • Changing the border-radius of the search input
  • Adding borders to the FAQ sections