Notifications

Notifications

There are three types of the notification, Cookie bar, Announcement and Pop-Up windows. All are created, edited and deleted from My Websites > Main > Customise Design > Notifications.

The Cookie Bar

In compliance with GDPR, the Cookie bar shows a standard notice across the bottom of browser screen about cookie usage, and can optionally link to your Privacy Page. Please note that you might not need to show the cookie bar. However, if your site sets persistent cookies on the visitor's browser then you should advise your visitor. If the cookie bar is shown on your website we also automatically update the standard privacy policy text.

The cookie bar features customisable positioning, text, colours, link, hide option and bar height.

The Announcement Bar

Display a custom message to highlight an event, sale, or important announcement to your website visitors. You can select to have an announcement on one or all your website pages and even set up different announcements on different pages.

Preset a start and end date for sales - get prepared early by presenting a start date and end date for your sales and seasonal messages. It also features customisable positioning, text, colours, link, hide option and bar height. To aid with testing or if you edit an announcement bar you can reset the dismissal to force the bar to show again to all site visitors.

Pop-Up Windows

You can add pop-up windows (also known as modals, lightboxes or overlays) containing a short message, offer or update that will pop-up on the visitor's screen either on a selected page or the first page the visitor remains on for more than 5 seconds.

Pop-ups are created at My Websites > Main > Customise Design > Notifications > Pop-up

  How it works:

• After 5 seconds, we display a pop-up window that is 70% of the height/width of the visitor's browser window
• The area outside the pop-up can be set to your own colour and opacity from My Images > Collection and File Defaults > Gallery Display Settings, Scroll to Settings for "View File" pop up colour and opacity.
• Inside we show the selected webpage, but with header and footer removed
• An "X" appears at top-right of pop-up window
• Clicking "X", or anywhere on the greyed-out area around the pop-up will close the window
• For our built-in contact forms, if you submit the contact form, we display the "Thank you" response and then close the pop-up after 2 seconds. (If your contact form is configured to redirect to another URL, then we'll close the pop-up and the new URL will open in a new window, depending on the visitor browser. As a best practice, avoid having pop-up forms redirect to another URL, and especially avoid redirecting to the HOME page — instead just display a thank-you message and be done.)
• For bespoke forms (i.e. external Mailchimp, Mad Mimi, Constant Contact etc), the visitor will need to click the "X" to close after submitting the form
• Our built-in contact forms will submit within the same pop-up window and then self-close after 2 seconds. All other links and forms will, by default, open in a new browser window/tab. Alternately, you can set an explicit Target=_top on the link to make it open in the original fullscreen browser window hosting the pop-up.
• Visitors can hard refresh (Ctrl+F5) to see dismissed items once more. This can be useful when testing on desktop browsers.
• Pop-up forms should never use "Dismissal: "x" to hide (for that pageview only)" as this will continuously re-display the pop-up form, regardless of any action taken. For testing, it is better to use the Ctrl+F5 technique to trigger the pop-up again.

Video - How to Create a Pop-Up

Video - How to Create a web page for a Pop-Up

Examples of Pop-Up windows

#tx1_barpopup {
                display:none;
                position:fixed;
                top:0;
                left:0;
                width:100vw;
                height:100vh;
                overflow:hidden;
                z-index:2000000940;
                }

#tx1_barpopup>div {
                position:absolute;
                left:15%;
                width:70%;
                top:100px;
                height:70%;
                outline:7px solid;
                box-shadow:0 8px 10px 5px #222222;
                }

#tx1_barpopup>div>iframe {
                width:100%;
                height:100%;
                border:none;
                }

/* this controls the "close" icon in top right */
#tx1_barpopup>div>div {
                width:48px;
                height:48px;
                line-height:48px;
                text-align:center;
                position:absolute;
                top:-48px;
                right:-48px;
                color:#ffffff;
                background-color:#888888;
                cursor:pointer;
                font-family:FontAwesome;
                font-size:32px;
                }
#tx1_barpopup>div>div:before {
                content:"\f00d";
                }

 

<script>tx1_g.barpopup_delay = 500;</script>