How to add a guided tour / help for new users

[Bren]

Hello all.
I'd like to add a guided tour / help for new users (with also an option to be reminded by clicking a help button on a page. Something like Bootstro.js. Has anyone added anything like that to their Joomla / Fabrik sites before and, if so, could you share what you used, with recommendations?
Thanks in advance.

 

[lousyfool]

There seem to be some Joomla extensions for such purpose at https://extensions.joomla.org/tags/tutorials, though I haven't used any of them, so you'll need to find out what might check your boxes, if any.

Probably needless to say but, since it's a more (Joomla-)generic topic, you may also search and ask around elsewhere, e.g. on https://forum.joomla.org

 

[Bren]

Hi louseyfool.
Yes, I was looking at these, too. I'm interested in Easy Tour at https://extensions.joomla.org/extension/miscellaneous/tutorials/easy-tour/ . Wondering if anyone's used it with Fabrik. I'll try it out and share.
Thanks

 

[Bren]

I'm testing out the Easy Tour extension now. Looks pretty cool, at least on the backend component / plugin. Basically you can create and manage multiple tours. To apply them to a page, you need to add something like the following to the top of a page, which I've added to the Intro of a Fabrik group (I'm using the default bootstrap tabs form template).

<p>{easytour id="firsttour" startbutton="yes" numofstep="5" stepprocess="auto" stepduration="00:05"}</p>

Next, I need to add the following to specific portions of the page that I want to call attention to during the tour. I would like to add each of these to specific Fabrik elements within the same Fabrik group. The question is how. Is there a typical element setting that I could input the following with? Or, is the only way to do it would be within a custom form template?

<p id="easytour_step1">

<p id="easytour_step2">

<p id="easytour_step3">

<p id="easytour_step4">

<p id="easytour_step5">

Any suggestions?
Thanks in advance.

 

[lousyfool]

I would like to add each of these to specific Fabrik elements within the same Fabrik group.

Yes, your best bet will be a custom form template since there's no way in the Fabrik backend to add IDs to elements.
Note that the form elements themselves (inputs, selects etc) already have and need their Fabrik IDs, so don't touch those. But you may add your IDs to the parent div containers, for instance the one with class "fabrikElementContainer" or the one with class "fabrikElement", so it ends up like

<div id="easytour_step1" class="fabrikElement">

 

[troester]

It may be possible to add it to the element label.
Enable "WYSIWYG editor for element labels" in Fabrik Options/Forms, then you can add labels including HTML text.
But you have to test if there are unwanted side effects.

 

[Bren]

Thanks for the suggestions, guys. I tried it in the label and it works! Looks great with the opacity feature, in Easy Tour, off. If I turn it on then only the label is highlighted. I guess I’ll have to do a custom form template if I want to use the opacity feature.
Thanks again, guys.