Customize your Help Center

How to brand your Help Center and manage customization options.

Beth-Ann Sher avatar
Written by Beth-Ann Sher
Updated over a week ago

In Help Center Settings, you’ll find lots of customization options to help you brand your Help Center and control how it appears for your customers. Here’s how to configure and preview changes to a Help Center in real-time.


General settings

To set up Supported languages, Website publishing, Domains, Tickets portal, Analytics, Privacy, Integrations, and Social media images go to Articles > Settings and open the General tab.

If you use Multi Help Center, you can configure the Settings for each Help Center separately.

Supported languages

To choose a Default language, go to Articles > Settings > General > Supported languages and select your default language, then click Save and set live.

Once you choose your Default language, the user interface of your Help Center will read in the language you set. This will change the language of your:

  • Search prompt on your homepage.

  • Article count, author and last modified date.

  • Reactions prompt on your articles.

  • ‘We run on Intercom’ logo and more.

Note:

Website publishing

When you're ready to go live, this is where you can publish and turn on your public Help Center website.

Domains

Use your default domain

When you publish a Help Center, we make your content available through an Intercom domain by default. So, first make sure your Help Center is turned on.

Then go to Articles > Settings > General > Domains to get your default Help Center URL. Your app name will form part of your URL. For example, if your app name is ‘ExampleApp’ your URL would look like this:

You can edit the app name part of your URL (e.g. exampleapp) to whatever you like.

Set a custom domain

If you’d prefer to make your content available through your own domain, you can set up a custom domain.

Go to your DNS provider (e.g. GoDaddy, Cloudflare, DNSimple or Route53, etc.) and create a CNAME record with a target host of custom.intercom.help. We’ve created this guide to help you or your engineer set this up.

Note:

  • Both subdomains (e.g. help.exampleapp.io) and subpaths (e.g. exampleapp.io/help) are supported.

  • DNS changes can take up to 72 hours to take effect but they typically happen much faster.

Then go to Articles > Settings > General > Domains to enter your domain URL and click Save and set live.

You can also choose to disable search engine indexing and keep your articles private.

Analytics

To integrate Google Analytics with your Help Center and gain insights into your visitors' behavior, you just need your GA4 Measurement ID.

Once you've copied your GA4 Measurement ID from your Google Analytics account, go to Articles > Settings > General > Analytics and paste this under Google Analytics Tracking ID.

Privacy

If you want to make articles only available to your logged in users, enter a link to your login page under Articles > Settings > General > Privacy.

If a lead or visitor tries to view an article that is targeted at users, they'll be encouraged to login via a link to this URL.

Integrations

You can set up a sync between Intercom Articles and Zendesk under Articles > Settings > General > Integrations.

Social media images

Favicon

From Articles > Settings > General > Social media images, you can upload a favicon. This favicon appears before the title on your customers’ browser tab when visiting your Help Center website.

Recommended ratio: 1:1. 150KB max, 588x588 maximum.

Social media image

You can also upload a high-resolution social media image. The social media image appears when your Help Center or articles are shared on Facebook, Twitter, or any other social media platform.

Recommended ratio: 1.91:1, 2MB, 1200 x 630 dimensions.

Delete Help Center

This option is only available when you have multiple Help Centers, you can't delete your original (default) Help Center from your workspace. If this is your only Help Center and you want to remove it, you can turn it off under Website publishing instead.

If you delete a Help Center, there is no way to restore it.


Styling settings

To manage your Help Center styling and how content appears on the homepage, collections, articles, header and footer, go to Articles > Settings and open the Styling tab.

If you use Multi Help Center, you can configure the Styling settings for each Help Center separately.

Shared elements

Body background color

Go to Articles > Settings > Styling and click on Shared elements to change the body background color and all the Help Center pages (home, collection, article, search, error pages, etc.) will adapt accordingly.

Action color

Then set an Action color that contrasts well with the body background as it will be used in buttons, links and other elements.

Action color will not update for icons uploaded in JPEG/PNG/GIF format.

Design style

Choose between the Card or Floating design style which applies to Collections and Articles on all pages.

Note: When you choose the card design style, the card's background color will be automatically generated to provide enough contrast with the Help Center's background color. The card's background color cannot be customized.

Corner radius

Then set the corner radius for elements on your Collections, Articles and hover states (when hovering over Articles within a Collection).

Font

Choose from a list of preloaded Google Fonts for use in your Help Center:

  • Primary font - Used in Welcome Message, titles and headings.

  • Secondary font - Used for descriptions, article body text and all other text

Available Font Options

  • Bitter

  • Inter

  • Lato

  • Lora

  • Montserrat

  • Open Sans

  • Oswald

  • Playfair Display

  • Poppins

  • Noto Sans

  • Noto Serif

  • Raleway

  • Roboto

  • Roboto Mono

  • Roboto Slab

Note:

  • Selected font does not apply to the Messenger, which will always use the system font.

  • The font we used previously proxima nova has been removed as of June 2023; you can use Montserrat or Open Sans to achieve a similar look.

Or, click Manage custom fonts to upload your own custom font which matches your brand style.

Show article authors

Show or hide article authors in the Homepage, Collections and Articles by going to Articles > Settings > Styling and clicking on Shared elements, then scroll down to toggle "Show article authors".

Header

From Articles > Settings > Styling click on Header, to design the top header section with your logo, page title/company name, and any header links.

The Header can also be set up separately for all your supported languages.

Logo

Upload a high-resolution version of your logo. This shows on the left-hand side of your header image, and in grayscale at the bottom of the page.

Recommended ratio: 5:1. 1MB max, 720px maximum width/height.

Header links

Add multiple links to other webpages such as your blog or community.

The Header will push other content down as opposed to sitting on top of other content.

Hero block

Welcome message

From Articles > Settings > Styling click on Hero block, to add user attributes to the welcome message on your Help Center homepage. It will include the user attribute if the user is logged in or a fallback value if not.

Note:

Background

The background color you choose will be applied to these items:

  • Avatar's icon color (when no image is available).

  • Links in articles.

  • Your Hero block color and gradient, or image upload.

  • Fade background (if using a color gradient).

Text color

The text color you choose will be applied to:

  • Links in the Hero block.

  • Text in the Search bar.

Hero image recommended ratio: 5:2. File size 2MB max, 3000px maximum width/height. This appears at the top of your homepage and on each page of your Help Center - so add a strong image that represents your brand.

"Fade background" appears only on the Help Center homepage.

Height

Choose an overall height for the Help Center header on the homepage. Minimum height of 245 pixels and a maximum height of 600 pixels.

Search bar

Choose from three different Search bar sizes, and then select the alignment:

  • Vertical - left or center.

  • Horizontal - top, center, or bottom.

Short

Medium

Long

Corner radius

You can also select a Corner radius for the search bar. Minimum of 0 pixels and a maximum of 30 pixels.

Layout and sections

From Articles > Settings > Styling click on Layout and sections to design how Collections are displayed and choose to enable sections for Articles, Content, and Tickets Portal on the homepage. Click Edit to set up each one.

Collections section

Layout

Choose between 1, 2, or 3 columns layout.

Then select a Collections card style:

  • Classic - The current collection card style.

  • Visual - Uses a bigger space for icons and images.

  • Compact - Shows the most important information using minimum space.

When you click on a card style, a preview will automatically be shown on the right.

All card styles are responsive and look great at any resolution, including mobile, which you can also preview on the right by using the dropdown and selecting Mobile.

Design

Use icons, images or text only for your Collection cards.

If using icons, you're able to change the following colors:

  • Icon color: Select the color using the color picker or enter a hex code.

  • Icon background:

    • Color - Select the color using the color picker or enter a hex code.

    • Image - Upload an image.

    • Gradient - Create a gradient using up to three colors using the color picker or enter a hex code.

If using images, this will fill the collection card background, so it works really well with the visual template.

Individual collection cards can be styled with images by choosing the collection from a dropdown. Or styles can still be applied to all collections by choosing the All collections option from the dropdown, this will overwrite any individual styles.

Note:

  • Icon color can only be changed on default icons or custom icons you've uploaded in SVG format.

  • Background color is optional and can be switched off.

Articles section

Add an Articles section on your Help Center homepage.

Once enabled, click Edit to select the locale for those articles, choose how many columns to display, give this section a title, and then select articles from your Help Center. You can select up to 12 published articles in your Help Center.

Note:

  • For each locale, you can select only published articles that have the translation in that language.

  • Articles with audience targeting rules applied can be selected and shown here but will only appear to the customer if they match the audience rules.

  • The preview will only display the article links for the default locale.

Content section

Add a customizable Content section to your Help Center homepage. This is a great place to highlight a new feature, webinar, or call-to-action for your customers. Once enabled, click Edit to customize the content section.

Create localized content by selecting one of your supported languages.

Add an optional title, description, and call-to-action button to the content card.

Then scroll down to stylize:

  • Design - Choose between card or full screen.

  • Background - Select a color, image, or gradient.

  • Text color - Select the text color for the title and description.

See how the content section will appear on the homepage with the preview on the right. The preview will only display in your default language.

Remember to select Save and set live when you're ready to add the content section to your Help Center.

Tickets portal

The tickets portal can be enabled if you're using Intercom tickets and would like to provide your customer organizations with a real time view of all their tickets in one place.

Order

To display Articles above or below your Collections on the homepage, simply use the drag and drop tool next to each section to reorder them.

Collection page

Content descriptions

From Articles > Settings > Styling click on Collection page and choose to show or hide "Content descriptions" on each of your collections. Hiding descriptions makes it easier to scan through your articles, showing descriptions helps customers understand what to expect inside that collection.

Article page

Table of contents

From Articles > Settings > Styling click on Article page and choose to automatically show a table of contents on each article using any H1 or H2 headings in your articles.

Related Articles

You can also display up to 5 related articles below each article in your Help Center.

Footer

Customize the look of your Help Center footer with three possible templates; simple, classic, or multi-level. Brand your footer by uploading a logo, adding up to 16 social media links, and grouping footer links in your chosen template for easy organization.

This footer will be consistent on all pages of your Help Center (homepage, collections, articles).

Get started

Selecting a footer template

In Articles > Settings > Styling click on Footer where you can completely customize your Help Center footer to be on brand. Add your logo, contact details, social media, and footer links in the template which matches your brand.

Select a layout template for the footer; simple, classic, or multi-level.

  • Simple is the default template and doesn't use columns.

  • Classic allows up to 4 columns to be created.

  • Multi-level allows up to 6 columns to be created.

When a you select a template, you can preview how it will look on the right.

Logo and Text field

Go to Help Center Settings > Styling > Footer to upload your logo or preferred image (this is independent from the Header logo) and choose to add your company slogan or contact information below it.

Once you've uploaded a Logo or edited the Text field, click Save and set live to save your changes to the Help Center.

Social media buttons

Link to social media by adding your handle for up to 16 common social platforms from Help Center Settings > Styling > Footer.

Social media buttons can be reordered by using the drag and drop tool next to them, or removed by clicking the bin icon.

We support the following social platforms:

  • Spotify

  • Instagram

  • Linkedin

  • Twitter/X

  • Tumblr

  • Facebook

  • Twitch

  • Tiktok

  • Telegram

  • Reddit

  • Discord

  • Pinterest

  • Youtube

  • Github

  • Vk

  • Dribbble

Once you've added Social media buttons, click Save and set live to save your changes to the Help Center.

Manage footer links

Add and manage footer links by going to Help Center Settings > Styling > Footer and clicking Manage links below the Footer Links section.

You can group links together by creating columns. To create a column give the column a name (this is optional) and use the dropdown arrow on the right to start adding the labels and URLs for each footer link below that column.

Links can be deleted by clicking on the bin icon next to the link.

Footer links are created independently from Header links in your Help Center and must be set up separately (they don't sync with Header links).

To add multiple columns, select + Add column.

Columns can be deleted by clicking the Delete column button in the column.

Footer links and columns can be re-ordered using the drag and drop tool next to each link and column.

Once you've finished managing your footer links, click Save and set live to save your changes to the Help Center.

Note:

  • Maximum columns allowed per template:

    • In the Multi-level template you can add up to 6 columns.

    • In the Classic template you can add up to 4 columns. Any additional columns won't be displayed.

    • In the Simple template columns are not displayed, only the links in the first column will be displayed in the center of the footer.

  • A maximum of 8 links can be added to a column.

  • A column must contain at least one link to be saved to your Help Center. Columns which don't contain any links will be deleted when you click Save and set live.

Localizing footer links

To localize your Help Center footer links, simply use the language selector above the columns in Styling > Footer > Manage footer links.

Choose one of your supported languages in the Help Center to start adding custom columns and footer links for that language.

Once you've finished localizing your footer links, click Save and set live to save your changes to the Help Center. Now this will display the footer in your supported languages when they match your customers' device settings.


Preview

It’s easy to visualize your branded Help Center and see any changes you've made in real-time before setting them live, using the Preview for Homepage, Collections and Articles.

You can also select different resolutions for Mobile, Tablet and Desktop screens.

Note: We do not support embedding forms, iframes, or custom HTML in the Help Center.


💡Tip

Need more help? Get support from our Community Forum
Find answers and get help from Intercom Support and Community Experts


Did this answer your question?