Site Link pre-notification dialogue technique

Good afternoon.
I was looking at a website that when a link is clicked it gives a warning that “You are being directed to an external site”.

This seems an ideal feature to have regarding EU GDPR and other potential regulations.

Is there a way to have such a link warning such as this along with the option to continue?

I’ve attached the screen-shot of this mentioned link message.

Any ideas welcome. Thank you

Simple enough to do. Just give a specific class name to any links leading to an external site, and use JavaScript to apply an event handler to those links with that class that will display a modal with two buttons, one for “go ahead” and one for “changed my mind”.

V/r,

^ _ ^

PS Easier to do if you are using a library like jQuery, but not impossible to do in vanilla JS.

1 Like

I appreciate your help with this WolfShad.

My knowledge is quite basic, and my websites use templates - so I am at a loss on the details to achieve what you mentioned.

I checked the js folder and there are a 13 scripts that have the jquery titles, for example: jquery.min.js - I am not sure whether these 13 scripts are the ones to achieve what you explained.

Is there any step by step instructions you are aware of on the internet that I could use? I am not sure how to search this subject or how to phrase this question in Google.

Any direction you can give will be most helpful, thank you

I’ll see what I can do. If you are using jQuery, then the file you mentioned (jquery.min.js) is jQuery itself, and the biggest component. I’m going to assume that the others are things like jquery-ui and whatnot.

Before I begin explaining anything, please let me know all of the jQuery related files that are being referenced in <script src="whatever"></script> tags (presumably in the header, but could also be located in a footer.)

V/r,

^ _ ^

1 Like

Thank you for your reply WolfShade, much appreciated.
As you mentioned:

The jQuery files in the js Folder are:
jquery-migrate.min.js
jquery-ui.min.js
jquery.backstretch.min.js
jquery.countdown.js
jquery.countdown.min.js
jquery.counterup.min.js
jquery.easing.1.3.min.js
jquery.flexslider-min.js
jquery.imagesloaded.min.js
jquery.isotope.min.js
jquery.magnific-popup.min.js
jquery.masonry.min.js
jquery.mb.YTPlayer.min.js
jquery.metisMenu.js
jquery.min.js
jquery.stellar.min.js
jquery.sticky.js

Headers are only ccs links.

Footers

 <script src="js/jquery.min.js"></script>
    <!--bootstrap js plugin-->
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!--easing plugin for smooth scroll-->
    <script src="js/jquery.easing.1.3.min.js" type="text/javascript"></script>
    <!--sticky header-->
    <script type="text/javascript" src="js/jquery.sticky.js"></script>
    <!--flex slider plugin-->
    <script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
    <!--parallax background plugin-->
    <script src="js/jquery.stellar.min.js" type="text/javascript"></script>
    <!--digit countdown plugin-->
    <script src="js/waypoints.min.js"></script>
    <!--digit countdown plugin-->
    <script src="js/jquery.counterup.min.js" type="text/javascript"></script>
    <!--on scroll animation-->
    <script src="js/wow.min.js" type="text/javascript"></script>
    <!--owl carousel slider-->
    <script src="owl-carousel/owl.carousel.min.js" type="text/javascript"></script>
    <!--popup js-->
    <script src="js/jquery.magnific-popup.min.js" type="text/javascript"></script>
    <!--customizable plugin edit according to your needs-->
    <script src="js/custom.js" type="text/javascript"></script>
    <!--revolution slider extentions-->
    <script type="text/javascript" src="revolution/js/jquery.themepunch.revolution.min.js"></script>
    <script type="text/javascript" src="revolution/js/jquery.themepunch.tools.min.js"></script>
    <!--revolution slider extentions-->
    <script type="text/javascript" src="revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
    <script type="text/javascript" src="revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
    <script type="text/javascript" src="revolution/js/extensions/revolution.extension.navigation.min.js"></script>
    <script type="text/javascript" src="revolution/js/extensions/revolution.extension.parallax.min.js"></script>
    <script type="text/javascript" src="revolution/js/extensions/revolution.extension.video.min.js"></script>
    <script type="text/javascript" src="revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
    <script type="text/javascript">
            var tpj = jQuery;
            var revapi4;
            tpj(document).ready(function () {
                if (tpj("#rev_slider_4_1").revolution == undefined) {
                    revslider_showDoubleJqueryError("#rev_slider_4_1");
                } else {
                    revapi4 = tpj("#rev_slider_4_1").show().revolution({
                        sliderType: "standard",
                        jsFileLocation: "../../revolution/js/",
                        sliderLayout: "fullwidth",
                        dottedOverlay: "none",
                        delay: 9000,
                        navigation: {
                            keyboardNavigation: "off",
                            keyboard_direction: "horizontal",
                            mouseScrollNavigation: "off",
                            onHoverStop: "off",
                            touch: {
                                touchenabled: "on",
                                swipe_threshold: 75,
                                swipe_min_touches: 1,
                                swipe_direction: "horizontal",
                                drag_block_vertical: false
                            }
                            ,
                            arrows: {
                                style: "zeus",
                                enable: true,
                                hide_onmobile: true,
                                hide_under: 600,
                                hide_onleave: true,
                                hide_delay: 200,
                                hide_delay_mobile: 1200,
                                tmp: '<div class="tp-title-wrap">  	<div class="tp-arr-imgholder"></div> </div>',
                                left: {
                                    h_align: "left",
                                    v_align: "center",
                                    h_offset: 30,
                                    v_offset: 0
                                },
                                right: {
                                    h_align: "right",
                                    v_align: "center",
                                    h_offset: 30,
                                    v_offset: 0
                                }
                            }
                            ,
                            bullets: {
                                enable: true,
                                hide_onmobile: true,
                                hide_under: 600,
                                style: "metis",
                                hide_onleave: true,
                                hide_delay: 200,
                                hide_delay_mobile: 1200,
                                direction: "horizontal",
                                h_align: "center",
                                v_align: "bottom",
                                h_offset: 0,
                                v_offset: 30,
                                space: 5,
                                tmp: '<span class="tp-bullet-img-wrap">  <span class="tp-bullet-image"></span></span><span class="tp-bullet-title">{{title}}</span>'
                            }
                        },
                        viewPort: {
                            enable: true,
                            outof: "pause",
                            visible_area: "80%"
                        },
                        responsiveLevels: [1240, 1024, 778, 480],
                        gridwidth: [1240, 1024, 778, 480],
                        gridheight: [600, 600, 500, 400],
                        lazyType: "none",
                        parallax: {
                            type: "mouse",
                            origo: "slidercenter",
                            speed: 2000,
                            levels: [2, 3, 4, 5, 6, 7, 12, 16, 10, 50],
                        },
                        shadow: 0,
                        spinner: "off",
                        stopLoop: "off",
                        stopAfterLoops: -1,
                        stopAtSlide: -1,
                        shuffle: "off",
                        autoHeight: "off",
                        hideThumbsOnMobile: "off",
                        hideSliderAtLimit: 0,
                        hideCaptionAtLimit: 0,
                        hideAllCaptionAtLilmit: 0,
                        debugMode: false,
                        fallbacks: {
                            simplifyAll: "off",
                            nextSlideOnWindowFocus: "off",
                            disableFocusListener: false,
                        }
                    });
                }
            });	/*ready*/
        </script>

I tried search on the internet for a solution, but couldn’t find the correct wording to find a suitable result, every question I posted for example: “code for permission to access external links” or “Website external Link accept or deny code” etc., all came back with completely unrelated links or links that didn’t address this specific issue.

Any advice would be helpful as I am unsure what to call these dropdown Accept/Deny option before accessing the clicked link.

Basically, I don’t have any cookies, but due to these external links to social media etc. the cookie check shows a number of non-functional cookies. So I wanted to give a warning that certain links, not all, that lead to external sites that could add cookies.

Thank you for the help with this.

Hi, sredhead,

First thing I noticed is that DAYUM you have a lot of .js files loading. Are you absolutely sure you need all of them? That’s adding a lot of bulk to your site/app. If there is anything you are not using on every page, you may want to consider some kind of conditional to load only the .js files you need for any specific page.

There are people who like to load jQuery and related files at the top of the page. You are loading them locally, which is the way I prefer (not a fan of CDNs). If you were loading via CDN, you would want them all to load just before the closing </html> tag.

So, the first thing that I would Google is “jquery modal” which is, I believe, what you are looking for. An overlay to the site/app that blocks everything behind it and focuses the user on one thing - the information and links to either continue or cancel. Basically it involves creating a hidden <div> on the page (it can go anywhere, I prefer at the bottom) that will remain hidden until an external link is clicked - then it un-hides and offers the user the choice. Click one button, the external page loads; click the other and the modal just hides itself, again, and you have to event.preventDefault() the link so it does not continue.

But, honestly, you’re already loading a lot of libraries and don’t need to add another (seriously) and to do a modal or dialogue would require at least one more library; either jquery-ui.js or jquerymodal.js.

I hate to say it, but you may want to consider starting from scratch and not trying to load everything and the kitchen sink into this. You’re trying to fit ten pounds of content into a five pound bucket. This typically results in a very bloated experience for the user.

V/r,

^ _ ^

1 Like

There is a new html5 dialog element that can be set to modal. It is not widely supported yet but I believe that there is a shim which will rectify that. It is at least worth considering.

3 Likes

Thank you WolfShade, much appreciated.

Basically, my knowledge is very limited, so I just kept everything that was in the template folders, not actually knowing what is actually necessary and what isn’t. My assumption was that all the files are necessary, but I now understand that obviously may not be in fact an accurate understanding.

Thank you for the google search recommendation, I will check that out try to see what it is. Also, thank you for all the feedback.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.