Jump to content

conversiontracking

Circle Member
  • Posts

    281
  • Joined

  • Last visited

7 Followers

Personal Information

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. (Paid) Solutions for conversion tracking and Acuity redirects If you are up for a paid solution, I have a couple of products which could be helpful here. 1) Acuity conversion tracker tracks conversion with custom Google Tag Manager + Javascript setup. It's really realiable. 2) Acuity redirect plugin redirects. 3) Sometimes my clients like to hire me 1-on-1 which is possible as well (but more expensive) If you want conversion tracking, don't use redirects! Redirects are bad for conversion tracking in Acuity. In tools like Jotform or Typeform we need redirects to get field values. BUT! With Acuity we get them with JS messages, so REDIRECTS ARE NOT NEEDED. Redirects only cause problems for conversion tracking: Redirects can result in multiple conversion counts per single booking due to browser refreshes, especially on mobile devices (iOS safari loads the last page -> duplicate events). This leads to inaccurate conversion data. Redirects often introduce irrelevant referrers or poor traffic sources. Though this issue is mitigated with Acuity scheduling because the window.top.location = ... method doesn't work anymore and we use postMessage andwindow.addEventListener('message' for redirects, but it still complicates conversion tracking. Redirects have  personal identifiable information (PII) in URLs, which Google Analytics prohibits. To clean those up, unnecessary and expensive customisations with Google Tag Manager are required to cleanse URLs. But there is no reason to redirect because we can conversion track by sending and listening to Acuity JS messages. Problems with using Acuity built-in conversion tracking While Paul is right about Acuity having built-in conversion tracking integrations, unfortunately my clients often face problems with them. The biggest problems are A) Because Acuity is an iFrame inside our website (which looks like a part of our website but it's not) it does not have the traffic information like GA4 Client ID, cookies, the traffic source (info where the visitor came from, like organic google, google ads, instagram, youtube whatever) Acuity attempts to transfer all that stuff from our website into the Acuity iFrame, but the results are not reliable. You often see (not set) or "Unassigned" for Acuity as their traffic source in GA4 Sidenote: These annoying problems are NOT Acuity's fault! Every iFrame based widget faces this same issue with conversion tracking. Same thing with Calendly, GoHighLevel calendar, Typeform, Jotform, Tally Forms. iFrames are not part of our website so they're hard to track with GA4, Google Ads etc. Custom coding is always needed. B) The Acuity "Custom Conversion Tracking" doesn't even try to share the information from our website to Acuity. This makes sense because Acuity doesn't know what you're trying to track: TikTok, Meta. Pixel, Google Ads, Linkedin Insight Tag, Twitter pixel or hundred others. So while you can add tracking code to Acuity, it does not work because the conversion is not linked to the traffic source. For example if you have try to track Google Ads, the Google Ads conversion is missing the Google Click ID (GCLID) _gcl_aw cookie. So while Acuity tells Google Ads that there was a booking, it will not show up in your conversions because Google Ads thinks it's just organic traffic. Same with FBCLID (Facebook Click Identifier) and all others. Website conversion "πŸ‘‹ Hey Google Ads, we got a new booking " "πŸ™‚Great where did the client come from? Did they click on Google ad before booking?" "βœ…Yes. They came from Google Ads, from our spring sale campaign" "πŸ’° Great, we'll show the conversion in Google Ads " Acuity Custom Conversion Tracking "πŸ‘‹Hey Google Ads, we got a new booking" "πŸ™‚Great, where did the client come from? Did they click on Google ad before booking?" "πŸ’β€β™‚οΈ We have no idea!" "πŸ€”Well...we can't show a conversion in Google Ads even if they came from Google Ads. We can't just randomly take credit for all website traffic. We have 0 conversions" Acuity custom conversion tracking is also sandboxed. It's an iFrame inside an iFrame, making things even more difficult. Offline conversion tracking Another more advanced approach is to store UTM parameters, or GCLID or FBCLID in local storage, and populate those to hidden fields in Acuity by dynamically creating the Acuity iFrame. This allows Google Ads offline conversion tracking, measuring revenue instead of just number of bookings, and also tracking even if people use ad blockers. Packages, gift certificates, and subscriptions One thing to keep in mind is that Acuity conversion tracking does NOT work for Packages, gift certificates, and subscriptions. These can only be tracked by Offline conversion tracking, e.g. make.com with the previous method mentioned πŸ‘†
  2. Good news and bad news Bad news first... Solutions are not free. They have taken me years to make. You read that right. I have spent years solving this exact problem. I'm now the best in the world at solving it. Good news βœ…I have perfect solutions which solve both of the problems – Acuity redirects and Acuity conversion tracking. βœ… The solutions are a one-time payment. Unlike like Typeform for example, where you gotta pay $95 EVERY MONTH for conversion tracking. My solutions are not Squarespace forum copy-paste hacks done in 5 minutes, that maybe almost work. I do professional stuff. One client who uses my Acuity conversion tracking took over 12,000 (twelve thousands) Acuity bookings last month via their 50+ Acuity accounts in multiple US states. All tracked with my setup. They make $ millions, and use my custom tailored setup to track Acuity conversions. Short story 1) You can buy a readymade solution for both, or hire me to implement Acuity conversion tracking or Acuity redirects for you. 2) If you want conversion tracking, do NOT use redirect. Use another method to track conversions. I'll explain why below, but trust me. Do NOT USE REDIRECTS IF YOUR GOAL IS ACUITY CONVERSION TRACKING. USE REDIRECTS IF YOU WANT REDIRECTS πŸ™‚ 3) Sometimes people want to hire me 1-on-1. You can get in touch via my website. I don't keep track of messages in this forum. Long story Acuity conversion tracking is difficult. It's difficult because Acuity Scheduling widget is either A) An iFrame inside our website. It looks like a part of our website but it's not. B) Another website, so user goes from example.com πŸ‘‰ acuityscheduling.com/?appointmentType=62671380 Problem 1 We can't know what happens inside acuity. Thats on purpose – if we could spy inside we could also spy users adding credit card numbers. We don't have access. So we cannot use normal conversion tracking methods like Google Tag Manager form submit. Those don't work. Problem 2 Acuity tries to solve the problem by having a built-in Google Analytics 4 integration, and this custom conversion tracking box. The reason why the Google Analytics integration doesn't work realibly, is the fact that visitors land on our website. They don't land inside acuityscheduling.com/our-thing. So the GA4 Client ID, cookies, the traffic source (info where the visitor came from, like organic google, google ads, instagram, youtube whatever) is in our website. Acuity attempts to transfer this info from our website to Acuity, but the results are not reliable. My clients often see (not set) or Unassigned for Acuity as their traffic source in GA4 When done properly using my custom setup, it's a different story Problem 3 Where GA4 setup at least tries to share the GA4 cookies from our website to Acuity iFrame, the Acuity "Custom Conversion Tracking" doesn't even try. It's also sandboxed so it's an iFrame inside an iFrame, making things even more difficult. Problem 4 Redirection used to be possible with window.top.location = ... but browsers tightened security, because if iFrames can redirect you, spammy ads could redirect you to a scam website selling Viagra without your permission. Browsers no longer allow it. Solution 1 The way to track Acuity Scheduling conversions online (or redirect after booking) is by using JavaScript to send a custom message from Acuity Custom Conversion tracking box. And then add a Javascript listener via Google Tag Manager custom HTML tag, transfer all the conversion info like $ price, appointment name, email etc. Populate a data layer, push a custom event in to the DL, fire custom event trigger and send our event tags from our website (not from Acuity) This way the GA4 event, Google Ads conversion, Facebook pixel event etc are all tied to correct cookies and traffic sources in our website. We will also use the Acuity booking email and send it to Google Ads for more accurate Enhanced Conversion Tracking. Google can then track visitors even if cookie-based tracking fails, e.g. if a client clicks on your ad with a phone but books with their laptop. Advanced stuff. Solution 2 Another more advanced option is to dynamically generate Acuity iFrame, and pre-populate conversion info to hidden fields in Acuity, to do e.g. Google Ads offline conversion tracking by sending the GCLID (Google Click ID) into Acuity itself. If Acuity is used for lead generation (e.g. lawyer, not a massage therapist) this lets you track ROAS, $ not just how many bookings but how much revenue. Redirect VS Conversion tracking If you want redirects, use redirects. If you want conversion tracking, do not use redirects. Why not? πŸ†˜ Redirect is a terrible way to track conversions 1) Redirecting to a custom thank you page often sends multiple conversions for one booking. The reason is that whenever a client will refresh their browser we send new conversions. This happens surprisingly often because when someone books on their phone and they reopen their browser it will refresh the last page leading to inaccurate data. 2) Usually redirects will also provide unwanted referrers or bad traffic sources. With acuity scheduling that's no longer an issue actually because the old redirection version is not possible but still makes redirects bad idea for conversion tracking purposes. 3) "PII" Personal information in the URL Google Analytics does not allow personal information like email addresses in the URL for page views and the only way we can get that information is in the URL. So we need a lot of expensive custom Google Tag Manager stuff to clean that our URL, up and there's just no point in doing that or making Acuity tracking more difficult than it already needs to be. If you need both redirect and conversion tracking, then we need a javascript that will add the acuity booking ID into local storage and only sends conversions for first page load but not refreshes. We also need to remove emails from URL because we need the URL for Google Ads enhanced conversion variable BUT it must not go to Google Analytics. Having both is most expensive. Packages, gift certificates, and subscriptions Currently there is a bug in Acuity where Packages, gift certificates, and subscriptions do not track conversions. Acuity knows it but has not fixed it although it's been a long time. Only way to track these is by pre-populating hidden fields and using "offline conversion tracking", e.g. make.com, CRM, Google Sheets, GCLID, FBCLID or Meta Conversions API etc. Payments We can get the conversion value, how much client paid and do GA4 ecommerce tracking, Google Ads conversion with value. Stripe and Square work. PayPal doesn't work because we redirect to PayPal where we can't track stuff. I recommend not using PayPal. Embedding Acuity must always be embedded as an iFrame (or using Squarespace Scheduling block). Do not use Booking button, although it's an iFrame on desktop, on mobile it will lead visitors from your website to Acuity stopping conversion tracking from working. Make a booking page example.com/book-here and add Acuity iFrame with a GTM conversion tracking setup. Google Ads - import via GA4 or cross-domain funnel..? Bad ideas. GTM Conversion Linker tag can be configured to do cross-domain stuff, but that does not work with Acuity. If you have an iFrame, the info is not transferred as in my testing a <a> link click is required. Also, Custom Conversion Tracking is sandboxed within a second iFrame where we can't send any info. You could in theory import Google Analytics conversions into Google Ads, but it's very inaccurate. Problem 1) we can't to enhanced conversion tracking which is a must-have nowadays Problem 2) ad blockers are more aggressive on Google Analytics than Google Ads conversions in my testing, may take 30% traffic out 3) Acuity cookei sharing is unreliable. Also GA4 usually has different conversion attribution models counteing less conversions in Google ads So with GA4 -> Google Ads import is terrible idea in my opinion. If you use a real GTM setup, you can import GA4 as a secondary conversion not used for bidding. But it will just show you less conversions. No point. Advanced stuff Dropff rates! We can also track acuity steps. A lot of clients ask for this. We make a GA4 visual funnel with drop-off rates 1) See Acuity widget 2) Interact with the widget, choosing appointment type of date and time 3) Book and pay GA4 User ID I'm also investigating turning the Acuity email to a GA4 user-id, so we can see if the same user buys multiple times, get customer lifetime value calculations etc. If your clients book multiple times like IV therapy, car wash etc. this can be super useful to see how well your business is doing. Google My Business links Must always go to Acuity where we never want to go. This needs a custom setup, links always include a "rwg_token", in URL we can create second GA4 property and filter sessions where landing page contains that. I'll try and make time to do a full video explanation. Sorry I don't have a free solution. It's taken me years to learn this stuff. Even know it's Saturday night, and I'm working on Acuity conversion tracking πŸ™‚ ps. fun fact. A client asked me to solve this Acuity conversion tracking problem years ago. That project lead me to stop doing Squarespace design stuff and only conversion tracking full time. I basically do Acuity conversion tracking every day.
  3. hey man, makes total sense. Was in a hurry and just popped it to my Amazon S3 external script. I took out the info as you're correct with everything
  4. Nice work! πŸ‘ That's definitely a great, and easy option for a vertical timeline. However, as Squarespace is built around the idea of not having to write or edit HTML code I wanted a solution fully editable in 7.1 fluid engine: It's a bit more minimalist to fit into the Squarespace aesthetics, and of course design is editable in Squarespace Site Styles. It also has subtle scrolling animation option Free tutorial for vertical timelines So if you're interested in an option with less coding, more visual editing, you can check my free tutorial on how to build a timeline with 7.1 fluid engine for a simple DIY version. (Paid) plugin with animations and mobile design ..or try out this vertical timeline plugin, with scroll animations, mobile-friendly design, custom styling etc.
  5. Hey, Here's an easy free tutorial that'll get you started on creating a classy, minimalist vertical timelines in Squarepace using the 7.1 Fluid engine and little CSS. If you don't want to code yourself If you don't want to tinker with CSS but want a well designed, responsive or even animated timeline, you could also take a look at this blog post about different types of vertical timelines and this (paid) Squarespace Vertical Timeline Plugin with multiple options, including turning a portfolio page to animated timeline.
  6. Hey πŸ‘‹ Solution for Acuity Redirect after booking Acuity redirects have become more and more difficult, but don't worry, it's still very much possible. The problem, in a nutshell is that browsers are becoming more strict about iFrames (Acuity Scheduling in a website is an iFrame) having the required permissions to redirect the parent page (your main website where Acuity is embedded, as an iFrame). so code like this which used to work... <script> window.top.location = 'https://example.com/thank-you/'; </script> ...now leads to this error There was a workaround by adding a custom sandbox -attribute in the iFrame that seemed to work for a while, however that has also become more unreliable, as browsers seem to require "user activation", meaning that user interacts (e.g. clicking) with the iFrame to launch the redirect, which is not what happens in Acuity conversion. The current reliable solution, is to send a message from Acuity to the parent website, ideally having all the if-else logic there to redirect by appointment type. Once your website "hears" the javascript message from the Acuity iFrame, it'll "redirect itself" without permission problems. It's very unlikely that browsers or Acuity will, or even could block this method, so it's very reliable for years and years to come. A thing to keep in mind is that there will be a tiny tiny delay before the redirect kicks in, so I recommend using Custom CSS to design a loading spinner to make the experience smoother. Otherwise users may be confused by the flash of the normal Acuity end screen and a sudden redirect. My Acuity Redirector Plugin uses all the methods above, making it super reliable, smooth, flexible and easy to use. Solution for Acuity Scheduling Conversion Tracking @Clean seems to be after conversion tracking. If you want conversion tracking then a different solution is recommended. It's quite similar, in that we'll send a message from Acuity iFrame to the parent window, and then listen for that message. However I'd usually recommend implementing conversion tracking instead of redirects. For a long time, the problem was that the Acuity redirect would cause issues in Google Analytics, because the traffic source would be faulty because of the redirect. So even if traffic came from e.g. Facebook Ads, the traffic source would look like it's Acuity, even though it was only a detour. This problem is not fixed at least in my products like the Acuity Redirector Plugin. It will even include the conversion information in the redirect url. But I still usually recommend using the Acuity message to do conversion tracking, instead of redirects if conversion tracking is what you are after. I also have a plugin for Acuity Conversion Tracking here. It's a very, very difficult setup to make. Most of my clients tell me they've paid sometimes even 3 developers, but none of them couldn't do it as it requires quite deep understanding of JS, conversion tracking and Google Tag Manager, so unfortunately it's not the cheapest product. If both redirect and conversion tracking are needed, then Acuity Redirector Plugin is a good starting point. But this setup is very very very complex, so I usually try to stick with more simple version of Acuity Conversion Tracking as even that is vert complex. I do have a conversion tracker that works with the Acuity Redirector Plugin, because it will require a custom setup but I don't like the added complexity. If using the basic versions of both plugins, there is a risk that the redirect happens before conversions are sent successfully so that's not recommended.
  7. Hey everyone, Reading everything so far, it seems like the 5 main problems are: Having something that doesn't require manually editing each link. Takes too much time. Having a solution that requires less technical knowledge to implement, not having to worry about specific format for links or using a weird "hack" A solution that only targets external links, without affecting navigation links or other internal links A solution that works for different types of content like blog posts, summary blocks, gallery blocks, etc. Solution that's reliable and always works, and will include bug-fixes or 1-on-1 support. With these requirements, I've made a small (paid) plugin that does all of that, and more. You can see a video demo below I also added a simple on/off switch, and an optional icon so visitors can easily recognise external links from internal ones. If you want to try my plugin you can find it here
  8. Thanks Marc! Glad you like it. That's a great tip – I'll make sure to add it to Ghost Marketplace as well πŸ™‚
  9. Can't get exactly the same but we can get close. Or do even better. Similar page transition animations for Squarespace 7.1 & 7.0 A (paid) plugin - quick and easy option if you don't want to tinker with code. I've made a free step-by-step video tutorial for adding page transitions to Squarespace. This is for code nerds πŸ€“ who want a free DIY solution tailored and learn more code stuff. Either way I recommend using the awesome Animsition jQuery plugin to make page transitions. Both the Squarespace Page Transitions plugin and the video tutorial use that as a foundation. Animsition is great because it has 58 animations, fade, zoom, rotate, flip etc. Although latest version is from 12th Aug 2017 – that just means the browser support is going to be very broad! Animsition had a lot of people contributing to it so I trust it to be quite robust. Remember – with a loading animations if you have a bug it might prevent loading of the page fully! So make sure to use something reliable (like the options above) Animation for laterwolf.com – Squarespace 7.0 Brine family only I made a "plugin" where you can easily edit the color and opacity. Add to Custom CSS: /* 🎩 Squarespace Brine Animated Transitions */ //Edit loading slider color and opacity @loaderColor: blue; @loaderOpacity:40%; .Loader { height: 100vh !important; } [data-mercury-loading] .Loader { background-color: fade(@loaderColor, @loaderOpacity); } [data-mercury-loading='done'] .Loader { // custom styles here when loader is at 100% in the right edge } /* 🎩 Squarespace Brine Animated Transitions */ Explanation – how the laterwolf.com animation code works https://www.youtube.com/watch?v=-nYZIYU6ChQ The website laterwolf.com uses Squarespace 7.0 Brine family, which has something called "ajax-loading" feature. With the ajax loading enabled the template will have a small 5px white high loading bar on top. It goes from left to right once the page load. We can turn the small 5px bar into full-heigh 100% "curtain" that sweeps through the entire page. When the animation is loading, the <body> element will have [data-mercury-loading] attribute which makes the loading bar go to 60%. Once it's loaded that attribute turns into [data-mercury-loading='done'] and it reached the right edge, or 100%.
  10. You're right. I've seen other report this as well and also do not see sales in my own GA4 / Squarespace. I wonder if GA4 is so unpopular that no one has complained to Squarespace..? Personally I've had very hard time using the data compared to UA.
  11. Web_Solutions This thread is for the next / previous PRODUCT links. So when you click on a product, there's a button to go to next product. Your screenshot is the product list pagination, which means going to the next page on the product list. Different thing πŸ™‚
  12. Hi jenq πŸ‘‹ Try the tagasisstant.google.com to make sure the GA4 is installed correctly and getting data. Here's video showing how Google Chrome – at 14.46 4.mp4 Get in touch if you want me to help you with this!
  13. Thanks! Yeah, I've noticed this alert in my UA dashboard, and you're 100% right... However I'm still a little unsure what's the plan gonna be, as EU has pretty much stated that all Google Analytics usage is illegal. I've tried some cookieless legal options like Plausible and Fathom, and they're great except with the e-commerce stuff which is important 😞
  14. Hi MayaViolet, πŸ‘‹ I'm the developer of the Automatic dark mode plugin for Squarespace. Will try to push you in the right direction. To make the dark mode plugin, I've spent 3+ months solving this problem. My plugin switches between 2 themes, but the way I've coded it would work for multiple color themes as well. Here's a video explanation on how I would solve this Squarespace 7.1 color themes Squarespace 7.1 has 10 different color themes that are easy to edit. The way they work is by adding a specific CSS class to the sections. Here are the CSS classes and matching color themes: LIGHTEST 1: .white LIGHTEST 2: .white-bold LIGHT 1: .light LIGHT 2: .light-bold BRIGHT 1: .bright-inverse BRIGHT 2: .bright DARK 1: .dark DARK 2: .dark-bold DARKEST 1: .black DARKEST : .black-bold So basically, the way to code the functionality you're describing we would make a function that would add a specific css class to all sections on the page, thus making the entire page have a specific theme. The only smart way is to take advantage of the Squarespace 7.1 color themes! This function would remove the "wrong classes" from each section: // ℹ️ HELPER FUNCTION FOR REMOVING ALL THEME CLASSES EXCEPT DARK MODE CLASS var removeNonDarkModeClasses = function(){ var themeClasses = ['white', 'white-bold', 'light', 'light-bold', 'bright-inverse', 'bright', 'dark', 'dark-bold', 'black', 'black-bold']; //console.log("themeClasses: " + themeClasses); var filteredArray = themeClasses.filter(function(e) { return e !== darkModeClassName }) //console.log("other section classes but not dark mode class: " + filteredArray); $.each(filteredArray, function( index, value ) { darkmodeTargetedElements.removeClass(filteredArray[index]); }); } ...this would add them back. // ℹ️ HELPER FUNCTION FOR ADDING BACK THE THEME CLASS FOR EACH SECTION var addBackNormalNonDarkModeClass = function(){ darkmodeTargetedElements.each(function(){ $(this).addClass($(this).attr("data-section-theme")); console.log("Adding back section class: " + $(this).attr("data-section-theme")); $(this).addClass($(this).attr("data-header-theme")); console.log("Adding back header class: " + $(this).attr("data-header-theme")); }); } This would style all the sections with a specific class from the class list above var darkmodeTargetedElements = $(".page-section, .header"); darkmodeTargetedElements.addClass(darkModeClassName); -Fenix P.S. If you ever need help with advanced Squarespace coding, you can get in touch πŸ™‚ P.P.S You could also look into the source code of the soultwin.studio's website. ⛔️ Do not copy, it's not legal. But you can inspect and get inspired. The javascript that makes that functionality looks like this: (function ($) { $(document).ready(function () { /* Define vars ============================ */ const moods = [ { label: 'Editorial', fontFamily: 'SVG', fontSize: '8vw', letterSpacing: 0, color: 'f6f7f1', textTransform: 'uppercase', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fd0df1826d54b3c06ddfc87/1607524128469/Editorial.gif', }, { label: 'Venom', fontFamily: 'Font Select One', fontSize: device.mobile() ? '16vw' : '9.5vw', letterSpacing: device.mobile() ? '-3px' : '-8px', color: '657034', textTransform: 'uppercase', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fd0df5aab2d482295e9d729/1607524197530/Venom.gif', }, { label: 'Hot Embers', fontFamily: 'Font Select Three', fontSize: device.mobile() ? '12vw' : '8vw', letterSpacing: device.mobile() ? '-5px' : '-8px', color: 'F4663B', textTransform: 'uppercase', backgroundImage: 'https://static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fd0e0971c49363a9b566c4a/1607524514270/MOSHED-2020-12-7-21-37-46+2.gif', }, { label: 'Lilac', fontFamily: 'Font Select Nine', fontSize: device.mobile() ? '15vw' : '8.5vw', letterSpacing: '-4px', color: 'ECE1EF', textTransform: 'capitalize', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fc953f37fb1013a0d54db08/1607029747945/Lilac-09.jpeg', }, { label: 'Moonflower', fontFamily: 'Font Select Ten', fontSize: device.mobile() ? '15vw' : '9vw', letterSpacing: device.mobile() ? '-5px' : '-10px', color: '7197F8', textTransform: 'uppercase', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fd0defda4b4ef2db6b12671/1607524109876/Moonflower.gif', }, { label: 'Dream Pop', fontFamily: 'Font Select Eleven', fontSize: device.mobile() ? '13vw' : '8.5vw', letterSpacing: '-4px', color: 'FFCFAB', textTransform: 'uppercase', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fd0dee7b8bf0379e615c131/1607524080837/Dreampop.gif', }, { label: 'Library Card', fontFamily: 'Font Select Two', fontSize: device.mobile() ? '16vw' : '8.75vw', letterSpacing: 0, color: 'f4f1c0', textTransform: 'uppercase', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fc953e4c19741784c99d8b1/1607029733001/Banana-09.jpeg', }, { label: 'Passionfruit', fontFamily: 'Font Select Twelve', fontSize: device.mobile() ? '27vw' : '12vw', letterSpacing: '-10px', color: '5B2A3D', textTransform: 'capitalize', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fd0dffb28178304112e1a30/1607524356829/Passionfruit.gif', }, { label: 'Limelight', fontFamily: 'minerva-modern', fontSize: device.mobile() ? '14vw' : '10vw', letterSpacing: 0, color: 'E3F4D9', textTransform: 'uppercase', backgroundImage: '//static1.squarespace.com/static/58ef15f7d2b857e333d35434/t/5fca42456a94db17e49c979d/1607090758096/Limelight-09.jpeg', }, ]; function autoType(elementClass, typingSpeed) { $('.cursor').remove(); $('.text-js').css('opacity', 0); var thhis = $(elementClass); thhis.prepend( '<div class="cursor" style="right: initial; left:0;"></div>' ); thhis = thhis.find('.text-js'); var text = thhis.text().trim().split(''); var amntOfChars = text.length; var newString = ''; setTimeout(function () { thhis.css('opacity', 1); thhis.prev().removeAttr('style'); thhis.text(''); for (var i = 0; i < amntOfChars; i++) { (function (i, char) { setTimeout(function () { newString += char; thhis.text(newString); }, i * typingSpeed); })(i + 1, text[i]); } }, 0); } /* Make Customizer Draggable *- and define options ============================ */ _.map(moods, function (key) { $('#colorPickerSelect').append(` <div class="flex flex-align-center colors cursor-pointer"> <div class="w-24 ht-24 cursor-pointer" data-size="${key.fontSize}" data-image="${key.backgroundImage}" data-color-label="${key.label}" data-text-transform="${key.textTransform}" data-font="${key.fontFamily}" data-let-sp=${key.letterSpacing} data-color="#${key.color}" style="background: #${key.color} content-box;"></div> <p class="font-7 no-transform font-size-12 m-l-spacer-md m-y-spacer-none no-transform let-sp-1 text-dark">${key.label}</p> </div> `); }); autoType('.type-js', 150); $('#colorPickerSelect, #customizer small').hide(); $('.pick-a-mood #handle').on('click', function () { $('#colorPickerSelect, #customizer small').slideDown('fast'); $('#emptyColorState').remove(); $('#handle-plus').hide(); $('#handle-minus').show(); $('#customizer').removeClass('pick-a-mood').addClass('picking-color'); }); $('.colorChosen #handle').on('click', function () { $('#colorPickerSelect, #customizer small').slideDown('fast'); $('#handle-plus').hide(); $('#handle-minus').show(); $('#customizer').removeClass('colorChosen').addClass('picking-color'); $('#activeColorContainer').hide().remove(); }); $('#handle-minus').on('click', function () { $('#colorPickerSelect, #customizer small').slideUp(); $('#handle-plus').show(); $('#handle-minus').hide(); $('#customizer') .addClass('colorChosen') .removeClass('picking-color') .find('#colorPicker').append(` <div id="activeColorContainer" class="flex flex-column p-r-spacer-md"> <div class="flex flex-align-center colors cursor-pointer active"> <div class="w-24 ht-24 cursor-pointer" style="background: ${ localStorage.getItem('activeColor') ? localStorage.getItem('activeColor') : '#f6f7f1' } content-box; border-color: black"></div> <p class="font-5 font-size-24 m-l-spacer-md m-y-spacer-none no-transform text-dark">${ localStorage.getItem('activeColorLabel') ? localStorage.getItem('activeColorLabel') : 'Editorial' }</p> </div> </div> `); }); const ACTIVECOLOREL = $('#colorPicker').find( `[data-color="${localStorage.getItem('activeColor')}"]` ); if (localStorage.getItem('activeColor') === ACTIVECOLOREL.data('color')) { ACTIVECOLOREL.parent().addClass('active').find('div').css({ borderColor: 'black', }); if (localStorage.getItem('activeFont') === 'SVG') { $('#logoText').hide(); $('#logoSVG').show(); $('#logoSVG path').each(function (i) { var $item = $(this); $item.hide(); setTimeout(function () { $('.cursor').removeAttr('style'); $item.show(); }, 150 * i); }); } else { $('#logoSVG').hide(); $('#logoText').show(); } } if (!_.isNil(localStorage.getItem('activeColor'))) { $('#photo-container #photo-wrapper').css({ backgroundImage: `url(${localStorage.getItem('activeImage')})`, }); $('#colorPickerSelect, #customizer small').hide(); $('#handle-plus').show(); $('#handle-minus').hide(); $('#handle').on('click', function () { $('#colorPickerSelect, #customizer small').slideDown('fast'); $('#handle-plus').hide(); $('#handle-minus').show(); $('#customizer') .removeClass('colorChosen') .addClass('picking-color') .css({ backgroundColor: localStorage.getItem('activeColor') }); $('#activeColorContainer').fadeOut('fast').remove(); }); $('#customizer') .addClass('colorChosen') .removeClass('pick-a-mood picking-color') .find('#colorPicker').append(` <div id="activeColorContainer" class="flex flex-column p-r-spacer-md"> <div class="flex flex-align-center colors cursor-pointer active"> <div class="w-24 ht-24 cursor-pointer" style="background: ${localStorage.getItem( 'activeColor' )} content-box; border-color: black"></div> <p class="font-5 font-size-24 m-l-spacer-md m-y-spacer-none no-transform text-dark">${localStorage.getItem( 'activeColorLabel' )}</p> </div> </div> `); $('#main-container').css({ backgroundColor: localStorage.getItem('activeColor'), }); $('#logoText').css({ fontSize: localStorage.getItem('activeFontSize'), fontFamily: localStorage.getItem('activeFont'), letterSpacing: localStorage.getItem('activeLetSp'), textTransform: localStorage.getItem('activeTextTransform'), }); } else { $('#customizer').append(` <div id="emptyColorState" class="flex flex-column p-r-spacer-md"> <div class="flex flex-align-center cursor-pointer"> <div class="w-24 ht-24 cursor-pointer" style="background: transparent content-box; border: 1px solid; border-color: black"></div> <p class="font-5 font-size-24 m-l-spacer-md m-y-spacer-none no-transform text-dark">Editorial</p> </div> </div> `); $('#handle-plus').on('click', function () { $('#colorPickerSelect, #customizer small').slideDown('fast'); $('#handle-plus').hide(); $('#handle-minus').show(); $('#customizer').removeClass('colorChosen').addClass('picking-color'); $('#activeColorContainer').hide().remove(); }); $('#logoSVG path').each(function (i) { var $item = $(this); $item.hide(); setTimeout(function () { $('.cursor').removeAttr('style'); $item.show(); }, 150 * i); }); } if (localStorage.getItem('activeFont') === 'Font Select Nine') { device.mobile() ? $('#logoText').css({ wordSpacing: '25px' }) : $('#logoText').css({ wordSpacing: '50px' }); } else { $('#logoText').css({ wordSpacing: 0 }); } if (localStorage.getItem('activeFont') === 'Font Select Twelve') { device.mobile() ? $('#logoText').css({ lineHeight: 0 }) : $('#logoText').css({ lineHeight: 0.4 }); } else { device.mobile() ? $('#logoText').css({ lineHeight: 0.75 }) : $('#logoText').css({ lineHeight: 1 }); } $('.select-clientele').hover( function () { $(this).removeAttr('href'); $('.marquee').show(); }, function () { $('.marquee').hide(); } ); $('#colorPickerSelect .colors').on('click', function () { let color = $(this).find('div').data('color'); let fontFamily = $(this).find('div').data('font'); let fontSize = $(this).find('div').data('size'); let letterSpacing = $(this).find('div').data('let-sp'); let textTransform = $(this).find('div').data('text-transform'); let backgroundImage = $(this).find('div').data('image'); var v = $(this).find('p').text(); if (fontFamily === 'SVG') { $('#logoText').hide(); $('#logoSVG').show(); $('#logoSVG path').each(function (i) { var $item = $(this); $item.hide(); setTimeout(function () { $('.cursor').removeAttr('style'); $item.show(); }, 150 * i); }); } else { $('#logoSVG').hide(); $('#logoText').show(); } localStorage.setItem('activeColor', color); localStorage.setItem('activeColorLabel', v); localStorage.setItem('activeFont', fontFamily); localStorage.setItem('activeFontSize', fontSize); localStorage.setItem('activeLetSp', letterSpacing); localStorage.setItem('activeTextTransform', textTransform); localStorage.setItem('activeImage', backgroundImage); $(this).toggleClass('active').siblings().removeClass('active'); if ($(this).hasClass('active')) $(this).find('div').css({ borderColor: 'black' }); $('#main-container').css({ backgroundColor: color }); $('#logoText').css({ fontFamily, fontSize, letterSpacing, textTransform, }); if (fontFamily === 'Font Select Nine') { device.mobile() ? $('#logoText').css({ wordSpacing: '25px' }) : $('#logoText').css({ wordSpacing: '50px' }); } else { $('#logoText').css({ wordSpacing: 0 }); } if (fontFamily === 'Font Select Twelve') { device.mobile() ? $('#logoText').css({ lineHeight: 0 }) : $('#logoText').css({ lineHeight: 0.4 }); } else { device.mobile() ? $('#logoText').css({ lineHeight: 0.75 }) : $('#logoText').css({ lineHeight: 1 }); } autoType('.type-js', 150); $('#photo-container #photo-wrapper').css({ backgroundImage: `url(${backgroundImage})`, }); if (!$('#customizer').hasClass('colorChosen')) { $('#colorPickerSelect, #customizer small').slideUp(); $('#handle-plus').show(); $('#handle-minus').hide(); $('#customizer') .addClass('colorChosen') .removeClass('picking-color') .css({ backgroundColor: color }) .find('#colorPicker').append(` <div id="activeColorContainer" class="flex flex-column p-r-spacer-md"> <div class="flex flex-align-center colors cursor-pointer active"> <div class="w-24 ht-24 cursor-pointer" style="background: ${color} content-box; border-color: black"></div> <p class="font-5 font-size-24 m-l-spacer-md m-y-spacer-none no-transform text-dark">${v}</p> </div> </div> `); } }); }); })(jQuery);
  15. Easy. 1) Add a section. 2) Add a video background with Full-bleed (not inset) 3) For section height choose L. Then it will be full-width and the height will be browser height. P.S For making full-width blocks you can try this plugin. (However in this case when you need a full-height and full-width section the built-in features should do it.
Γ—
Γ—
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.