Dynamic URLs

Tours and Hints tools are bound to URLs in your application. This is important because it allows us to show the right content in the right place. If we didn't take URL addresses into consideration, tour cards or hints could display randomly in different places. Usually, this isn't something you want. You don't have to fill them out, URLs are bound automatically while you create cards in our editor.

However, there are cases you need to check.

Applications may use dynamic URLs. It is very common in web applications to have different URLs for different users, projects, or any other entities. As an example, we can consider a project management application with a tasks feature. When you browse tasks, you may get URL like this:

https://example.com/projects/123/tasks

This URL is a typical example of a dynamic address (notice the 123 in it). As a user selects a different project, it changes. If you kept this URL assigned to a card, it would mean it would show just for this particular project.

To solve this, dynamic parameters can be replaced by special placeholders. These placeholders will tell Product Fruits, that these parts of the URL address can change.

Dynamic placeholder

The first possible placeholder is [dynamic]. This is the most common placeholder. Most of the time, you don't have to take care of replacing it manually, because we try to detect dynamic parameters (we replace all numeric values and/or some special cases automatically). However, it's good to check the final URL template. It should look like this:

Specific placeholder

The second possible placeholder should be used in specific use-cases. Let's say you'd like to launch a tour from our Life Ring Button from any page in your application. When users click on the tour launcher, Product Fruits should redirect to the page where the first card starts.

To do that, Product Fruits has to know how to construct the URL to redirect to. This is not possible with the [dynamic] placeholder, because we don't know what value we should use for the [dynamic] portion.

To solve this problem, you have to provide custom context attributes to Product Fruits. Read more on it here.

After these attributes are available, you can use them as placeholders. For instance, you provided the projectId custom attribute. You can refer to this property as [d.props.projectId]. It should look like this: