Expand my Community achievements bar.

SOLVED

How to create First Time User Experience in AEM 6.1

Avatar

Level 3

Hi All,

For our project, we have a requirement to create a "First Time User" Experience in AEM. To give more details, we have to create an experience where we can highlight the new features of our site to the User, like a tooltip. This should appear only on the First login of the User after the site is Launched. I could not find anything online. Please suggest?

-Aman

1 Accepted Solution

Avatar

Correct answer by
Administrator

Hi 

This can be easily achieved by using many JQuery plugins available.

JQuery Plugins for guide tours :- http://ninodezign.com/25-free-jquery-plugins-for-doing-guided-tours-through-a-website/

    Demo :- http://introjs.com/   Click to Demo

    Demo 2:- http://blog.tommoor.com/crumble/

How these works:- 

    1. introJs(".introduction-farm").start();

    Just add the Class or Id and get it working.

 

The basic concept is very simple. This is as simple as creating a custom component for the page using third party JavaScript or Jquery plugins.

How to do it in AEM:

    Link:- https://helpx.adobe.com/experience-manager/using/integrating-custom-carousel-component-cq.html

    // Creating a component using third party JS.

    Link:-https://helpx.adobe.com/experience-manager/using/integrating-custom-cq-widgets-third-party.html

    // Integrating custom Adobe Experience Manager Component with third-party libraries

 

I hope this will help you.

~kautuk



Kautuk Sahni

View solution in original post

2 Replies

Avatar

Level 2

I have not been involved in such an implementation. However, my thoughts are that you store a value in the profile to check whether it is the user's first login/first visit to a specific page. If yes, then trigger the overlays. You will have to customize the existing core UI, and that would be a bit risky. Probably have a specific clientlib and call the clientlib on the check, or else the js files will be loaded on each visit. Checkout [1] for a framework that supports what I think you need.

 

1. http://introjs.com/

Avatar

Correct answer by
Administrator

Hi 

This can be easily achieved by using many JQuery plugins available.

JQuery Plugins for guide tours :- http://ninodezign.com/25-free-jquery-plugins-for-doing-guided-tours-through-a-website/

    Demo :- http://introjs.com/   Click to Demo

    Demo 2:- http://blog.tommoor.com/crumble/

How these works:- 

    1. introJs(".introduction-farm").start();

    Just add the Class or Id and get it working.

 

The basic concept is very simple. This is as simple as creating a custom component for the page using third party JavaScript or Jquery plugins.

How to do it in AEM:

    Link:- https://helpx.adobe.com/experience-manager/using/integrating-custom-carousel-component-cq.html

    // Creating a component using third party JS.

    Link:-https://helpx.adobe.com/experience-manager/using/integrating-custom-cq-widgets-third-party.html

    // Integrating custom Adobe Experience Manager Component with third-party libraries

 

I hope this will help you.

~kautuk



Kautuk Sahni