Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
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