Pop-Up Splash Pages

JaySouthwood

Is there a way to design a pop-up splash page and link it in convio Pagebuilder?

We have an event coming up soon and I would like to create a pop up to remind people of the date when they first visit our page.

Thank you!

-Jay

Adrian Cotter

Hey Jay,

In a convio pagebuilder page, you could use Javascript to do this. You would have to do this in the HTML source view of the page:

Here's a place where you can get the full details on the parameters of the window you can control:

http://www.javascript-coder.com/window-popup/javascript-window-open.phtml

However, you should know that a lot of popup blockers will block this window. And people (me included) are not necessarily big fans of popups.

There are alternatives:

• just highlighted text on the page (in a bright colored box)

• or a DHTML popup that doesn't open a new window. A little more complex, but not terribly difficult either.

• other ways to remind people like sending them an email might be more effective

Lindsi Gish

Adrian Cotter:

Hey Jay,

In a convio pagebuilder page, you could use Javascript to do this. You would have to do this in the HTML source view of the page:

Here's a place where you can get the full details on the parameters of the window you can control:

http://www.javascript-coder.com/window-popup/javascript-window-open.phtml

However, you should know that a lot of popup blockers will block this window. And people (me included) are not necessarily big fans of popups.

There are alternatives:

• just highlighted text on the page (in a bright colored box)

• or a DHTML popup that doesn't open a new window. A little more complex, but not terribly difficult either.

• other ways to remind people like sending them an email might be more effective

This website is great for DHTML help. Thanks for the tip on that.

Question: on a Convio site (PageBuilder, in my case), how do you implement the DHTML Popup code so it appears on every page of the site? We have a one-day campaign and we want to make sure anyone who hits our site, on any page/donation form/URL shortcut/anything, sees the pop-up alerting them about it.

Noah Cooper

Lindsi Gish:

This website is great for DHTML help. Thanks for the tip on that.

Question: on a Convio site (PageBuilder, in my case), how do you implement the DHTML Popup code so it appears on every page of the site? We have a one-day campaign and we want to make sure anyone who hits our site, on any page/donation form/URL shortcut/anything, sees the pop-up alerting them about it.

You'd need to put the code in your page wrapper(s) in order to make it appear on every page on your site.

Lindsi Gish

Noah Cooper:

You'd need to put the code in your page wrapper(s) in order to make it appear on every page on your site.

Thanks!

Brian Mucha

Lindsi Gish:

Thanks!

It might be nice to have it on every page, but that could also get annoying. You can use a client-side cookie to give visitors an option to dismiss that dialog permanently. Here's what I do. First, place the code for the dialog (called 'prizes' in this sample) and associated javascript at the bottom of your page or page wrapper code.

<div id="prizes" style="position: absolute; top: 150px; z-index: 30; border: 10px solid darkred; background: #ffffff; width: 50%; margin: 0 auto; padding: 10px 10px 2px 10px; text-align:center;">

    <h2>Did you know that Fundraising can earn you fabulous prizes?</h2>

    <p>See <strong><a href="http://www.mysite.org">The Fundraising Challenge</a></strong> for details!</p>

    <p style="font-size: 10px;">(<a href="javascript&colon;closeDialog();">Close this alert</a> | <a href="javascript&colon;dismissDialog();">Don't show this again</a>)</p>

</div>

<script type="text/javascript">

    var showPrizes = readCookie('AlertPrizes')

    if (showPrizes =='Hide')

    {

        document.getElementById('prizes').className = 'DisplayHidden';

    }

    function closeDialog()

    {

        document.getElementById('prizes').className = 'DisplayHidden';

    }

    function dismissDialog()

    {

        createCookie('AlertPrizes','Hide',30);

        document.getElementById('prizes').className = 'DisplayHidden';

    }

    function createCookie(name,value,days)

    {

        if (days) {

            var date = new Date();

            date.setTime(date.getTime()+(days*24*60*60*1000));

            var expires = "; expires="+date.toGMTString();

        }

        else var expires = "";

        document.cookie = name+"="+value+expires+"; path=/";

    }

    function readCookie(name)

    {

        var nameEQ = name + "=";

        var ca = document.cookie.split(';');

        for(var i=0;i < ca.length;i++) {

            var c = ca;

            while (c.charAt(0)==' ') c = c.substring(1,c.length);

            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

        }

        return null;

    }

</script>

<styles type="text/css">

    .DisplayHidden

    {

        display: none;

    }

</styles>

So what happens here is that the absolutely positioned 'dialog' box appears when a visitor opens the page. The dialog offers a 'close this alert' link, which fires a JS function that hides the dialog (by assigning it the DisplayHidden css class.) The other 'Don't show this again' option allows the visitor to hide the dialog permanently by firing the script that both hides the dialog AND sets a 'showPrizes' cookie.

Each time the page loads the red part of the script checks to see if the cookie has been set, and hides the dialog if it has.

Regards, Brian

Lindsi Gish

Brian Mucha:

It might be nice to have it on every page, but that could also get annoying. You can use a client-side cookie to give visitors an option to dismiss that dialog permanently. Here's what I do. First, place the code for the dialog (called 'prizes' in this sample) and associated javascript at the bottom of your page or page wrapper code.

<div id="prizes" style="position: absolute; top: 150px; z-index: 30; border: 10px solid darkred; background: #ffffff; width: 50%; margin: 0 auto; padding: 10px 10px 2px 10px; text-align:center;">

    <h2>Did you know that Fundraising can earn you fabulous prizes?</h2>

    <p>See <strong><a href="http://www.mysite.org">The Fundraising Challenge</a></strong> for details!</p>

    <p style="font-size: 10px;">(<a href="javascript&colon;closeDialog();">Close this alert</a> | <a href="javascript&colon;dismissDialog();">Don't show this again</a>)</p>

</div>

<script type="text/javascript">

    var showPrizes = readCookie('AlertPrizes')

    if (showPrizes =='Hide')

    {

        document.getElementById('prizes').className = 'DisplayHidden';

    }

    function closeDialog()

    {

        document.getElementById('prizes').className = 'DisplayHidden';

    }

    function dismissDialog()

    {

        createCookie('AlertPrizes','Hide',30);

        document.getElementById('prizes').className = 'DisplayHidden';

    }

    function createCookie(name,value,days)

    {

        if (days) {

            var date = new Date();

            date.setTime(date.getTime()+(days*24*60*60*1000));

            var expires = "; expires="+date.toGMTString();

        }

        else var expires = "";

        document.cookie = name+"="+value+expires+"; path=/";

    }

    function readCookie(name)

    {

        var nameEQ = name + "=";

        var ca = document.cookie.split(';');

        for(var i=0;i < ca.length;i++) {

            var c = ca;

            while (c.charAt(0)==' ') c = c.substring(1,c.length);

            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

        }

        return null;

    }

</script>

<styles type="text/css">

    .DisplayHidden

    {

        display: none;

    }

</styles>

So what happens here is that the absolutely positioned 'dialog' box appears when a visitor opens the page. The dialog offers a 'close this alert' link, which fires a JS function that hides the dialog (by assigning it the DisplayHidden css class.) The other 'Don't show this again' option allows the visitor to hide the dialog permanently by firing the script that both hides the dialog AND sets a 'showPrizes' cookie.

Each time the page loads the red part of the script checks to see if the cookie has been set, and hides the dialog if it has.

Regards, Brian

Perfect! I had that exact thought. I want to make sure they see it once--no matter what page they land on first--but not on every page for the duration of their visit. Thank you!