Imagine your tour contains a redirect to a dynamic URL - a page with part of the URL that is generated every time a user tries to access it. The target URL is different every time.


For example, let's say your users land on their accounts' home page myapp.com/main


From here, they can go to the editor, but the editor URL contains a unique token that is generated by your app. And so for one user the editor URL is myapp.com/main/editor/xhWrW62rQj and for some other users it is  myapp.com/main/editor/7lCbBZjF94


If we want to create a tour that will also redirect users from the home page to the editor, we will need to add a "redirect" step in the tour. We will use a placeholder for the dynamic part of the URL. 


Here's how to do that:


  1. Ensuring that every generated URL is communicated to the Usetiful system

    To achieve this, we need to programmatically add the generated token as a variable to the Usetiful script, before it loads, for every separate user

    As mentioned before, for one of the users the generated URL was myapp.com/main/editor/xhWrW62rQj

    Here's how the Usetiful script will look for that specific user
    <!-- User segmentation start -->
<script>
window.usetifulTags = { token: "xhWrW62rQj",     
};</script>
<!-- User segmentation end -->

<!-- Usetiful script start -->
<script>
  (function (w, d, s) {
    var a = d.getElementsByTagName('head')[0];
    var r = d.createElement('script');
    r.async = 1;
    r.src = s;
    r.setAttribute('id', 'usetifulScript');
    r.dataset.token = "";
            a.appendChild(r);
  })(window, document, "https://www.usetiful.com/dist/usetiful.js");
</script>
<!-- Usetiful script end -->
    This way our system will get informed that there is a variable called token which needs to be added dynamically to the redirect URL, and the value of the variable is 
    xhWrW62rQj
    Important: token value in the code must be of type "string"

  2. Setting up the redirect step so that every time it is corresponding to the generated URL

    Go to the redirect step, and add the {token} placeholder. Here's how it will look for this example
    myapp.com/main/editor/{token}

    This will tell the Usetiful system that every time a user reaches the redirect step in the tour, the redirect URL should contain the token that has been previously communicated via the script.