+ Start a Discussion
Kapil DevreKapil Devre 

How to show pop up window only once for the first time when user visits the website in lightning component?

I have written a Lightning Component of Modal Popup to show popup in home page of public community website , it will be shown whenever user visits the website. 

My requirement is here is popup window should show only once when the user visits the website for the first time.
But the issue is , whenever the user visits to the website or other sub pages of the site and come back to the home page, again the popup appears. 
In this we want to set the modal popup should be shown only for the first time when the users visit the site , 
as in the popup we are just making sure the user is aware of GDPR rules and regulations .
Once, the user clicks on OK, everytime the GDPR popup should not get open when the user visits the site and home page.

I have refered many Javascript examples but unfortunately I am not able to figure it out , please find my following code and suggest me.

Component :

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="isModalOpen" type="boolean" default="true"/>
    <div class="slds-m-around_xx-large">
              
        <!--Use aura:if tag to display/hide popup based on isModalOpen value-->  
        <aura:if isTrue="{!v.isModalOpen}">            
            <!-- Modal/Popup Box starts here-->
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <!-- Modal/Popup Box Header Starts here-->
                    <header class="slds-modal__content slds-p-around_medium">
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate"><b>About Your Privacy</b></h2>
                    </header>
                    <!--Modal/Popup Box Body Starts here-->
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <p>This website uses cookies to improve performance and enhance our visitors’ experience.You may view our privacy policy here.                    
                        </p>
                    </div>
                    <!--Modal/Popup Box Footer Starts here - class="slds-modal__header", class="slds-modal__footer"-->
                    <footer class="slds-modal__content slds-p-around_medium"> 
                          <lightning:button 
                                          label="OK"
                                          title="OK"
                                          onclick="{!c.submitDetails}"/>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </aura:if>
    </div>
</aura:component>

Controller :

({
   openModel: function(component, event, helper) {
      // Set isModalOpen attribute to true
      component.set("v.isModalOpen", true);
      
       
   },
  
   closeModel: function(component, event, helper) {
      // Set isModalOpen attribute to false  
      component.set("v.isModalOpen", false);
   },
  
   submitDetails: function(component, event, helper) {
      // Set isModalOpen attribute to false
      //Add your code to call apex method or do some processing
      component.set("v.isModalOpen", false);
   },
})
Raj VakatiRaj Vakati
This wnt work like this .. 

You have to do this 
  1. Create a checkbox on the user .. ( Is First Time Model Display ) 
  2. Make it false .. 
  3. When user login first time, check the current user checkbox value is true or false .. This Field value you can get by using apex class and call this method is doInit 
  4. If the Checkbox is false, the show the toast message  
  5. Once after toast message is display , update the user record Is First Time Model to true ..

 
mukesh guptamukesh gupta
Hi Kapil,

This is only possible with database or custom field.
1. Create a check box in the user object and set Default false.
2. when  user logged in then you can set this check box to TRUE in  doInit() funtion.
3. this will set true for this user sothat this user will not able to see the popup box again.

Please MARK as a best ansewer if you got resolved your issue.

Regards
Mukesh


 
Kapil DevreKapil Devre
Hi Raj/Mukesh,
I want to set the Popup box only for once per user , for the public community website and not for Login Authenticated users.

Thanks and Regards,
Kapil
Kiran PandiyanKiran Pandiyan

Hi @Kapil Devre,

Did you solve it ? Let me know if possible as I'm also facing something similar

SwethaSwetha (Salesforce Developers) 
The Guest users do not have a login. You might want to try using  jquery-cookie as mentioned in https://stackoverflow.com/questions/24189428/display-a-popup-only-once-per-user

If this information helps, please mark the answer as best. Thank you