The slide-out widget puts your whole help center one click away on any external site: a small trigger button that opens a help drawer over your page. From the Embedding tab you choose the slide-out appearance, brand its support area, drop in your own CSS, and copy a snippet that already carries every choice you made. This guide walks through it end to end.
How to embed the slide-out widget with custom styles
You build the embed from Knowledge Base → Embedding. The left column holds the controls; the right column shows a live snippet that updates as you go.
1. Choose the slide-out appearance
Under Generate snippets for, pick Slide-out panel. The inline-only cards drop away and the slide-out cards appear — a bottom support area, custom code, and an advanced section with the JavaScript that opens the panel.
2. Customize the bottom support area
The Slide-out Bottom Support Area is the footer of the panel. Set a friendly heading, then turn on the contact button and give it a label, a location (a mailto: address or an https:// link), and your own text and background colors. You can also pick an icon, or leave it as none.
3. Add a little custom CSS
Need finer control over the look? The Slide-out Custom Code card lets you inject your own CSS (and JavaScript) into the panel. The styles target the slide-out's own classes (for example .csd__panel), so you can round corners, adjust spacing, and more — without touching the snippet.
4. Open it from your own code
The trigger button in the snippet opens the panel automatically, but you can also drive it yourself. Open the advanced section to copy the JavaScript API — window.CornerSpotKB.open(), .close(), and .toggle() — plus the DOM events the widget emits, so you can open the help drawer from any button or link on your site.
5. Scope the categories shown
Use Categories shown to choose exactly which categories this embed surfaces. It's an allowlist baked into the snippet, so the same help center can show different sections on different sites.
6. Copy your snippet
On the right, Your snippet updates live. As soon as you customize anything, a <script type="application/json" data-cs-kb-config> block appears carrying your styles, alongside the trigger button. Click Copy all and paste the snippet into your site — it only loads on your Allowed Domains and your CornerSpot site.
How the slide-out widget works
The snippet loads a tiny loader script, your config block, and a trigger button. When a visitor clicks the trigger (or your own code calls the JavaScript API), the widget slides a panel in over your page showing your help center — the same articles and categories you publish everywhere else.
- One source of truth: the panel shows your live help center, so updates appear instantly with no re-embedding.
- Branded: the support area, colors, icon, and your custom CSS make it feel native to your site.
- Scoped: the categories allowlist lets each embed show just the right help.
- Yours to control: open, close, and toggle the panel from your own buttons via the JavaScript API.
Tips
- Keep the contact button pointed at a real
mailto:or support URL so the drawer is a complete help experience. - Use custom CSS sparingly — a few rules on the
.csd__*classes go a long way. - Add every site you embed on to Allowed Domains, or the widget won't load there.
- Re-copy the snippet only if you change the trigger or config block — style tweaks flow through automatically.