What?

This recipe will show you how to set up a modal popup asking a guest to login. They are given the option to either login or continue anonymously. If someone is already logged in, they will not see the popup.

Why?

There are some places where it would be nice if the person was logged in, but you don't want to make it required. Examples include the giving page and event registration.

Being logged in allow us to prefill information for them, and reduces duplicate records on the backend. But you probably don't want to force people to login to give, or you will lose some people that just wanted to give a 1-time anonymous donation.

How?

To create the login prompt, add an HTML block to the page with the following code. You can customize the text and button labels by editing the lava variables at the top.

{% assign modalTitle = "Would you like to login?" %}
{% assign modalText  = "If you have a My Barefoot Church account, you can login to access your saved payment methods, pre-fill your information, and make the giving process quicker." %}
{% assign loginText  = "Login Now" %}
{% assign cancelText = "Continue Anonymously" %}
{% unless CurrentPerson and CurrentPerson != null %}
    <script>
        $(function(){
            bootbox.dialog({
                message: "<h3>{{ modalTitle }}</h3><p>{{ modalText }}</p>",
                buttons: {
                    ok: {
                        label: '{{ loginText }}',
                        className: 'btn-primary',
                        callback: function () {
                            window.location.href = '/login?returnurl={{ 'Global' | Page:'Url' | Url:'pathandquery' | EscapeDataString }}';
                        }
                    },
                    cancel: {
                        label: '{{ cancelText }}',
                        className: 'btn-default',
                        callback: function () {
                            // Do Nothing
                        }
                    }
                }
            })
        });
    </script>
{% endunless %}

Change Log

• 2020-08-21 - Changed return Url to automatically include the querystring from the sending page
• 2022-02-01 - Updated lava for compatibility with Fluid lava engine in v13