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. URLs are automatically populated in the URL template as you create cards in the editor.

However, there are cases in which you may need to verify what is written where.

Applications may use dynamic URLs. It is very common in web applications to have different URLs for different users, projects, or 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). As a user selects different projects, the number changes. With this URL assigned to a card, it means it will only show for this particular project.

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

The 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 verify the final URL template. It should look like this:

The 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. Inside of the URL template field in te editor, you can refer to this property as [d.props.projectId]. Every other place in the tool, you can refer to this property as {{props.projectId}}. It should look like this: