Adding usetiful (user guidance) js snippet – not executed on vendor dashboard

Hi,

I am currently setting up https://www.usetiful.com/ for our website to enable hotspots, tooltips, onboarding checklists and tours for our vendors. They offer a WordPress Plugin but using the plugin, the usetiful elements are neither displayed on the vendor dashboard nor on the main website (I guess that's due to their plugin..). 

I tried 2 things:

Added the js snippet through a code snipped plugin (sitewide in the header section): Now Tooltips etc. loaded on the regular website (I set up a test tooltip assigned to the regular homepage to check if it's working there), but not on the vendor dashboard.

Then I went ahead and added the js script directly into the very top of scripts.js located plugins>marketking>public>dashboard>assets>js. This will load the js snippet on the vendor dashboard and display all elements correctly but will also show the vendor-tooltips (that are assigned to the vendor dashboard only) on the main page (placed in the x/y location where the vendor-dashboard-element I assigned them to is located). 

Is there a proper way to include the js snippet on the vendor dahsboard?

That's the js snippet (I just removed the token to post it here):

<!-- 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 = "hereisthetokennumber";
                        a.appendChild(r);
  })(window, document, "https://www.usetiful.com/dist/usetiful.js");

<!-- Usetiful script end -->

I did not make/need any alterations to segment users by ID etc. 

Thanks in advance!

Update:

I removed the js snippet from the scripts.js file and the vendor-tooltips assigned to the dashboard through css selectors still showed up on the regular website. I solved that by setting a rule that those tooltips should only show up when the URL contains /anbieter-dashboard. But the problem regarding the js snippet not being executed in the dashboard (only if I add it to scripts.js directly and only if this file remains in the dedicated plugin folder) remains, unfortunately.

Perfect, works!!

For anyone intending to use usetiful with Marketking:

• I used WPCode (free version)
• added code with jQuery enclosure (and with correct token) as "PHP Snippet"
• activated "logic" setting and "url contains" > url path to vendor dashboard (for example: https://mywebsite/vendor-dashboard)
• (purge any caching/optimization plugin cache, empty browser cache > there it is)

1000x thanks!

Hi guys.

I would also like to add a guided tour plugin just like this to my site but unfortunately I'm not as techy as the rest of you 🤣

I already have the WPcode free version installed and I would love to have this feature too. Can ye help me out with this. 

Thanks.

Hi Anthony,

it is actually quite straight even if you are not techy :)

If you are looking for a budget friendly version of guided tours, I recommend usetiful.com (it's actually completely free until you hit 2000 clicks on their "tour/help elements" per month. I have used other tools as well and they all work pretty much the same, it just depends on your budget and needs.

Once you registered with them and have access to their dashboard, there's an option "Install to your site" in the side menu. For starters, I would choose "simple setup" (advanced setup only if you want to specify which user groups can see a guided tour etc.). This is the code you need or at least you need the number after  r.dataset.token = ".

You then go to your WP admin dashboard and navigate to the WPCode Plugin and add a new snippet. On the right (directly above the code text field) you need to choose "PHP Snippet" as the code type. Now you add:

add_action('marketking_dashboard_head', function(){
    ?>
    <script>
        jQuery(document).ready(function(){
            (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 = "putyourtokencodehere";
                                    a.appendChild(r);
              })(window, document, "https://www.usetiful.com/dist/usetiful.js");
        });
    </script>
    <?php
});

>> "putyourtokencodehere" here goes the code that you got from the usetiful dashboard.

If you want your tours to show everywhere on the website, you can simply activate "place automatically" and "website wide – within the header" below the text field. (I am running the plugin in german so I am not 100% that's the correct english text for the options).

If you want your tours to only show on certain URLs, scroll down and right after the device type section you find the "enable logic" section. Here you can set the logic where to show the usetiful elements. For example "URL includes... https://mywebsite.com/knowledgebase" will only show the tour on URLs that actually include this part.

If you are using any "cache plugin" or "speed optimization plugin" (WP Smush, Nitro, WP Cache....) I would recommend going to the settings of the plugin and check where you can purge the cache - otherwise the code above might not be executed just yet.

Now back to usetiful, find the "content" menu and add your elements. 

For Tooltips: To define where the elements are placed on the website, every element has the "ELEMENT" setting when you configure it >> you need to use chrome browser, install the usetiful extension and now when you click on the target icon of the "ELEMENT" setting, it will ask you on which URL you want to show the element. Once you entered the URL, a new tab opens. On the bottom left, click the element icon and now you can choose the element on the website (for example a "signup" button) where you want your element to appear. 

For Tours: For tours it's pretty much the same you just define the URL where the tour starts within the tour settings. Usetiful is really straight forward to use and once you play around a bit you will get, how their settings change the appearance / logic of the interactive elements on your website.

Hope this helps!

Hi Miriam.

Thanks so much for that. 

With such detail I can't go wrong. I simply want to use it for new vendors that sign up to guide them around the dashboard and ensure they follow the steps.

I'll let you know how I get on with it.

Thanks again. 

Really appreciate it 🙏

Hi Miriam.

I have been looking at usetiful  and it looks really good but I think I need to use the advanced set-up as I need to use it differently to the way you are using it.

When vendors register, I want to give them a guided tour of the vendor dashboard.

I have a few different vendor roles so I would like to do a different tour per vendor role.

If it was a random page our several pages on the site I could drop the code into those page no problem but I can't figure how I can drop this code into the body of the vendor dashboard.

Have you any thoughts on how I can do this?

Thanks in advance.   

Hi Miriam.

I was on a call yesterday with Usetiful and unfortunately they could not help me insert it on my website. 

Im not sure how you are working it on your site but I believe the way I need it to work is different to yours.

On my site, when vendors register and they are given their dashboard. It is at this point I need a guide to begin.

I have various different vendor roles and they all need a various tour. 

They asked me to ask you if you used an instillation script on the vendor page?

Im not sure what that is but if you have any pointers for me I would be grateful.

Thanks.