Navigation

    APPDRAG Community

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Popular

    REMINDER

    Please be respectful of all AppDragers! Keep it really civil so that we can make the AppDrag community of builders as embracing, positive and inspiring as possible.

    Pop-up window

    How-to, Tutorials
    5
    17
    1322
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • L
      Laure Alonso last edited by

      I would like to set up a pop up window for visitors to subscribe to the newsletter. How can I do that?

      1 Reply Last reply Reply Quote 0
      • Joseph Benguira
        Joseph Benguira last edited by

        Hey Laure,

        1. You need to create a new page and configure it in the pages options to have NO header/footer
          In that new page you can design your popup content

        2. on your home page drop a button to subscribe to your newsletter on the page and configure the link to open your new popup page inside a Modal popup (it's an option in the Link brush)
          edit your button with the config brush > go to Advanced (identification) > there set an ID like MyPopupButton

        3. if you want to auto open the popup after 15 sec you can do this
          a) drop a block of jQuery code on your page
          b) double click on it, and paste this into the block of code

        <script>
        addEventListener('JqueryLoaded', function(e) {
           setTimeout(function(){
                 $("#MyPopupButton").trigger("click");
           }, 15000)
        });
             
        </script>
        
        Katya Nakache 1 Reply Last reply Reply Quote 2
        • L
          Laure Alonso last edited by

          Thanks so much!!!

          1 Reply Last reply Reply Quote 0
          • L
            Laure Alonso last edited by

            Hi Joseph,
            I've created the buttons and written down the code and the modal popup works perfectly on all pages... but on the blog article page (please see the attached screenshot: it opens a plain white modal window). No problem with opening in a the current window or in another window, but not relevant for this situation. Thanks for your help.
            e65e5239-9ad4-4e99-b8c4-be9989255aa0-image.png

            1 Reply Last reply Reply Quote 0
            • Joseph Benguira
              Joseph Benguira last edited by

              I can see you are trying in Preview mode ...
              try to publish and test on the live website

              1 Reply Last reply Reply Quote 0
              • L
                Laure Alonso last edited by

                Yes, I've done that a few times before: I've published and I got the same issue
                I'm in preview mode because I wanted to take a screenshot without displaying this plain white window on my published website...

                1 Reply Last reply Reply Quote 0
                • Joseph Benguira
                  Joseph Benguira last edited by

                  when you are on the blog you are in /blog/ folder, so maybe the issue is with your link being relative
                  in your link try to indicate a full url (starting with https://) this way the modal should be ok in both the regular pages and also from blog/shop pages

                  1 Reply Last reply Reply Quote 0
                  • L
                    Laure Alonso last edited by

                    Exactly! Thanks a lot

                    1 Reply Last reply Reply Quote 0
                    • L
                      Laure Alonso last edited by

                      Hello Joseph!
                      The pop up window works perfectly, but it's kind of annoying as it opens all the time... Is it possible to make sure that it opens only once for each visitor? Thanks

                      1 Reply Last reply Reply Quote 0
                      • Daniel Mulroy
                        Daniel Mulroy last edited by

                        Hi Laure!

                        Check out this topic about using AppDrag's store() javascript function.

                        Essentially, it stores a variable as a cookie and/or localStorage...

                        So you can check if the cookie is present. If it is, don't show the pop up. If it isn't, show the popup and add the variable that it was shown.

                        1 Reply Last reply Reply Quote 1
                        • Katya Nakache
                          Katya Nakache @Joseph Benguira last edited by

                          Hi Joseph,
                          Thank you for your tuto, I realised my pop-up and I'm very happy,
                          I also have insert the JQWERY code but it's not working...

                          How can we check that my manipulation is right ?

                          @Joseph-Benguira said in Pop-up window:

                          <script>
                          addEventListener('JqueryLoaded', function(e) {
                          setTimeout(function(){
                          $("#MyPopupButton").trigger("click");
                          }, 15000)
                          });

                          </script>

                          1 Reply Last reply Reply Quote 0
                          • Daniel Mulroy
                            Daniel Mulroy last edited by

                            Question @Katya-Nakache, did you add a "Javascript Source Code" block via PageBuilder, or did you add a "jQuery Source Code" block?

                            1 Reply Last reply Reply Quote 0
                            • Katya Nakache
                              Katya Nakache last edited by

                              @Daniel-Mulroy
                              I Added a JQUERY block on my homepage
                              And I have pasted the code that Joseph gave us

                              1 Reply Last reply Reply Quote 0
                              • Wassim
                                Wassim last edited by

                                @Katya-Nakache can you share a link to your page?

                                1 Reply Last reply Reply Quote 0
                                • Katya Nakache
                                  Katya Nakache last edited by

                                  Sure

                                  https://prod.appdrag.com/Builder/pagebuilder.html?appId=beezcom-e97145

                                  https://www.beezcom-agency.com/

                                  1 Reply Last reply Reply Quote 0
                                  • Wassim
                                    Wassim last edited by

                                    Ok you forgot to set the id on the button.
                                    Double click on your button then back on the left of button in the pink area.

                                    b3a0fa18-1b2d-4b41-87f0-5a7549877f11-image.png

                                    Scroll down to identification (advanced)

                                    b68774cf-d569-4013-8582-7c1462e15435-image.png

                                    And write the id

                                    0965dfb3-3dc5-48d5-9e82-4da1807e1bc2-image.png

                                    1 Reply Last reply Reply Quote 0
                                    • Katya Nakache
                                      Katya Nakache last edited by

                                      👍 👍 👍 👍 👍 👍 👍 👍 👍
                                      😊 😊 😊 😊 😊 😊 😊 😊
                                      👏 👏 👏 👏 👏 👏
                                      🤙 🤙 🤙 🤙 🤙

                                      1 Reply Last reply Reply Quote 0
                                      • First post
                                        Last post