• English日本語한국어
  • 로그인지금 시작하기

Pop-overs

Pop-overs are a unique component we've created to provide a lot of direction in a small space for our readers. Initially created to help with drive signups, you can use these components to help get readers into the product, go to a document that gives them more information on a subject, or even sign up for New Relic, all in one place!

Using pop-overs

A pop-over is written in a JSON file, and can be put into any doc you like using the following format:

<InlinePopover type="title" />

Where "title" is the name of the component in the JSON file. In the screenshot above, "synthetics" is the pop-over used, so "synthetics" goes where "title" is in the component.

You can use multiple pop-overs in a single topic without any issues.

The keyboard maestro macro for pop-overs is kkpopover

Creating or editing pop-overs

As mentioned above, the pop-overs are contained within an editable JSON file. You can edit the file to create your own pop-overs using the procedure below:

Step 1 of 5

Open the JSON file and opening your preferred editor.

Step 2 of 5

Copy and paste an existing pop-over, and modify it as needed for the pop-over you want to create.

  • The first line is the "title" of the pop-over used in the format example above.

  • inlineText is the text that appears in the doc you put the component in, before the user hovers over the pop-over.

  • header is the title of the pop-over once it displays.

  • text is the copy that displays in the body of the pop-over.

  • learnMoreUrl is the URL of the doc you want to send the reader to for more information.

  • primaryButton is the text of the main button as it appears in the pop-over.

  • primaryButtonUrl is the link you want the button to send the reader to when clicked.

  • secondaryButton is the text of the right-most button as it appears in the pop-over.

  • secondaryButtonUrl is the link you want the right-most button to send the reader to when clicked.

    For organizational purposes, we try to keep the list in the JSON file in order to make things easier to find.

Step 3 of 5

Ensure that the formatting of your pop-over is correct, as well as the formatting of the brackets that surround it.

Step 4 of 5

Open a PR based on your changes, and contact someone in DevEng to have them review.

Step 5 of 5

Once the PR is reviewed and merged, you can use your new pop-over in any doc you like!

Copyright © 2023 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.