Contextual Signposts for Product Changes

Show small New, Moved, and Updated labels directly on your product UI, then take customers to the changelog entry with the detail.

All Articles

Contextual Signposts for Product Changes

Contextual signposts put a small New, Moved, or Updated label on a specific part of your product. A customer can select the label to open the changelog entry that explains the change.

When to use signposts

  • New — draw attention to a feature customers may otherwise overlook.
  • Moved — help customers whose usual route to an action has changed.
  • Updated — explain changed behaviour before a customer runs into it.

Signposts are deliberately small. Use them for a short period after a meaningful change, then let them expire. They complement a changelog; they do not replace the detail in the post.

Before you start

Your product must already have the ChangeCrab embed installed. Open the product page containing the button, link, menu item, or other control you want to highlight. You do not need to edit that page or add ChangeCrab-specific code.

ChangeCrab identifies the target using a selector copied by your browser. The selector is simply the browser's address for that element; you can copy and paste it without having to understand or write code.

Copy the target from your product

  1. Open the relevant page in your product.
  2. Right-click the exact element you want to label and choose Inspect.
  3. Your browser highlights that element in its Elements panel. Right-click the highlighted line and choose Copy → Copy selector.
  4. Return to ChangeCrab and paste the result into Target element.

Browser wording varies slightly, but Chrome, Edge, and other Chromium-based browsers follow this flow. Ask whoever maintains your product for a stable selector if your browser does not offer Copy selector.

Add a signpost

  1. Create or edit the changelog entry that explains the change.
  2. In Contextual signposts, select Add signpost.
  3. Choose the label: New, Moved, or Updated.
  4. Paste the selector you copied from your product into Target element.
  5. Optionally restrict it to a page URL. Leave it blank to show it everywhere, use /billing for one path, or /billing/* for that path and its subpages.
  6. Set an expiry date and publish the changelog entry.

You can add up to three signposts to one entry. Each active signpost appears at the target element's top-right corner and links to that entry's public changelog page.

Choose a reliable target

The copied selector should point to one element on the page. Test the published signpost on the exact URL where customers will see it. If your product's layout later changes, copy the target again and update the signpost.

A short selector based on a unique element ID or a stable product attribute is usually more durable than one containing a long chain of layout positions. You can paste either form; if the browser gives you a very long selector, your product team may be able to provide a more stable one.

How customers experience it

The label is an accessible, clickable part of the page. Selecting it opens the matching changelog entry in a new tab without activating the underlying button or link. This lets a customer keep their place in the product while getting the context they need.

Good operating practice

  • Use a specific changelog entry with a clear title and enough detail to answer “what changed?” and “what do I need to do?”.
  • Set an expiry date. A signpost should guide customers through a transition, not become permanent interface decoration.
  • Use a URL pattern when a control has different meaning in different parts of your product.
  • Check the live page after publishing, especially after changing the product UI.

Troubleshooting

The signpost does not appear

  • Confirm the changelog entry is published and the expiry date has not passed.
  • Confirm the page URL matches the optional URL pattern.
  • Confirm the embed script is present on that page.
  • Copy the element's selector again and compare it with the value saved in Target element.

The signpost appears in the wrong place

The selector may match more than one element, or the target may sit inside a container that affects positioning. Copy the exact control again. If the problem remains, ask your product team for a selector that identifies only that element, then choose Beside element as an alternative position if needed.

Related guides