I think I have two pretty straight questions about the tours and tours ui module but I can't seem to find the answers. Sorry for putting them in one post it seems more logic this way.

  1. How can I create a custom tours button to call the tour on the current page. The default button is shown in my admin menu but I want it to show to people who don't have access to the admin menu as well. I know I can do this with a simple <a href="/page/?tour=1">link</a> but this makes the page reload and this doesn't happen with the default button. So there must be another way.

  2. I have to insert a route for the page where the tour should be shown. The route I can find for my content type page is entity.node.canonical but I think this is the route to all node pages. Is there a way to make it specific for one content type page?


Question 1

If you look in tour module, there are a js/tour.js file with the logic. You could use it to figure out how it works.

Drupal.behaviors.tour = {
attach: function attach(context) {
  $('body').once('tour').each(function () {
    var model = new Drupal.tour.models.StateModel();
    new Drupal.tour.views.ToggleTourView({
      el: $(context).find('#toolbar-tab-tour'),
      model: model

    model.on('change:isActive', function (model, isActive) {
      $(document).trigger(isActive ? 'drupalTourStarted' : 'drupalTourStopped');
    }).set('tour', $(context).find('ol#tour'));

    if (/tour=?/i.test(queryString)) {
      model.set('isActive', true);

When you talk about default button, i think you are refering to '#toolbar-tab-tour' button, so you could write a js file following this example.

Question 2

You are right. Tipically,you could work with this route using paramenters to build URL. For example:

$url = \Drupal\Core\Url::fromRoute('entity.node.canonical', ['node' => 1], $options)

But you can't add these params in module Tour UI. I think the easiest approach is build a simple module and create your own route to map a node. It should be fast.

Here the link for more infomation to build a module

  • Thanks a lot. Creating a button was as simple as creating a div with the #toolbar-tab-tour id. When the use doesn't have acces to the admin toolbar this custom div will work as the default button replacement. – Joost Jul 21 '19 at 12:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.