Published 5/4/2022 by Karel Papik

Hints and tours on dynamic URLs

How to make tours and hints work on dynamic URLs containing user IDs, project names or workspace identifiers.

Each Tour and Hint card belongs to a specific element for which the card is shown.

The Element is defined by its URL and CSS:

  • URL defines the page where the element is
  • CSS defines the where the element is on that URL
product tours supporting dynamic URLs
Use case #1 - [dynamic] placeholder

Product Fruits is pretty good at finding the right URL, but there are cases where it needs a little help. Especially when the application uses dynamic URLs.

It is very common for web applications to modify URLs for different users, projects, workspaces etc with unique parameters. These parameters are usually a combination of random characters like "1x2F3" in this example:

The problem is that when your target URL includes the "1x2F3" parameter, the card will only be shown to this particular user. If you want that tour or hint to be shown to all users on that URL you need to replace that parameter with the "[dynamic]" placeholder:[dynamic]/tasks

Now your tour or hint will be displayed to all users on this URL regardless of the parameter.

Read more about dynamic URLs in our knowledge base.

Use case #2 - [specific] placeholder

There're situations when the [dynamic] placeholder won't work. Especially when your product adoption flows require redirecting users to a specific URL (e.g. launching a tour on a particular page from the Life Ring Button).

In this scenarion you need to provide custom context attributes to Product Fruits so we can reconstruct the URL.

Read more about custom data here.

CSS troubleshooting

You see the card in the right place, but the other users don't.

It means that the CSS, you have selected, points to a different element for different users. Fix this by choosing a CSS selector that points to the same element for all users.


Logo small
© Copyright 2023 Product Fruits s.r.o. All rights reserved.