This month featured item on AppShare - Guided Hints

Blog
1

Hey everyone,

Have you seen this month featured item on AppShare? For the month of June, the best content selected was Guided Hints.

Say goodbye to confusion, and hello to instant clarity!

So, what is this game-changing feature? Guided Hints ensures that users receive the right information at the right time, to better enhance their overall experience.

No more endless searches through documentation – Guided Hints delivers concise, relevant help, exactly where it’s needed.

You can read more about Guided Hints or download it here

Got a question? Drop it down below!

Thanks

Lisa V

1 Like
2

This is absolutely brilliant, hugely helpful for anyone who has a customer facing interface in Create to help guide first time users around your interface.

3

Another great widget.

I am having one issue with using it though, the Guided Hints are still showing when I navigate in Netcall - making it unusable.

So I set it to show guided hints on page load (tried link & button, no difference).

image
image1903×622 73 KB

This works great.

However when I navigate to any other page, the hints from previous page are still shown :frowning:

image
image1895×637 118 KB

I will be integrating this everywhere if you can squash this bug.

Same behaviour in

  • Chrome Version 137.0.7151.122 (Official Build) (64-bit)
  • Edge Version 137.0.3296.93 (Official build) (64-bit)

Regards
JonathanFS

4

This will be great for Agents too, as extra guidance is always helpful; especially for new users to the system.

5

I hadn’t noticed that in our testing, thanks for the heads up. Once you navigate to the page that has the Guided Hints on it, the hints follow you around subsequent pages, which as you say makes it unusable.

6

Yes at first I thought it was just pages on that viewport, but it’s any page you open.

7

Hi both,

I’m really glad to hear you’re enjoying the functionality and power of this awesome widget :blush:

Thank you for bringing this issue to my attention. During my initial testing, I didn’t encounter this behaviour, but I do understand why it might occur and what is possibly causing it.

I’ll be working on an update to address this over the next few days to a week, and I’ll let you know as soon as a new version is available.

Thanks again for your understanding and support.

1 Like
8

Thanks Ali, great news.
I look forward to using this on lots of internal/external Netcall UI’s :smiley:

1 Like
9

Hi all,

I wasn’t able to replicate the exact issue you both encountered, but I did notice a related problem that would have the same cause: the hints weren’t being cleared properly after navigating away from the page.

To address this, I’ve just released an updated version of the Guided Hints (v1.1 – click here to view), widget which hopefully should resolve the issue.

If you could please update your widget when you get a chance and feedback to me how it goes, that would be great.

Hope this helps :slight_smile:

10

Hi Ali,

I’ve tested v1.1 this morning and it has fixed the issue. The hints display correctly on the page they’re placed on and when navigating away the hint doesn’t follow you anymore. Thanks for looking at it so quickly.

Mike

2 Likes
11

Hi @mikeedwards ,

Thanks for getting back with the results - I’m really glad to hear this is now resolved.
I appreciate both of you for reporting the issue and helping us improve this functionality.

Thanks again, and feel free to reach out if anything else comes up :slight_smile:

12

Hi @ali.bandali

I too can confirm this excellent widget is now working as required.
I’m looking forward to adding this to our agent UI to guide them through various parts of the system.

image
image1898×944 155 KB

Thanks
JonathanFS

1 Like
13

Hi Ali

I have found/fixed a minor issue related to the layering of guided hints.

The Hints were appearing on top of the Netcall main menu, and above the main menu bar as shown below.

image
image1916×867 109 KB

I examined the page an could see the z-index for our menu is 1021.

image
image1905×810 143 KB

I needed the Hint to appear below that layer, so changed the CSS (intro/intro.css) widget from 99999 to 1020.

.introjs-hint {
  box-sizing: content-box;
  position: absolute;
  background: 0 0;
  width: 20px;
  height: 15px;
  cursor: pointer;
  z-index: 1020; /*99999;*/
}

Now the Hints appear on the page correctly.

image
image1903×444 55.5 KB

This z-index may need to be a different value than originally set, dependant upon your theme.

Thanks for a great widget!
JonathanFS

14

Hi Jonathon,

I notice from your screen shot that you’ve implemented font awesome icons in the widget. Could you share how you did that?

TIA

Richard

15

If you’re referring to the icons on the main navigation tabs, these can be selected for each Top Tab in their “Basics” settings tab in Build Studio…

image
image604×575 18.2 KB

16

Thanks Bob. I was referring to the Hint ‘dots’ being displayed as font awesome information icons.

17

Hi Richard, do you mean the (i) icon i used for hints? As I used an SVG path

.introjs-hint-pulse {
	width: 16px;
	height: 16px;

	background-color: transparent;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 15h-1v-6h2v6h-1zm0-8h-1V7h2v2h-1z"/></svg>') no-repeat center center;
	background-size: contain;
	position: absolute;
	z-index: 10 !important;

border-radius: 6px;	
	/*transition: all .2s ease-out;
	animation: introjspulse 2s infinite*/
}
18

Ah sorry, I didn’t open the screenshot big enough to see they were help icons, I thought they were just dots!