Help center components

This topic is about Modern help centers. Find out which help center you're using.

In a Modern help center, you build each page from components, such as a callout banner, spotlights, cards and JSM Help components. You add components from the Components panel in the editor, where they're grouped into three categories: Building blocks,Formatting and Others. Learn how to add and arrange components on a page.

When you change a component on a page, the change applies only to that page.

Component settings

In a Modern help center, when you select a component on a page, its name shows above it, and its settings open in a side panel. The side panel describes the component and groups its settings into tabs. Most components have a Styles tab for how the component looks and a Content tab for what it shows. Some components have more tabs, such as Source.

A toolbar also shows below the selected component. From it, you can:

• Edit the component's settings.

• Change the component's width: Back to center,Go wide or Go full width.

• Copy the component.

• Delete the component.

Building blocks

In a Modern help center, the Building blocks category of the Components panel holds the components you use to build most pages.

Callout banner

In a Modern help center, a callout banner is a bold, full-width callout with a background color or image that greets customers and points them to key actions, such as search. It has a title and an optional description, and it can show a search field or your help center's Rovo agent. The home page of a new help center starts with a callout banner that holds the main heading, a description and search.

On the Style tab, you can change the callout banner's:

On the Content tab, you change the banner's Title. To add a description, turn on Description, then enter it in Description text.

To add a Rovo agent that answers customers' questions and gives support, select Go to help center settings on the callout banner's Style tab. You set up the Rovo agent in the help center's settings, not in the banner. Only people who are logged in with an Atlassian account can use it. Learn how to add a Rovo agent to the help center.

Spotlight

In a Modern help center, a spotlight highlights an important message with a visual layout, such as a title, a description, an image and a button. Use it for anything you want customers to notice.

On the Styles tab, under General, you can change the spotlight's:

Under Layouts on the Styles tab, you choose how the spotlight looks:

On the Content tab, you add the spotlight's Title,Description and Image. You can also add a Button that links to any web address. For the button, you enter the link and a label, such as View, and choose an outline or a solid style.

Links menu

In a Modern help center, a links menu helps customers find important links and content. You can add single links, and dropdown menus with sub-links. Each link can go to any web address, in the help center or outside it.

You can change the links menu's alignment, background color, border color, text color and corners.

カード

In a Modern help center, cards show content as a grid. Each card can have an image, a title, a description and a link, such as a link to a request form, a knowledge base article or a web page.

You can change the number of columns, the card style (with or without images, and horizontal or vertical), the background and text colors, and the corners.

Carousel

In a Modern help center, a carousel shows a set of up to 10 frames that rotate. Each frame can have an image, a heading, a description and a button that links to a resource. A new carousel starts with three frames. Customers can move between frames with the arrows and the thumbnails below the carousel.

On the Styles tab, you can change the carousel's:

You can also change how fast the frames change, the overlay colors and the text alignment.

On the Content tab, you add, remove and change the frames. For each frame, you can add an image, a heading, a description and a button that links to any web address.

セクション

In a Modern help center, a section groups content together with a background, to set it apart from the rest of the page. You can type headings and text straight into a section, and add links and tables. You can also add components to a section, such as cards, a carousel or a spotlight. You can change how wide a section's content is.

You can show a link in a section as a URL, as an inline link, as a card or as an embed. An embed shows the linked content on the page, such as a Loom video. To change how a link shows, select the link, then choose URL,Inline,Card or Embed.

JSM Help

In a Modern help center, a JSM Help component connects the help center to Jira Service Management, so customers can find help. It shows help resources as cards, such as portals, portal groups, knowledge base articles and common requests, from the service spaces linked to the help center. You can also choose specific request forms, articles and external links from linked spaces to show. The home page of a new help center has a JSM Help component that shows a card for each portal. Learn how to link service spaces to a help center.

On the Source tab, you choose what the component shows:

With Manual, you choose a Space, then select the Forms,Knowledge base articles and External resources to show. To find a resource, use Search for resources.

Until you choose a space on the Source tab, the Styles and Content tabs show Add a source instead of their settings.

On the Content tab, you can change the component's:

On the Styles tab, you can change the component's:

Formatting components

In a Modern help center, you can also format a page's content with these components.

App components

In a Modern help center, app components show content from apps built with Forge or Connect. Each one holds a place on the page for an app. Until you install an app that uses it, the component shows that no app is available.

Forge header and Forge footer

In a Modern help center, a Forge header is a custom header component built with Forge. It uses the portal header module, which lets apps extend the portal header in Jira Service Management.

There's also a Forge footer, at the bottom of the page.

Connect header and Connect footer

In a Modern help center, a Connect header is a custom header component built with Connect. It uses the portal header module, which lets apps add custom content above the Jira Service Management help center.

There's also a Connect footer, at the bottom of the page.