Canvas Support

GDPR small - Modal opens each time page loads

3 replies · opened Jun 21, 2021

BburaksansalJun 21, 2021

Hi there,

I copied below code from your gdpr-small.html to my web page, but I replaced Vimeo with Twitter, and removed Dailymotion part as I don't need them. 

<!-- Document Wrapper
============================================= -->
<div id="wrapper" class="clearfix">

	<div class="gdpr-settings gdpr-settings-sm dark">
		<div class="container-fluid">
			<div class="row align-items-center">
				<div class="col-12 mb-5 text-center">
					<p class="lead mb-0">Lorem ipsum....</p>
				</div>
				<div class="col-12 text-center">
					<button class="btn btn-lg btn-outline-warning gdpr-accept">Accept & Close</button><br>
					[Privacy Preferences](#gdpr-preferences)
				</div>
			</div>
		</div>
	</div>

	<!-- GDPR Preferences -->
	<div class="mfp-hide" id="gdpr-preferences">
		<div class="block mx-auto bg-white gdpr-cookie-settings" style="max-width: 800px;">
			<div class="p-5" style="max-height: 400px; overflow-y: scroll; -webkit-overflow-scrolling: touch;">
				<h4 class="mb-3">Privacy Preferences</h4>
				<p class="mb-5">Lorem ipsum....</p>
				<ul class="list-group list-group-flush">
					<li class="list-group-item px-0 py-4">
						<div class="row">
							<div class="col">
								<div class="toggle mb-0">
									<div class="toggle-header">
										<div class="toggle-icon">
											<i class="toggle-closed icon-line-plus"></i>
											<i class="toggle-open icon-line-minus"></i>
										</div>
										<div class="toggle-title">
											Privacy Policy
										</div>
									</div>
									<div class="toggle-content ps-4">
										Lorem ipsum....
									</div>
								</div>
							</div>
							<div class="col-auto text-end">
								<small>**REQUIRED**</small>
							</div>
						</div>
					
					<li class="list-group-item px-0 py-4">
						<div class="row">
							<div class="col">
								<div class="toggle mb-0">
									<div class="toggle-header">
										<div class="toggle-icon">
											<i class="toggle-closed icon-line-plus"></i>
											<i class="toggle-open icon-line-minus"></i>
										</div>
										<div class="toggle-title">
											Content Delivery Network
										</div>
									</div>
									<div class="toggle-content ps-4">
										Lorem ipsum....
									</div>
								</div>
							</div>
							<div class="col-auto text-end">
								<small>**REQUIRED**</small>
							</div>
						</div>
					
					<li class="list-group-item px-0 py-4">
						<div class="row">
							<div class="col">
								<div class="toggle mb-0">
									<div class="toggle-header">
										<div class="toggle-icon">
											<i class="toggle-closed icon-line-plus"></i>
											<i class="toggle-open icon-line-minus"></i>
										</div>
										<div class="toggle-title">
											Youtube
										</div>
									</div>
									<div class="toggle-content ps-4">
										Lorem ipsum....
									</div>
								</div>
							</div>
							<div class="col-auto text-end">
								<div class="switch d-inline-block">
									<input id="switch-toggle-youtube" class="switch-toggle switch-toggle-flat switch-flat-mini" type="checkbox" checked data-cookie-name="canvas-gdpr-youtube">
									<label class="m-0" for="switch-toggle-youtube"></label>
								</div>
							</div>
						</div>
					
					<li class="list-group-item px-0 py-4">
						<div class="row">
							<div class="col">
								<div class="toggle mb-0">
									<div class="toggle-header">
										<div class="toggle-icon">
											<i class="toggle-closed icon-line-plus"></i>
											<i class="toggle-open icon-line-minus"></i>
										</div>
										<div class="toggle-title">
											Twitter
										</div>
									</div>
									<div class="toggle-content ps-4">
										Lorem ipsum....
									</div>
								</div>
							</div>
							<div class="col-auto text-end">
								<div class="switch d-inline-block">
									<input id="switch-toggle-twitter" class="switch-toggle switch-toggle-flat switch-flat-mini" type="checkbox" data-cookie-name="canvas-gdpr-twitter">
									<label class="m-0" for="switch-toggle-twitter"></label>
								</div>
							</div>
						</div>
					
					<li class="list-group-item px-0 py-4">
						<div class="row">
							<div class="col">
								<div class="toggle mb-0">
									<div class="toggle-header">
										<div class="toggle-icon">
											<i class="toggle-closed icon-line-plus"></i>
											<i class="toggle-open icon-line-minus"></i>
										</div>
										<div class="toggle-title">
											Google Ads
										</div>
									</div>
									<div class="toggle-content ps-4">
										Lorem ipsum....
									</div>
								</div>
							</div>
							<div class="col-auto text-end">
								<div class="switch d-inline-block">
									<input id="switch-toggle-googleads" class="switch-toggle switch-toggle-flat switch-flat-mini" type="checkbox" checked data-cookie-name="canvas-gdpr-googleads">
									<label class="m-0" for="switch-toggle-googleads"></label>
								</div>
							</div>
						</div>
					
					<li class="list-group-item px-0 py-4">
						<div class="row">
							<div class="col">
								<div class="toggle mb-0">
									<div class="toggle-header">
										<div class="toggle-icon">
											<i class="toggle-closed icon-line-plus"></i>
											<i class="toggle-open icon-line-minus"></i>
										</div>
										<div class="toggle-title">
											Facebook & Instagram
										</div>
									</div>
									<div class="toggle-content ps-4">
										Lorem ipsum....
									</div>
								</div>
							</div>
							<div class="col-auto text-end">
								<div class="switch d-inline-block">
									<input id="switch-toggle-facebook" class="switch-toggle switch-toggle-flat switch-flat-mini" type="checkbox" data-cookie-name="canvas-gdpr-facebook">
									<label class="m-0" for="switch-toggle-facebook"></label>
								</div>
							</div>
						</div>
					
				
			</div>
			<div class="section text-center p-4 m-0 border-top">
				[Save Preferences](#)<br>
				[Privacy Policy](https://www.allaboutturkey.com/policy.html)
			</div>
		</div>
	</div>

Now I have 3 questions/problems:

  1. In your gdpr-small.html page, at the bottom I don't see <script src="js/plugins.cookie.js"></script>. But in one of the tickets I read that you told to a user to place it, so I did. Now my external java at the bottom looks like this:
    <!-- External JavaScripts
    ============================================= -->
    <script src="js/jquery.js"></script>
    <script src="js/plugins.min.js"></script>
    <script src="js/plugins.cookie.js"></script>

Is this OK?

  1. I simply replaced Vimeo tags with Twitter tags as you can see below. Is this OK or do I have to modify anything in the plugins.cookie.js file or anything else, besides this code here?

                     &lt;li class="list-group-item px-0 py-4"&gt;
                     &lt;div class="row"&gt;
                         &lt;div class="col"&gt;
                             &lt;div class="toggle mb-0"&gt;
                                 &lt;div class="toggle-header"&gt;
                                     &lt;div class="toggle-icon"&gt;
                                         &lt;i class="toggle-closed icon-line-plus"&gt;&lt;/i&gt;
                                         &lt;i class="toggle-open icon-line-minus"&gt;&lt;/i&gt;
                                     &lt;/div&gt;
                                     &lt;div class="toggle-title"&gt;
                                         Twitter
                                     &lt;/div&gt;
                                 &lt;/div&gt;
                                 &lt;div class="toggle-content ps-4"&gt;
                                     Lorem ipsum...
                                 &lt;/div&gt;
                             &lt;/div&gt;
                         &lt;/div&gt;
                         &lt;div class="col-auto text-end"&gt;
                             &lt;div class="switch d-inline-block"&gt;
                                 &lt;input id="switch-toggle-twitter" class="switch-toggle switch-toggle-flat switch-flat-mini" type="checkbox" data-cookie-name="canvas-gdpr-twitter"&gt;
                                 &lt;label class="m-0" for="switch-toggle-twitter"&gt;&lt;/label&gt;
                             &lt;/div&gt;
                         &lt;/div&gt;
                     &lt;/div&gt;

  2. And finally, after clicking "Accept & Close" or "Save preferences", when I reload the page the same gdpr loads on. I want it to be
    gone and not displayed again once the user clicks one of these Accept or Save buttons.

Thanks in advance for your help.

Burak

SSemicolon WebSTAFFJun 22, 2021

Hello,

  1. Adding the js/plugins.cookie.js JS File Linking is not required as this is already available in the js/plugins.min.js File.

  2. This is perfectly fine. No other changes are required.

  3. This should not happen. Please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

BburaksansalJun 22, 2021

Hi,

Thank you for your answer and help.

Regarding issue #3, it's sorted out: I was trying it offline on my computer that's why it didn't work. When I uploaded to the server all went well on live and gdpr message doesn't pop up again once I click Accept & Close.

Thank you very much.

SSemicolon WebSTAFFJun 22, 2021

Glad the issues were resolved. Very Happy to Help! :)

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard