Table of Contents

Testing Customizations with .dev

Jarratt Isted Updated by Jarratt Isted

Knowledge Bases look best when they're customized to fit your brand and style. Luckily HelpDocs has a ton of customization options to change the look and feel of your docs šŸ¦„āœØ

While big changes to the look and feel of your docs are super fun they can also be kinda stressful. Especially if your docs are already live to customers. Breaking things in production's never fun šŸ˜­

.dev gives you a way to preview changes to some of your Knowledge Base settings (especially custom code) without making those changes live to users right away.

You can create custom HTML templates or test out CSS and JavaScript without impacting your users. Then when it's perfect you can ship your changes all at once šŸŽ‰

This article is only relevant if you have the .dev feature on your HelpDocs plan

Making non-live changes with .dev

There's two places in Settings you can make changes to your code without affecting your live Knowledge Base:

  • Brand
  • Code

In areas where you're able to use .dev you'll see an Enable .dev button in the navigation.

If a setting is part of .dev we'll highlight that with a little badge or a callout with a descriptive message. Any changes you make to settings without a badge or callout will affect the live version of your docs.

  1. Head to
    1. Settings > Brand for Brand changes
    2. Settings > Code for Code changes
  2. Hit Enable .dev in the top right navigation
  3. Make any changes you want to areas that're marked as part of .dev
    Right now the Settings that're part of .dev are Primary Color & Template in Settings > Brand and CSS, Javascript, and HTML in Settings > Code

Promoting .dev changes to the live version

Fixed that pesky CSS issue? āœ… Got your template looking just so? āœ… You're ready to go live!

Once you're happy with the changes you've made using .dev you'll need to promote the changes to your live Knowledge Base. Only then will they be visible to your users.

Don't worry there's no need to copy/paste things here. You can promote all your changes at once with a couple clicks.

  1. Click the dropdown arrow next to the Disable .dev button
  2. Select Promote .dev changes to live version
  3. Read the warning. I know your changes are awesome. I know you probably hate warnings. But it's useful I promise šŸ‘€
    Promoting your changes from .dev to your live Knowledge Base will overwrite all live settings that're part of .dev with the staging versions you've been working on. This includes any fields of .dev'able settings that you've left empty. Be sure you really wanna do this before you move forward.
  4. Hit Save Changes

Restoring .dev from live version

You can populate .dev with all your live Knowledge Base settings in a couple clicks. This is especially useful when you're just getting started with .dev or if you've made any terrible errors with your customizations (happens to the best of us šŸ˜©). Here's how šŸ‘‡

  1. Click the dropdown arrow next to the Disable .dev button in the top right navigation
  2. Choose Restore .dev from live version
  3. Read this warning too. I know you probably learned from the warning before. And you're excited to make your changes. I know warnings still kinda suck. But it's there for your protection šŸ‘·
    This will permanently overwrite your .dev changes with settings from your live Knowledge Base. Once you hit Save we can't recover your old .dev changes.
  4. Hit Save Changes

Previewing changes on your .dev subdomain

The whole point of .dev is so you can see your changes without pushing them live. But how do you see them? With our handy Preview .dev changes button of course!

  1. Click the dropdown arrow next to the Disable .dev button
  2. Hit Preview .dev changes
  3. You'll be taken to <yourdomain>.helpdocs.dev where you'll see all your articles and categories as normal plus all the settings changes you've made with .dev šŸŽ‰

.dev subdomain visibility

Using .dev will not affect your SEO or confuse users with multiple copies of content on the internet. It's a preview area that's only accessible by certain members of your team that have access to HelpDocs Settings.

Specifically only members of your HelpDocs team that're Administrators and above can view changes made with .dev. And it can only be accessed through Settings.

What did you think of this doc?

Choosing a Template

Adding Custom JavaScript

Get in touch