GNA go ahead and get started here let's see welcome in everybody Welcome Ken Janessa I see Shannon kier's here Matt Jeff sanket Stephanie hello van hello aen hey everyone welcome it looks like it's late over there for you been huh uh yeah I'm in ltia on holiday at the moment so it's uh 900 PM now and I'm sitting out in the balcony avoiding mosquitoes drinking a beer nice um my internet connection is a bit slow because I'm on the Wi-Fi out here it's it's actually really slow anyway but uh so I'm going to not have video on if you don't mind of course yeah yeah how you Brian great how are you do hey quick question for you do you ever write code while you're drinking beer I'm not a coder Bri I tried to say that to you a number of times even and I challenge when you say things to me I'll just do that and I go what Brian I can hardly write English when I'm drinking beer never mind right code yeah oh that that's some good code this is this is a story we need to talk about yeah Brian and I Tic Tac backwards and forwards on various various things amazing well welcome in everybody we're gonna go ahead and get started here um super excited to have Brian today um for anyone who doesn't know uh my name is Grant I'm the community engagement manager here with cartra we also or cartra Grant and then we also have Kira here who is cartra Kira um and we're super excited to be able to put on these events though from novice to ninja um really the purpose is to to help us all learn um to different skills right there's so many amazing experts in the community and we have um cartra certified Partners like Brian here who have been with carer for a long time um and can offer their unique skills um and expertise to you guys so we're super excited um and just to kind of give you guys a brief introduction to who Brian is um Brian katson he was born and raised in California's San Francisco Bay area but now living in suburban Chicago he has been pursuing his passion of helping people leverage computers and other information technology since 1974 uh re-energized by the growth of the internet around the turn of the century Brian became interested in topics like internet marketing and cloud computing and how to help others really leverage those Technologies um with the increasing digital world he actually began exploring cartra in 2019 and quickly became enamored with its feature set especially the extensibility Via custom code and browser extensions which I can attest who Brian is a expert at um and so Brian is one of our cartra certified technical experts um he's a frequent contributor to the cartra community and he's also the author of kcg SG tools for cartra which is a Google Chrome browser plug-in to help cartra content authors work more efficiently um also he's an author of the kcsg cartra pages which is a cartra tuned WordPress plug-in for embedding cartra pages as well as several other cure related tools his website is available through his Facebook profile um and he is going to be sharing or just shared um a link to his membership which has some information that you guys uh might be interested in uh to go along with this presentation so we're super excited to have you Brian thank you so much for being here um and without further Ado I will let you take it away thank you grant my my pleasure thank you for having me here um I really appreciate the opportunity as I was uh telling Grant before we get get started um I've got my obligatory cartra hat but I'm not typically a hat wearer so just to avoid being um quite so distracting in the presentation I'm gonna gonna go without for now um so yeah I posted H thank you shanon for that for the comment um I posted the link um to the membership portal um that I used to create my presentation so you can follow along and see all the resources and stuff um uh just by by clicking on that link um and it's a it I thought what better way to demonstrate custom code um than to to Really showcase cartra um and and use cartra resources so let's see I guess I need to share first can everyone um see my screen okay yeah looks great okay uh let me um Misty just commented let me repost the link here I could do that for you Brian sure okay so um uh as I was saying I I felt that um uh a membership was a great way to um showcase um cartter custom code I'm getting a little bit ahead of myself here you'll see some customizations in the membership that's going to be the um the the focus of the next presentation uh because this one is based primarily on the page builder there's some um General content kind of a preamble stuff um but this will focus mostly on um page builder customizations and then we'll do another one part two will be on the memberships um a lot of this is based on screenshots um so that I can move through the content a little bit faster um we're going to do two um we're going to split it up into two Q&A sections um because I have information about that's kind of the nuts and bolts of Uh custom code and then I have some examples showing some real world uh copy and paste type examples that you can use um these are based on uh things that I've seen frequently come up in the in the group um so hopefully some of these will be uh your favorite items too um but if during the question and answer you want to go see more information about what the actual page builder page looks like um then we can do that in the Q&A session um as I was also telling Grant um I I have technical skills I do not have very good graph design skills so I apologize in advance for the the kind of um black on white text and and not very elegant presentation um when I need things to look good I partner with other people so something for everyone to keep in mind okay so let's let's jump into the content here okay first of all the the what why and where um one of the things that I really love about cartra um it it makes me so happy in addition to um all of the wonderful features that come natively in cartra is the ability to add custom code to unlock so many more possibilities and I think of custom code as being a little bit like being able to ask the genie after your after you get your first two wishes you can say hey I'd like a few more wishes and cartra lets you do that through custom code so it's not a cure all but cartri can do a lot of stuff um through custom code that it can't do out of the box and to help understand um the kind of the foundation for how this works um I'm going to do a little bit of background web pages can generally be divided into three functional Parts there are lots of ways to break it up but uh for the purposes of the presentation um the first part is HTML which stands for hyper markup language and this is how web pages describe the content of the page so this is things like um the paragraphs of text the headings the images uh the audio and video embeds Etc so the HTML is for the content part of the page you can change how that looks using either element Styles or cascading style sheets and that's information that tells the browser how the um how the page should look so that's for things like colors backgrounds um you can do some things like transitions so the the styles are about how the content should look and then the the JavaScript which is kind of my personal favorite out of the three because I love coding um this is executable code that allows pages to be interactive or have some sort of smart aspect to them like if you want a form to uh if you want to have the submit button be disabled until uh the inputs are validated or something like that JavaScript can be used to do that to um to add Behavior to the page so from a highlevel perspective and I'll be breaking this down into like subcategories but from a general perspective carer will accept custom code in two places one is in the Page Builder and the other place is in memberships so they'll there'll be multiple places within the page builder but but at the high level that's where you can um add custom code so uh once again part one will be covering the Page Builder and then when we schedule part two I'll be talking about customizations for memberships um just just some notes um custom HTML can be added to email broadcasts and sequences um but what you can do is fairly limited nothing like you can do for the page builder or memberships um CSS and JavaScript tags can't be added to emails um they get stripped out by cartra um and they wouldn't generally be uh processed by most email systems anyway um there's a a class of assets in cartra uh somewhat confusingly called cartra host assets because all of your assets are hosted by cartra um but if you see um something like uh cartra hosted checkout like some of the options when you're configuring like a checkout page um you can in the in the product configuration you can get a link and it will say this is the link for the cartra host to check out and what that means is it's is it's a stand by cartra and those templates don't include a spot for you to add custom code so if an asset is build as cartra hosted um you can't um add customization there although for some of those assets like the checkouts for example um you can embed those in a page and depending on the type of asset um and I'll get into that more shortly um you may be able to um embed that on a page builder page and then for some assets you can have custom code on the page that will reach in and customize um or modify um that that embedded content so uh you can do some things with checkouts just not with a Carter hosted checkout um and just for clarity uh in case some people are wondering um you can't run your own code on cartrid servers uh except for things standard things like one moment please let me uh forgot to go on on silent here um you can run uh automations and sequences on cartrid servers but you can't run General code in the sense of for example running a a WordPress plugin that's that you can't do um although it is possible to um embed content from other platforms such as WordPress um in cartter pages but that's a discussion for another day um one of the things that I've seen in working with clients um oftentimes people will keep notes um in like Microsoft Office or Pages or something like that where they'll copy the code um into a word processor uh to keep track of their notes uh so they can have the the code code there and any notes they want to add and just to try to keep everything together the problem with that is word processing tools um try to make the text look pretty and um what they tend to do is take um single and double quotes um which are non-directional um like in a if you just look at a standard keyboard the single and double quotes they're not open and close quotes they're just non-direct unfortunately when you put them in a word processor it likes to turn them into open quotes so they'll face one way at the at the beginning of the text and the opposite direction at the end of the text um unfortunately that turns the code uh into a syntax error and makes it not executable so um what I recommend is if you're going to copy and paste code um make sure you're using um something that's more like a text editor than a word processor something like notepad um in Windows or text edit in on Mac OS um as I referenced um slightly before um uh an iframe is uh short for an inline frame and it's a one of the most common ways um to embed content um from one page into another uh one of of the things that impacts Uh custom code is What's called the origin um so in a URL um the origin is um basically the host name and the protocol um and if you have a port number as part of it that's part of the origin as well for security reasons the browser will not let you um access uh different parts of the page that come from different Origins so for example um a cartra survey or the audio player um is served from app.
Cartra so ap. cart.com and so there's no way for custom code to modify um either of those items because the page builder or membership domain would either be your cartra account like mine is kcsg.com um or it would be your custom domain um like for example K power tools is one of my custom domains um so that's that's one of the restrictions you should know if you're going to um go into a project on um creating custom codes some some stuff is accessible and some stuff isn't okay so let's talk about the different places where we can put custom code for pages so uh one of the most common places is to use the uh the tracking code sections in the page settings so in the page builder if you go to um this the settings navigation and then open tracking code um it'll open the tracking code area and there are input boxes uh for the head section of a page so just quickly um an HTML page is broken down into a a head section which is where uh basically meta information gets stored like the title um if you have SEO keywords and such you can put that in there um CSS stylesheets uh for fonts and such can be um set up there uh script loading can happen there so that's that's where most of the nonvisible parts of the page get put is in the head section conversely the body is the rest of the document um and for the most part that's where the visible content will get stored you can put additional meta uh information into the body as well um but most of the body is the visible content so typically um to to go back to my example of breaking it down the CSS and the JavaScript would typically go in the head in the HTML would go in the body um just a a comment because one of the um the most common issues when adding custom code to these sections is confusion about what type of go code can go in each kind of box um so this uh hopefully you've you've noticed that for the head section box um there's this little label that says only JavaScript um so if you see something that's got a lot of um open and close brackets these are HTML tags um so if it says something like script or div or P for a paragraph um if you're seeing a bunch of those that means the code is HTML and you cannot put HTML um with the exception of the the closing script tag you cannot put HTML in here um basically what happens is cartra um wraps some HTML around the code that you put in this box saying here comes JavaScript so um when cartr says here comes JavaScript if you put HTML in there um it's not valid JavaScript so the um the the JavaScript interpreter inside the browser starts to get confused and can lose its place and things that are supposed to happen in terms of setup for your page um will will fail and um it can cause uh content potentially to um break out of your uh startup section into your page or cause um init initialization to not happen correctly and and have things later in your page fail um so it's really important to make sure um that you don't have have HTML in there that is purely JavaScript um there there is one caveat to that and that is um and and sometimes you need to have HTML in here occasionally um for Instagram and things like that you'll need to put um an HTML meta tag into the head section so the the workaround for that is you put in this um this is when there's a slash there it's called a closing tag so this is an opening tag and this is a closing tag because this is closing because it has a slash this doesn't so you can put a closing script tag and this will um this basically will match the hidden opening script tag that's supplied by cartra so this says Exit the JavaScript and go back to HTML mode so then you can put HTML in here like your meta tag and then below this box cartra has is including a closing script tag so you need to balance that by reopening the script tag so we're basically going from JavaScript started by cartra um to H HTML as indicated by us going back to JavaScript and then finishing the JavaScript by the closing tags supplied by cartra um in for these other boxes um although it says it will take HTML or JavaScript that's not technically correct it only takes HTML it does not accept JavaScript unless you put the JavaScript in HTML so again it's this the same script tag um this tag as you can see it's got the angle bracket so that's your tip off that it's an HTML tag so here's the HTML tag that says here comes JavaScript so here if we want to have JavaScript in this section we can put it in between the open script tag and the closed script tag but this this does have to be HTML if you just put the raw JavaScript without saying here comes JavaScript um it that code is um could potentially leak out to your page um depending on what content you have in there um and it's definitely not going to run correctly um so in terms of where your custom code um in these tracking code sections will get applied the custom code in the tracking sections um isn't applied in the page builder it's it's applied when the page is assembled by cartra um to be used in the preview and live versions of the page so um uh typically content placed in the tracking section will be hidden um unless the the code is really broken or you take active steps to make it display um although if you have um a code that executes um in one of these sections so for example um and I I'll have a a case that's like this um in one of the examples but you can have code that um that runs here that triggers some content to be displayed for example in a custom code section and we'll see an example of that in fact the first one I believe so um even though the content doesn't typically show up here it can cause content to show up elsewhere so that that will still happen that part would not be hidden um if you need to display custom HTML consent so that's going back to the structure the paragraphs the text and so forth um you would typically put that part or at least that part in a custom codee block um and I'll get to more details about custom code blocks and custom code sections on the next slide um but if you need something to display uh typically part of it will be put in a custom code block um but as we'll see in the um the first example sometimes you want to split the custom code um into the JavaScript and put the JavaScript um in the tracking section um put the custom Styles in the page custom style section and then put the remaining HTML structural piece into a custom code block um the other place you can put in custom content is through the Styles setting so if you go to the Styles navigation and go to the custom Styles tab cartra brings up a CSS stylesheet um editor and you can U paste your um your custom Styles in there um oh I forgot to mention um when you uh make a change in here don't forget to apply um to to make these changes apply to the page um because if you just type something up here and close this dialogue out um it will not update the code on the page um you'll also want to make sure that you do a save progress um or a publish live um to make sure that once these changes have been applied to a page those changes then get saved back to the cartri server so to reiterate it's two separate steps um this apply makes sure these changes get to the the page as you're working on it and then um say progress or publish live to make sure the the whole page all the content including anything you changed here get saved back to cartra for the previewer or live uh similarly I'm not shown here but there's an apply button um for the CSS Styles um same deal you'll need to do that step first to get the style changes to apply to the to the working U page builder page um and then uh save progress or publish live to make sure those changes get permanently saved in cartra um unlike the uh the custom code sections um from the tracking uh the tracking settings areas the custom CSS you apply here um is going to be live and active in the page builder as well as on your uh preview and live content um so sometimes you need to be a little careful like if you are um trying to squeeze out uh some particular uh content of the code um you may want that to apply only in the preview and live so that for example the hover tools for editing um don't get obscured by something that's really close to what you were working on so sometimes you want to have uh custom CSS rules that apply only in preview or live um or occasionally it'll come up where you only want it to apply in the page builder um so I'm not going to get into it too deeply here but um this note has some uh selector prefixes code that you can put in front of your CSS selectors so that only applies in one of those two contexts um each each section in a cartra page builder page has um a unique uh selector assigned to it a section ID it's just a sequence of random uh letters and numbers um you can put a pound sign in front of that uh section ID if you want to make custom CSS apply to only one section um but because the structure of the page is different in the page builder than it is in preview and live um any rules that you set up that you want to have specific to uh those sections uh only works in the preview and live um because the structure is different that rule won't match in the page builder so if you have styles like that um don't don't be surprised when uh you don't see your style applied in the page builder okay um in terms of um copying your custom code to other Pages um in case you're not familiar with it the uh the sites feature in the um upper leftand corner of the page builder navigation um lets you copy uh various parts of your your page uh such as custom code or custom Styles things like headers and Footers um can be copied to related pages in a site so you can make a change on one page and then when you come into the sites feature um the import from site tab is very similar to this it just controls the direction of the copy for export to site um it will copy whichever sections um you have turned on with these sliders to other pages in the site um you can either say I want it to be copied to all the pages in the site or you can click on this drop- down and select specific Pages um so the the two that would be relevant here excuse me would be custom Styles or tracking codes uh the thing to be aware of is that um if I if a page that you're copying to has its own custom Styles or tracking codes um it if you will let the sites feature um copy that to that page the content that was there will be overwritten and replaced so if you have any um page specific content already there you need to be super careful when using the the sites feature to make sure you're not wiping out essential code on another page but um in in other contexts um this is extremely helpful tool for um propagating your changes quickly to a number of pages in the site um the the site is defined um either by the site that you assign when you create the page or you can um there's a in the uh page builder Pages list um you can uh add and remove pages from sites there as well okay so the next way to add custom code is to use the your code Tool uh from the page builder navigation and it will bring up it doesn't say custom code section again custom code component that is my um annotation so you'll just see these um these two images so this this first one the wider one is a custom code section and the smaller one is a custom code component so just like a regular section um this will be its own section in in the page builder so as you're going from top to bottom and you see the different sections this type of your code block will be a completely separate section um when you um when you go to the right hand side of the page builder you'll see the the section tools will um come out from the right hand side um for this this incorporates the custom code block as a component within an existing uh row and section so if you want to have full control of the section you can use this type if it just needs to be like something that's embedded with other content then you probably want the component um so and is quite important um if you unlike the tracking sections where if you put uh JavaScript code in one of the tracking sections because it doesn't get injected into the page until the previewer live it it does not run in the page builder in contrast these custom code blocks are live from the moment that you you put them in so if you have JavaScript code in there um the CSS would generally be fairly innocuous unless the unless the custom Styles you put in um affect the controls of the page builder but CSS is generally an uous HTML is fairly safe but the JavaScript will execute so if the JavaScript is a code that modifies the structure of the page it will modify the structure of the page within the Builder um and the modifications that it makes to the page will be what gets saved if you do save progress or publish live and that's usually not what you want usually you want that code not to execute until the um the preview or live stage um so the the exact code that you would need um most most copy and paste code doesn't doesn't deal with that aspect so that's something that you need to be aware of um when you're copying and pasting um resupplied code is it going to be safe to put as is um into the custom code area um I I don't want to get into the the full code but for those of you who are um JavaScript Savvy um you can test for the context you can um the easiest way to determine whether the code is running in the Builder or running in preview or live is to look at the location.
Hostname variable um and test it if it's equal to app. cart.com um if that is equal then the code is running in the page builder if it's false then it's running in preview or live um when you're using custom code blocks make sure you have um cra's uh boilerplate uh div data embed equals true um at the beginning and the matching closing tag again where the slash u mean it's the matching closing tag so this tells cartra that you're embedding custom code and not to try to process um information that might be embedded um in your code as a something that is a signal to cartra um unless you make other arrangements custom code blocks um will even if you don't have any HTML that you would expect to be visible the stand styling um that cartrid supplies um generally defaults to having some padding at the top and bottom um and there may be a minimum height setting as well just to make sure that you can access the hover tools in the page builder is usually a minimum height setting that says um just so that I can retain access to this make sure that it it doesn't Express as any shorter than like 100 um pixels or so so um if you have code that you don't want if you have a custom code section that you do not want to appear in preview and live um you'll have to make your own arrangements to make sure that section is hidden um the the custom code editor um adds an extra div wrapper layer around the custom code every time you open the editor and save it um save the custom code it'll add a new a new wrap around it um you can feel free to remove those extra layers of wrapper um as long as you remove the the matching set of tags so you would have to remove like if there are three extra layers you'd have to remove the first three opening Dives and the last three closing Dives which will be at the end of the um at the end of the custom code okay one one more section then we'll take a break for um question and answer um so uh this is this is kind of the advanced uh options here um so with the possible exceptions of determining section IDs um so there's a there's a technique in here for determining um the section IDs so if you want to make um if you have uh for example copy and paste custom Styles um like to change fonts or something and you only want it to apply in a certain section um you can add a pound sign in the section ID as a prefix to the the selector that says where the style should apply and that would make it apply only to the specific section um these tools are also handy for examining the console for errors um so if your page is blowing up and you know some action isn't happening or um something is displaying oddly um it's often helpful to come to the console and see if there are errors that can be a hugely helpful uh diagnostic tool um occasionally um I have um copy and paste JavaScript Snippets um that can help fix broken things so on occasion I've said here open the console and paste this in and this will go fix your page um but other than that you probably want to avoid most of these techniques um if you're not uh code code comfortable um so one option is uh cart built-in section editor so when you go to the middle of a section um and you hover your mouse over the section um you'll see this gear icon the the extra tools may or may not already be open if they're not showing just click on the gear icon and you'll see these other options if you click it again they'll hide away out of sight um the the built-in source code editor is uh this icon here so when you click on that it will open the source code editor which will look something like this and believe it or not um this is the cartra htl markup for these two buttons um not not the most friendly but if you have good instructions um that tell you where to look um that is a way if you need to uh for example add a class um a CSS class to one of the HTML items um so that you can assign specific behavior to that content um a similar uh tool but one that's built into Chrome is the developer tools there are a couple of ways to get to that one is from the triple dot menu go down to more tools click on that and then open the developer tools um the Chrome developer tools um can be either docked or undocked um docked meaning that the developer tools and we'll see an example down here in a minute can either be stuck to um the left bottom or right sides of your main window your content window or you can have it be undocked these these U what looks like a a copy icon um is is undocked Windows so in this format the um the developer tools are in a separate window so you can either have them uh either have the developer tools window over your your uh main content window or you can just move it off to the side to have a clearer View and have the original content at the normal size um so here's what the developer tools look like um there are a bunch of different views the the one that you'll typically uh see on opening is the elements view it shows the HTML of the page um this part down here is called the console tray because it shows console messages um you can you can go to just the console and see only the console if you go to the console tab but frequently it's helpful to see um both what's happening to the HTML content the elements and the console at the same time so when you're in the elements tab you can press the Escape key on the keyboard and this console tray will appear and disappear um also helpful um is the computed Styles tab over here in this um pane that's on the right hand side um this will show you it's it's obscured here I have the context menu um for editing HTML but this will show you um the computed Style just means this is um showing the end result so a cascading stylesheet can be a bunch of potentially overlapping rules and there's a system that determines um who the final winner in conflicting rules will be um so the computed style summary um basically for whatever the current element is it tells you which style rules um basically one the race which which one had the highest priority and and ended up being applied um so this can be handy if you're applying custom Styles and they seem to be being ignored um you can get some insight in here um into uh who whose rule um trumps your rule and where it came from um more advanced stuff um if you uh rightclick or I think it's a control click on Mac um on a on HTML over here um it will bring up this menu um you can either add or edit an attribute in a in a tag um so an attribute would be something like a a list of classes like here you can see it says class equals cartra button 11 um so these classes allow uh code to apply Behavior to specific types and a is the um the HTML tag for a hypertext link um or anchor is the term that was originally used um so let by assigning classes we can say we want to do something only with anchors that have a class that includes cartra button 11 so sometimes it's necessary to add something like that um for example um I have an example for creating horizontal forms um if you want to mix vertical and horizontal forms um on a page you need to have some way to tell the styling that um I want only to apply to horizontal forms and not vertical forms and so the way that gets done is by adding one of these classes um to one of the the form tags so you would you could use code like this for that um so if you if you were to click on the edit as HTML um it opens a miniature editor you can hopefully see this um slight gray box around the code so in this case I opened it on this anchor tag so it show sh me the code I could modify this anchor tag and then any anytime I click out um anywhere outside of this box um it will commit my changes to the code and go back to showing this view um so as I mentioned uh at the top of this uh section um one way to come and find out what the uh section ID will be for any of the page sections is to go to like you would go um let's let's just say um obviously I'm in the the membership right now but let's say that this image was a a page builder section so if you just go to the start of the content um for the section which will usually just be uh like the upper left corner in the blank space um in the in the margin um in typically um HTML content um renders from left to right and then and top to bottom so if you if you write or control click um in the first space that constitutes the content for your section um that will generally provide you uh the point in the HTML code that is closest to the start of the section um if you do that and you scroll up look for a tag that's called an iframe in the page builder each section is edited within an iframe um if you scroll back to the iframe tag um it won't necessarily be highlighted like this it's it's gray because I clicked on it and then changed the focus but where it says ID equals and then between quotes it's got this underscore and a bunch of characters the underscore and that group of characters is the section ID that will be assigned to the section um in the in the page builder when the page is in preview or live Okay so um I know I've covered a ton of ground and gotten technical um quite a bit here so hopefully I haven't uh completely lost too many people let's um before we jump into the examples uh let's take a break and see if there are any um questions on what I've gone over so far Brian you're an insane person this is so awesome so much so smart um for me it's a little above my head so I'm I'm appreciative of you so much we have one question Debbie star and you may have addressed a little bit about this but she asks for page load times does it matter which you use HTML or JavaScript um both both can be fast um typically there's um so JavaScript has to be um interpreted by um the JavaScript interpreter in the in the browser when loads so well conversely the HTML has to be processed by um the HTML parser when the page loads but that there's there's an extra step um when you have JavaScript so the JavaScript has to be um interpreted by the browser and then it has to be executed um so there's there's an extra step so it's slightly more efficient um to use HTML than to use um JavaScript that would create the equivalent HTML um but usually um unless someone's using um a really old computer um from last century um it in most cases um it's probably unless the JavaScript is coded really poorly it's probably not going to be end up being noticeable to the user and there are lots of times when um you want your your code to be interactive or smart in some way like I was mentioning before the example um and you can you can see an example um in the resources section in the connect with Brian um I have an I have an opin form there um and I demonstrate um using email validation so there's an email entry field and there's a confirm email address field and so there's some JavaScript that that runs there and it prevents the form from being submitted if the confirm email address value doesn't match the the first email value so there's a you know kind of a typo check there so you can't do that with just pure HTML that requires JavaScript that contains the logic to do that so um kind of a long-winded answer but I I hope that answers the question awesome thank you yeah Debbie did that answer and you guys feel free to if you wanted to take off the mute and ask if not let's see V has a good comment he says and a question I use Chrome inspect and in some of the videos screenshots you can show the uh the div containers across the horizontal bar how do we enable this I can never make it appear in Chrome um I'm not quite following um unless you unless you're referring to um like the bar that shows the nesting um I guess I better hi Brian I'll jump in sure yeah some some of the yeah you know I follow your stuff so some of the uh screenshots you've shown and in in your videos the if you if you right click and do the inspect tool if you're in Google Chrome yeah um okay hold on I need to zoom out I'm on 300% do you mean this thing this part yeah let me zoom out actually sorry I need to zoom in a little bit um across the top where you've got elements console Etc oh yes sorry sorry where you are no sorry where you are to the right of console in some of the videos you can see the divs and you can click on the divs and it'll bring you directly to them yes right yeah so this is this is essentially the breadcrumbs for where you are so um like here's here's the body tag I was telling you about so these these other tags um these are called child um elements of this so uh this header this div this footer are all child elements of the body so as you as you open these up and you go um into different pieces um this is showing the bread crumbs for for where I am okay I see looking for a shortcut I thought you had the sneaky trick yeah yeah so like if you um if you if you're down um I don't think I have any eye frames on this page but um if you are if you're down in an i if you're trying to find the um the iframe the ID on the iframe tag so you can get it for your section ID you can um navigate back and forth until you find the one that's iframe and then you could click on that and if this was an iframe tag then you'd see iframe ID equals and then it would have the section ID yeah yeah now now that makes perfect sense now I just thought there was a setting that I just couldn't find that Brian had in his toolkit thank you thank you all good now okay great awesome thank you van always a pleasure um Ken Mark asks you discussed putting code in the head and body uh what about the footer what code is designed for the footer um so technically the um the so there there are two potential potentially different places that could could be considered the footer um one is just a um something that's at the bottom of the the body tag um well let me let me reopen up again here um so uh there's a lot of code in here but um so so stuff that you put in the head tracking section will go up here with with a meta information um so there's a there's a meta tag title a bunch of stuff so if you put it in the the header tracking section it'll go in there um the the footer well the actually all the O all three other sections um uh body uh footer and Facebook tracking sections will all get placed in the body the the other places you'll sometimes see um code get put is after the body um because for example uh JavaScript um some some page authors um it it's not really an issue in cartra because you don't have that finite control of where it goes but like sometimes when you're running JavaScript um the code needs to know that the the browser has finished building the page so um an obvious way to handle that well I retract the word obvious one way to handle it is to put your script code in a script tag that's below the body Because by the time the um the browser has finished processing the body tag all of the main content will be will be built so a script that's running um below the body tag in what could be considered a footer because it's it's from a HTML structural point it's below the body scripts running below the body can assume that the body um has has at least been um processed it you may not have images loaded or iframe content loaded but the basic structure will be known to the browser um so there there is no no footer in the sense of having code below the body but um the the ones labeled footer in cartra um happen lower on the page than the one labeled body so I would use body for something that you want to happen early in the page um uh typically if you're adding interactive elements um you typically want that to be available fairly fairly early on so we would put things like that there um if it's if it's less critical um then I I generally put things at the footer just because more of the page is is assembled um so I I guess I don't have um I don't have a simple rule of thumb other than what I what I said if you know when you want it to happen with respect to other things happening on the page um um e experience is the only is the only answer um and or alternatively trial and error um and to be quite honest oftentimes it really won't make that much difference how's that for a non-answer to the question I'm sorry I don't have a more succinct answer um it's it's kind of a hard to answer question good good question coding is the new creative field right you yes for sure beautiful I think that is all the questions we have for now um I think yeah everyone's excited for the examples and if you guys do have more questions feel free to put them in the chat and we'll be sure to get to those okay now the now the really fun stuff now that we've slogged through all of this dry stuff now now we get to see something a little more interesting um so in this example um I'm going to show how uh to well we we can look um I'm I'm going to go because of time constraints here I'm I'm already uh near the top of the hour so because of time constraints um we can go look at the the page builder Pages themselves um as part of the Q&A uh but I want to show you excuse me the pieces that go into these um examples so that you have um some idea of of how to um reconstruct them um so in this example a goal is to um embed a weather widget from the elf site.com site um I have nothing to do with elf site but it's a great uh place to get uh pre-built widgets um if there isn't one um for something you want to do in cartra um or if the one in cartra doesn't give you enough styling options for what you need um I suggest checking out elf site um there are probably other similar sites widget sites available alite is the one I happen to be the most familiar with um so in this case I'm going to um show a weather widget um and uh just to show what that's going to look like because it's uh part of part of the limited humor when you want to know whether cartter custom code can solve your problem weather weather um so here here's an elf site widget um it's set to the visitor uh location so um if you click the link in the in your copy of or of the slides or if you just come to this um page it should show you weather that's hopefully if the if your IP address um is actually related to your physical location it should give you the weather for your location um so this is this is a perfect example of uh where it's very helpful to split your code into different elements so um if I if I had just U pasted this code directly into the custom code block so um this is just a standard title block and then this is a a custom code block um I didn't I I wanted it to be in a in a column in the middle of a row so I use the custom code block here as opposed to custom code section which would have extended um from edge to edge I wanted to use put this within a column so that meant using the the custom code component so if I had just put this directly into the custom code component or custom code block um this this script would run immediately and it would look up this div and it would say Okay um I'm supposed to put the elf site widget that's identified by a unique widget identifier it would go look that up and um modify this this HTML it would add it would add new content to it to display the contents of the widget and it would do that right within the Builder so if I then proceeded to save that page um it would be saving the page that had already been localized for me so it would it would save um today's view of the North Brook weather in the page and that's not what I want I want it to stay pristine and not customized until I until the page is previewed or viewed live so um the idea here is to do what I mentioned before split it into its its its uh component elements so in this case there there's no styling but there is Javascript so I took this JavaScript um JavaScript is HTML as I should point out this this has no inline JavaScript so you're not actually seeing um any JavaScript here this is a reference to an external Javascript file so this this here is the file the URL for the file that contains the actual JavaScript so this is this is an external Javascript reference as opposed to one that puts actual code right here in this section that would be inline JavaScript but regardless this is this is the JavaScript portion of this embed so I took this and I put this in the um in one of the tracking sections and then I put just this part the the structural part the part that's going to display is what ended up in the custom code block um and so there are there are a couple reasons for that I already mentioned um not wanting to have it localize the weather in the in the Builder um and the other is if you're the widget um and this is in this case this is specific to elf site but it could happen with other widget embeds too um if you're the widget owner and you hover over the widget it shows you the status information about your widget so normal users won't see that um panel will only be seen by widget owners so this is stuff that's because um I'm logged into elf site there's a there's a cookie still active for me on elf site and I'm I'm hovering over this um but you'll see that these this status and control bar is hovering right over um the the top of the widget if you're in the page builder um and you you click on you click on the element um you're going to see har tools above it well that status bar um is GNA if you're logged in is going to obscure the cartri control you know the hover tools um so that's another reason why you you might want to move the active part um out of the custom code block or section uh into one of the tracking sections um so that's that's what I did I moved the the div the the content the divc content part into the HTML custom code block and the script into tracking um and so they is the result so the code the custom JavaScript got injected um into the page at runtime so now this if you visit this page it should properly localize for where your IP address uh tells the widget you are located okay um one of the things that's uh very very popular is horizontal forms so um oftentimes especially if you're designing for mobile you want to get the important information out of the way um above the fold so above the fold um if you're if you're not familiar with the term um in a in a browser window wherever the wherever the screen height is um so let's let's say this was like a tablet or a mobile device um so this this area before I have to scroll down and see other content is is what's called above the fold so it's it's um an old uh newspaper term basically you know what's going to catch the reader attention before they have to uh look at you know unfold the newspaper and look at the bottom or in this case in modern web parlaments um scroll down to see the rest of the content so um obviously these vertical forms if you only have one field uh per per row and and stacked them in a vertical stack now you're really chewing through your above the fold real estate really fast so the idea is to be able to take a standard cartra form and turn it into a horizontal form like this so the these are two two clones of the same form um oh well I guess I'm uh despite my intentions I guess I'm Broadcasting my email address in this presentation oh well um uh so the way to do that is with the um the custom CSS uh here's the paste bin link and just to get an idea of um of how it looks I have a a whole bunch of these uh pastes in my paste bin the um the URL for the overall paste bin um is in the um is in the connect with Brian section um but for individual um examples I've included the the paste from the ppin that was used for the example in the ppin URL um with the example um so the way these work um this top section is for display uh you probably don't want to um well it it depends on on how you select um if you select all within this display area you're okay but if you try to drag um from outside depending on um what browser you're using and the phase of the moon um you may end up getting uh parts of this um meta information these are the line numbers um so to make sure you're just getting pure code the best way to do is come down here where it says raw paste data uh click on this and it will copy all this information um here's the same code um without any extra like color highlighting formatting or line numbering um so clicking on this will copy all select all of this and copy it to your clipboard um for for deployment um so uh the way this custom styling Works um it just applies styling it says um break these up into columns um if you have um and it's it's responsive um so depending on how many columns you have um it'll break them up into into groups um so you can see as um and this is this form is also within a a non- fullwidth column um which is why it's not going um edge to edge but you can see as I resize the window um come on browser wake up it's a little slow because of the the video lag um you can see that it's gone from being um a single row with three columns now it's down to two rows um and then um as I went through different screen sizes now we went to the we went from the desktop limits to the tablet limits so we actually gained um a little bit of a little bit of space because we lost we lost the side margins that are used on desktop to keep um text lines from being too long to read so we actually gained a little bit of space so now we've gone back into um Allin one row and if we keep going smaller um we'll go back to uh like that and then eventually when we get small enough um if I if I had an even narrower device then even the submit button would eventually um go back to being like a fully fully vertical situation so that can be a a big win um for your mobile landing pages um so one of the one of the things uh that people were asking for for a long time was how can I make um a a a price table page that works like the one in cartra so namely um where you have um like different monthly and annual plans um so what this customization does is it lets you um use custom links um and if you um I can't I can't move the the cursor because it'll go away but if you look in the lower leftand corner of my open tab you'll see the URL for this for this button and you'll see um that that it's it's pretty long but after the the hashtag it says hide comma and then a bunch of um identifiers and then show comma and a bunch of identifiers so what the custom code in this pce does is it looks at these um special hide and show URLs and it controls which um which conditionally displayed uh page builder sections get shown so um and this is just a placeholder for where you put your monthly plan information or any other content and it it doesn't have to be um monthly in in annual payment plans um you could use this for any kind of tabbed content um or you could use it um like a variation on an accordion and you could do a you know reveal the answer now or whatever however you wanted these these to work um but this was in inspired by having uh monthly and annual pricing plans so right now this um this would represent the monthly pricing plan when you click on this button it's going to hide the um the page builder sections for these two buttons because I'm going to show a different style of buttons for the when I'm showing the monthly plan I want to show the monthly Button as an inactive style an inactive style button and the annual is the active so when I finally um click annual it's going to hide the two sections that were showing before and now it's showing two new sections one with the same buttons but with the styling reversed so now it's saying I'm G to go to monthly if you click this I'm currently on I'm currently showing the annual and that's just extra visual feedback um to help provide context to what they're seeing down here so the code to do that um you can copy and paste from here um you'll also need a um an unused tag a never a never you never used a never assigned never to be used to assigned tag um that you can use to prey the default um sections so if I go back to the the if I go back to the original unmodified page um these two sections are initially set to display and these two sections are initially set to hide and they're initially set to hide by going into um the page builder hiding configuration for the for the sections and saying only show this um these sections to uh leads that have the tag and mine is called unassigned so only show these two sections to leads that have the tag unassigned and because nobody is supposed to have the tag called unassigned those these two sections are initially hidden when um I press these buttons the initial settings are overridden so that allows um those initially hidden uh sections to become visible and the initially visible ones to become hidden and um be because all it's doing is showing different um different sections within the page builder you're free to use whatever button you want um any style um you can have any any background design obviously this is unstyled um you could use any background any images you know you can have anything you want that you could put on a standard page builder page um style however you want and then all that all that matters is the URL um that you put in these buttons um and there's some information um in the in the ppin code itself um that says uh what the format um for the links needs to be uh the next one is uh AC quieting the the cookie settings bar so um depending on um what what browser your visitor is using um it may be more or less finicky about which um which cookies it will pass um back to the browser when a user is visiting um so quick crash course on cookies um maybe more than you want to know but probably as much as you need to know these days um so a cookie is just a short piece of information that is supplied by a website server it's passed to the browser it's stored by the browser um to the to the browser it's um it's often not always but often opaque information it the browser itself doesn't need to know what's in the cookie um sometimes it does sometimes it doesn't but the the cookie is passed when the when the user returns to the website that sent the cookie originally the browser sends the cookie back to the server so that the server um which typically doesn't doesn't automatically know when a request comes into the web server it doesn't automatically know that this was that this is the the continuation of a previous conversation with that user that's where the cookies come in the the main concept behind a cookie is the browser says or sorry the server says here's a cookie so that you can identify yourself to me when you come back so that I know who you are and we can pick up where we left off so that's that's a cookie different sites will send cookies and they may request that um they be identified uh when something on the page like an image so if you have um if you have an image from um unsplash or something like that that you've embedded in your page um unsplash can say um for my for my resource tracking and analytics um I'd like to know uh who you are when you when you fetch an image from my collection here's a cookie so that when you request that image pass me the cookie back so that I can track that for my analytics it doesn't necessarily have to um have personal information in it but it could be like a randomly generated unique ID just for an just for tracking analytics so on like if that image was embedded on this page um cookies for csg.com would be called first-party cookies a cookie from unsplash.com would be called a thirdparty cookie because it's not related to this first party origin so a lot of browsers will will refuse to send um third-party cookies in a lot of situations um some by default and some by uh some by setting so if you you um for example if you open an empty incognito tab in Chrome um it will let you decide here with this slider whether during this incognito browsing session you want it to block thirdparty cookies or or not so my remembered setting is to block them if I turn this off it won't block them for for uh visits in this session so some browsers um now block third party cookies by default even in standard sessions um this by the way is a great way to um test most of the thirdparty cookie blocking behavior um of your of your pages if you want to see what it's going to look like for most people um and as I was saying some browsers are more picky and some are less about which third party cookies they will or won't block um but this is a good quick way to test your pages to see whether um the functionality You're Expecting will work or not with it turned off come into Chrome Incognito make sure third party cookies blocked is turned on and then go test your page so there's a little extra tip um so finally what this looks like uh oh I let's try that in a fresh page because I kind of spoiled the punch line here should I just kept that open so if um thirdparty cookies aren't being saved properly when this um cartra cookie preferences bar pops up and the user presses save what's normally supposed to happen is that's going to go away and a little thing will pop up so that if the user wants to modify their cookie settings they can come back and they can they can change them and save them again so that's what is supposed to happen but um in some browsers um after the settings are saved um the the cookie information isn't that the let me rephrase the cookie information that the settings have already been saved isn't made available to the page again so um when the user returns to the page this shows up over and over and over again on every uh page builder page every membership post and obviously it's very annoying to um have that happen every single time every visit um so what this past bin does is when you when you click save it remembers in local browser storage instead of using a cookie it uses a different type of browser storage to know that the settings have been saved and it will automatically close this box down to this little cookies tab uh for you so if your if your users are complaining um or if you want to um cut cut the issue off at the past before it becomes an issue you can use um this the code in this past bin um to make sure that that bar does not open every time uh another thing that um is is popular um in the cartra group is questions about like how do I make a um how do I open the texting app or how do I have a phone call or how do I have a button that clicks to open an email so the the standard uh cartra buttons the dialogue for configuring the link in in the page builder for buttons only lets you put in HTTP or https links um and what's required um for a a call button is called a tell Teel uh link so just like there's https here um a for a call it would be Teel colon for texting it would be SMS colon and for sending an email it would be a mail to link um so how this um how the code in this past bin works is it allows a special format um of URLs to be pasted so you can put in HTTP or https colash and then scheme um the the part that's before the colon um in technical uh standard terms is called the scheme of the URL so the H HTTP uh mail to tell those are all schemes um so this special um uh host address or host name um tells this bit of custom code to map the the scheme replace the scheme with the part that's after the dot so if you use scheme.
Tell in the URL um the HTTP or https that you had to put in so that the U page builder dialogue would accept the URL will be replaced on the live page with te similarly for SMS or mail to um and then you can put the the phone number um or the um the email address um as the rest of the link and that will become the body of the link um so when you do that like this is an example telephone link so you can you if you look at the lower lefthand corner um when I hover on this link you'll see that it got turned into um a a telephone link um that's not my phone number that's cartra so if you want to call cartra and say hello you can um click the tell link um this is I don't have a uh I don't want to open an app for this um this is the text link you can see it's been changed to an SMS link um that's 312 information I don't know if 312 information even works in this Century um but this would try to text it which probably won't work even if it is still available um and this generates a mail to link um so in this example it would it would open um an email um address to support carta.com and it would give an initial subject line of please help me um and the next one um if you've um gone to your your own Uh custom domain page um at all you've probably noticed that cartra is adding this weird uh this thing that looks weird this question mark Rd equals one to your url um and the reason it does that is on a custom domain page cartra wants to um drop some cookies in your cartra account domain so like this would be my cartra account domain um before it lets the user operate well it's let me back up it's going to drop two sets of cookies before it lets the user interact with a page it's going to drop back to your cartra account domain it's going to drop some cookies and then it's going to re redirect back to your custom domain um so for example one of mine would be uh K powertools.com it's going to drop the other cookies and then it's G to it's going to stay there and to prevent accidental looping it adds this URL or sorry this um query parameter to the URL to to say yes I've gone through that set of redirections um don't go again don't get stuck in a loop just in case the the cookies didn't stick if the browser isn't saving the cookies you don't want the the page to get stuck in a loop trying to go back drop cookies come back drop cookies um and get stuck in a loop so that's what this is um yeah it's it's ugly you prefer not to have your users have to you know look at it and and scratch their heads and wonder what that means um so this the code in this space bin um will after the redirection Hops are done it will remove this from the URL uh so I have a little I have a little test page here um if there's if that doesn't appear in the URL nothing happens so it knows there was nothing to to change on this URL so it's just a blank page if I have it in the URL um I have this alert here so that we can see the URL before it changes so you can see I've got the Rd equals one here and if I let the JavaScript continue you can see that it it can't remove the question mark um but it removes the R Done equals one part um you can have um other query parameters in your url so if I use that you can see it's got the 0 equals z Rd equals 1 and 2 equals 2 it's letting it's pausing here so we can see that it was indeed passed with Rd equals one when I let it continue it leaves the other query parameters so if you have UTM or click IDs or whatever ever in there um those will all stick um and but the rdon equals one part will be removed to make things look a little cleaner and then we're getting the home stretch um and this one will be faster because I don't currently have a demo page but one of the things that can happen um with conditional redirects um with with third party cookies being blocked um when you're on a custom domain page the the cookies are um typically in your cartra account domain or the or the cartra domain the main top level cartra domain and not in your custom domain so when a user comes to a page builder page that either has conditional sections like only show this um section if the lead has tag X um or if you have conditional redirect um stay on this page if the user has tag X and redirect to another page if they don't um cartra doesn't get the the lead identity information if those thirdparty cookies are blocked which means that it has no way of knowing if the lead has those tags because it can't identify the lead so there's not really much you can do um about conditional sections um but you can um using this this little trick do conditional page redirection and it's done by creating um conditional tracking links so if you go into the cartrid tracking link setup um there'll be a section where you can say h redirect this link for everyone or redirect some users to one link and redirect other users to another so you can put in the condition you can put in um conditions that represent the same condition that you would have had as a condition on the page redirect you put those into the tracking link instead and then with this little bit of code you add it to the top of all of the pages um two or more that would be part of the conditional redirect chain and when a when a visitor arrives on the page if they haven't been here within um an initially I think it's the last 5 seconds if they haven't if they haven't visited within the last 5 Seconds it redirects them from the page to uh the first uh conditional tracking Link in the series if there's more than one it could be just one and it lets that conditional link figure out which page they should actually be on because the tracking link is always in your um account domain and just a a side note here if you're using my um cloudflare redirect uh rule set to make um a custom track a tracking link be within your custom domain the custom domain one is still going to redirect through your account uh tracking link your account domain tracking link is one of the steps so when it gets through that step it won't the the lead identity cookie w will not be a thirdparty cookie it'll be a f first party cookie say that 10 times fast so it the tracking link unlike the page will have the information to properly navigate the conditional tracking link and send the user to the correct page um let's just for the sake of discussion let's assume that the original page was indeed the correct page to be on for the lead's current status this code will say oh I was just here within the last five seconds so I'm not going to redirect to the tracking link this must be the correct page I'm just going to stay here um and the um the information that stores when a page has been visited is based on the the the link the the link unique identifier um this isn't this isn't the link unit this isn't a tracking link so it doesn't have a link identifier it's got a paste identifier but tracking links work much the same way so it would look at the tail end of the tracking link as the like the name of the signal to use about whether the user has been here or not so every every group of uh pages that participate using a particular tracking link will all use the same signal to determine whether that group has been visited so if I go to a completely different page in the same group that I hadn't visited before um the information will be will end up being shared between the two pages and it will the new page will find the signal that was set by the first page and say oh this group of pages has been visited with within five seconds so even though it's on a different page I don't need to redirect to the tracking link to figure out which is the right one hope hopefully that makes sense um I know I've covered a ton of ground and it's it's technical um and this is only the tip of the iceberg there are so many more things that you can do with custom code um but I wanted to give you um a few things that you can that are mostly cut and paste um sometimes you'll need to um modify like a URL in the code um I've tried to make all of my uh pastes be self-documenting um so uh it should there should be information in each one that tells you which URLs you need to modify and what the what kind of information it should point to so uh hopefully you've you found that valuable um so let's open it oh uh before I drop into um the question and answer section um you can find some resources here um my speaker bio is in here there's a bunch of cont cont information um here to find me on Facebook Messenger um my YouTube cartrid uh playlist a bunch of things are in there um there's also an index here um so if you uh are remembering something about the presentation um and you don't know what section it was in um you can come into the index um look it up like we were talking about body tags um that's covered on this page um so there's a fair amount of information um in the connect with Brian section um there's a there's a form in there um uh I guess I've already revealed my email address in there anyway um so it doesn't really matter too much um uh you can uh if you want to sign if you're interested in a kcsg specific presentation um I'm interested in finding out how many people would be interested in that um if you want to got in mind mailing list um if you're interested in about licensed products um or if you even just have comments or feedbacks about my presentation I'd love to hear them you can do all of that um in this form uh you'll have to make your email and the secondary email match otherwise it's going to make this box spread and you won't be able to submit okay questions awesome thank you so much Brian um and we actually ran out of time for Q&A but I I urge you guys if you do have questions to reach out to Brian um of course he's in the Facebook community and then this is an exellent place to ask him questions um but yeah I appreciate your time so much thank you you you really went above and beyond amazing examples um just honestly truly amazing we're so lucky to have you in the community thank you guys so much um if you have any questions about the community itself um or doing uh doing a co-hosted event reach out to me at Community Genesis digit.co and we'll see you next time yeah one one quick final comment in closing um I suggest in in cases where it makes sense uh please ask your questions in the cartra official group um so that the most people can benefit from the question and the answer thank you so much all right bye y'all
