Transcript

00:09 hey so in this video we're going to be
00:10 looking at the basic setup for cookie
00:13 jar so essentially if we look at this
00:15 page we simply have a simple dialog box
00:17 that has an accept and decline button
00:20 now for the purpose of this demo i have
00:21 a clear button as well um so we can go
00:24 ahead and i can say accept as you see
00:26 here what i'm doing here is we are
00:28 loading in some google fonts the reason
00:31 i'm doing that is just so we can quickly
00:32 see
00:33 when cookie jars actually loaded our
00:35 content because a lot of times if we're
00:37 doing analytics or other kind of
00:38 back-end scripts it's hard to really
00:40 know if they're loaded or not visually
00:42 so uh here we're just loading some
00:44 google fonts and applying it to the page
00:46 so that we can quickly see when and when
00:49 not
00:50 it is applied so the first thing we're
00:52 going to do is we're going to add a
00:53 cookie jar stack to the page
00:58 and just while we're here i'm going to
00:59 add a cookie jar content stack to the
01:01 page as well because we're going to need
01:02 both of them for this basic setup
01:05 uh inside cookie jar i'm going to add in
01:07 my fonts
01:09 so here i've added in my fonts now i do
01:12 recommend that you go ahead and turn off
01:15 render in edit mode
01:17 okay inside these settings this will now
01:20 for fonts as you see here what it does
01:21 is it actually loads in that data um for
01:24 better performance inside edit mode i
01:26 definitely recommend we turn that off
01:28 okay i recommend you just always turn
01:30 this off uh it would be just for the
01:32 best
01:33 now in this for the purpose of this
01:35 tutorial we're going to ignore all of
01:36 the classes here okay check out our more
01:39 advanced setup uh where we're going to
01:41 dive into those
01:43 basically now cookie jar has two options
01:46 we have the ability to remember our
01:47 consent across sessions or remember just
01:50 for this session
01:52 and then we have implied consent
01:55 what that means is we default to
01:57 accepting consent and then we allow the
02:00 person to um
02:02 accept or decline after that we'll show
02:04 you an example of that let's go ahead
02:05 and quickly i'm just gonna use some
02:07 default stacks here i'm going to go
02:08 ahead and add a one column
02:10 go ahead and
02:11 add some padding
02:13 add a little bit of round corners
02:16 we're going to add a markdown stack into
02:18 here
02:23 put in some text
02:25 and then in this plus button we have the
02:27 ability to add accept and decline
02:30 options it's going to go ahead and
02:32 actually let's go ahead and add a
22:34 column in there
02:36 we're gonna add a
02:38 um we're gonna do accept here and
02:40 decline here
02:41 and then all i have to do is add in your
02:44 favorite button stack into here so we're
02:45 gonna go
02:46 um
02:48 decline
02:50 and then just for fun let's go ahead and
02:52 change the color of that to let's do red
02:56 and then we're gonna do
02:59 um this is the accept button
03:02 except
03:05 and let's go ahead and change red
03:08 green
03:10 cool so now we have our box our content
03:14 uh and we have our cookie jar in there
03:16 let's go ahead and preview
03:18 so here by default we'll see that the
03:20 font is not loaded
03:22 and if i go ahead and click the accept
03:24 button
03:25 it loads
03:26 now
03:27 since i accepted it's going to remember
03:29 my consent in each can each page load
03:32 after that will just load it by default
03:34 and just for fun i'm going to go ahead
03:36 and we'll do a little bit advanced stuff
03:37 here i'm going to add that clear button
03:38 because it makes it a little bit easier
03:40 to play and demo with stuff so i'm just
03:42 going to add a button here call it clear
03:45 and then what i can do is i'm going to
03:46 go inside this and i'm just going to
03:47 copy the clear class
03:50 okay and then we're going to go into
03:51 this button and paste it into the class
03:53 setting now i have a cookie jar clear
03:55 button so let's go ahead and look at
03:57 that let's clear the consent okay so now
04:00 this says if i were to have a very new
04:02 session and go ahead and hit decline and
04:05 if we'll notice now if i just go ahead
04:07 and out and go back in you'll see that
04:10 it no longer loads it doesn't load our
04:12 optional window our disclaimer anymore
04:14 because i've declined it and it
04:16 remembered that now i did promise that i
04:18 was going to show you what implied
04:20 consent was so on this page let's go
04:22 ahead and click implied consent and
04:24 we're going to preview the page
04:26 and what we'll notice is even though i
04:28 haven't accepted or declined
04:30 that google font is loaded by default
04:33 now if i go ahead and decline then it
04:36 actually is removed from the page and
04:38 you'll see that is no longer there and
04:39 it won't be there on subsequent page
04:41 loads
04:42 but implied consent does load that
04:44 content by default
04:47 one last feature inside the cookiejar
04:49 content stack is the ability to have
04:51 your position so a lot of times what
04:52 we'll see is this consent box is kind of
04:54 pinned to the bottom of the browser
04:57 so if we see here i'm going to go ahead
04:58 and click this bottom
05:00 and if we preview the page
05:02 what we'll see is that the consent box
05:05 is now pinned to the bottom of my
05:07 browser window okay instead of inside
05:09 with my page content this is a very
05:12 common thing that you might want to do
05:13 uh you know with disclaimers of this
05:15 type
05:16 now obviously in this view the declining
05:19 accept buttons are kind of really far
05:20 away apart
05:21 you have the full ability to do whatever
05:24 layout you want for example here's an
05:26 example of a really interesting layout
05:29 that you could potentially build i
05:31 review this sort of layout in our
05:33 multi-facet
05:35 privacy video
05:36 but you can go ahead and see just how
05:38 you can make this custom and different
05:40 not just a paragraph of text with two
05:42 buttons right really go ahead and make
05:44 the design your own
05:52 "}]