Search the Community

Hi there, I'm kind of at a loss here. I incorporated some fun JSON/Lottie animations into my website following the steps provided by Carl Johnson on his YouTube page. Everything was working great all week until this morning. Somehow, all the animations, including others I tried (whether made by me or from different sites), don't seem to be working anymore. Strangely, nothing was changed. Does anybody recognize the problem or know what could be happening? The site is https://www.onderdompelen.nl/ Password is: barrydebaars I injected this code in the header: <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> And this code for the player as a code-block: <lottie-player autoplay controls loop mode="normal" src="https://lottie.host/410ebfb0-554a-4e32-bb7b-cb1601551c25/PBnNRsz69i.json" style="width: 320px" > </lottie-player> Hope somebody can help 🙂

Greetings hive mind. https://teupoko.squarespace.com I've got a play button in the right side of navigation bar. To the left of the button I want to display "now playing - {title} {artist}" using the metadata extracted from our icecast audio stream. https://icast1.streamcom.net/TeUpoko http://icast1.streamcom.net:80/TeUpoko that will only display in the navigation bar when the stream is playing. I've done a little reading on how to do this but I'm not that far above beginner level coding in html, css etc. Any help would be greatly appreciated!

Hi Total newb here. But I need help using this lottie/JSON as a header logo: "https://lottie.host/15db7b45-3479-4e30-b075-35c00520034f/Zvm9GBMQgJ.json" I have accomplised getting the json to play on hover on a block of the site. But can't seem to figure out how to replace the header logo which is just a font as the json instead. Also Is it better to start a site from scratch in squarespace rather than use a template if one is to customize with a bunch of jsons? https://www.marcos-guevara.com/ any help would be great. thanks!

Hello Square Space community! I'm brand new to this development world and am having some trouble trying to get an API to function on our new website, I'm hoping you can help! Background; I work for a small internet service provider in Australia and we're looking at updating our website to Square Space. This task has fallen to me as I have the most I.T experience in the business (which is minimal at best, but that's what you get when everyone else is sales based!). Part of the new website will be an address search function that provides the end user with the ability to see what internet services are available to their property (this is called service qualification or SQ) and then order services accordingly. Our current site does not have this function. Our wholesale carrier has provided me with all the documentation and access to their API, but I am unsure how I implement it onto our new website? If anyone has a step-by-step guide or can provide any advice, that'd be fantastic. Please let me know if you need any additional information! Thank you, Brendan

Site URL: https://www.somastudios.co/ Hi, I want to replace the animated gif logo I have in my header for a .json Lottie animation. I have got the .json animation to work in a code block using this tutorial but want to put the animation as a replacement for my logo in the header. Can anyone help me with the code for this please? Thanks Oz

Site URL: https://www.somastudios.co/ Hi, I am trying to use Lottie files on my Squarespace. Do I need to upgrade my account to add a code injection to do this or can I do it with a standard account? If possible, how can I add a Lottie animation (.json or otherwise) to my header logo animation? Thanks!

Hello, I need to use a .js file which contains an ajax call to a .json file. What I tried: Adding a disabled page with two links pointing the two files, which I uploaded, and then copy-pasted the URL (/s/js.js and /s/json.json), adding <script src="/s/js.js"></script> to my page. The assets library section doesn't allow uploading of .js or .json. The above generates a CORS error when the .js calls the json: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://static1.squarespace.com/static/60ec2975d230b9076ec61068/t/658808ec766c4f231170302f/1703414009896/new_list.json. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 404. I then used the static1... URL above instead of the /s/json.json. No luck. I also used the static1... URL for the javascript itself (I got it from the browser's console). No luck. I injected the js code on the whole site's header and footer. No luck. I copy-pasted the javascript code on a page code block: my javascript code has the 'display code' switched on and greyed out, so that the raw code is always displayed on my site (yes, logged out, in private mode, etc.). Adding a HTML code with the <script> tage still gets ignored. I even inserted the whole json in a <script> tag in the page. Since it's a big json the page times out or says 'connection failed' so that's also not an option. Is what I'm doing so impossibile? I have a business plan. The SquareSpace support replied to my request with a non-answer (i.e. that I should be knowing what I'm doing and linked to resources I already perused). Let me also add that the code is working fine on my local MAMP so there is no issue whatsoever with the code itself. It's just a javascript file that makes and ajax call to a json file to populate a datatables table. I'd highly appreciate any help. Luca

Hi, I'm making a website in Squarspace 7.1 using Lottie files for animations. If I add a Lottie files animation it adds a big spacing below the animation that shoudn't be there. It looks like the size of the mention of "Embedded scripts" in edit mode stays in spacing below the animation if you save the website. With the exact same code and animation in Squarspace 7.0 I don't have this problem. I hope someone can help me with this problem! Thanks in advance. Squarspace 7.1 (in progress) https://arugula-smilodon-xzm7.squarespace.com/ password: CC2023 Squarspace 7.0 (live) https://www.coencad.nl/ Exact same animation without extra spacing

Hi guys, I have a serious problem and I can't figure it out: 1. Nostr is a very fast growing decentralized social media platform. 2. Nostr uses a protocol called NIP-05 to "verify" a user using domain-level or other verification. 3. To verify, all one needs is a nostr.json file in the root domain located at /.well-known/nostr.json 4. One important detail: Because Nostr is decentralized, literally hundreds or thousands of clients need to be able to cross reference the file. So CORS must be enabled. SquareSpace currently does not directly support CORS. 5. I have a nostr.json file set as the index file on an S3 Amazon bucket with hosting turned on. CORS has been enabled and is supported. 6. I am currently using a 301 redirect in URL mappings from SquareSpace to the target file. /.well-known/nostr.json -> http://japaneur.s3-website.ap-northeast-3.amazonaws.com/nostr.json 301 BUT the problem is CORS will not work with redirects. 7. So I am trying to figure out how to enable SquareSpace, if it's possible, to point to the nostr.json file for the /.well-known/nostr.json URL in another way, other than a redirect. Somehow using Amazon as the content delivery network for SquareSpace. The way I can test if it is working is to see the green text in a Nostr client. See attached jpegs. When the NIP-05 works, the verified address will show green text. When it doesn't work, nothing shows up. I think I need a scripting genius to figure this out. Help! The alternative is to switch away from SquareSpace back to Wordpress, which we really don't want to do.

Hi, My animator created a Lottie/JSON file for me to use as a page preloading animation on my site. It's a 1.5 second loop of a 300px sized transparent animation. I had requested a GIF as I've found instructions online to use a GIF as a preloading animation. However, the GIFs he keeps sending over are far too low quality for me to use. So I'm wondering if anyone knows if/how I can use a Lottie animation instead? I can't find any instructions, tutorials or information online about this. Thanks for any help that you can provide.

Hello world! I'd like to change the wording of the second line in the checkout page "2. Payment & Discounts" is there ANYWAY to change, hide or remove the word Discounts? the reason I'm not providing coupon codes or discounts...etc I also attached the scope in question. Thank you so much!

I can't seem to find how to fix this. I've looked for code in the code injection and there is nothing and if I edit in the editor it doesn't do anything. Can anyone help? The second issue is squarespace will not allow me to change the background color or blur the background so the menu is very hard to read.

Site URL: https://www.manicpixie.co/about Hello - I had a series of json animations on my site running through lottie player that were working perfectly for months until the new update. I host these files at jsonbin.io but all the links appear to be broken. Has anyone experienced this and/or found a workaround?

Currently the navigation is a single column. I would like to make it capable of being 2 column and to dynamically fill to fit that way. https://developers.squarespace.com/json-t-directives I want to know if there is a JSON-T Directive to get the current item being printed in a loop like this: {.repeated section items} {.collection?} {.even?} <a href="{collection.fullUrl}" class="Header-nav-folder-item{.if active} Header-nav-folder-item--active{.end}" data-test="template-nav">{collection.navigationTitle}</a> {.or} {.section externalLink} <a href="{url}"{.section newWindow} target="_blank"{.end} class="Header-nav-folder-item">{title}</a> {.end} {.end} {.end} My thought is to create 2 navigation columns based on the number of items in the dropdown navigation. I would get the number of items in the navigation by using this variable directive: {.var @myLen items|count} Then I would create another variable to find the halfway point where I should start navigation items to the other column: {.var @halfLen @myLen/2} I would then need to know what Item I am iterating on (IE whether it is element 1, 2, etc). I don't know if there is a directive for this though. After that is known I would be able to first end the first column then start the second column of this navigation menu. This should allow me to make this idea work. Is there a directive that will allow me to make this work or an alternate solution to making a 2 column layout without hardcoding the header-nav.block file? Thank you.

Hello Guys, I have a problem with particles.js, it isn't possible to add a code in a block or even overlay on the image with header code injection. The code is, I had already changed URL slug with the name of the correct image block. Even if I try to add a direct code block the effects don't appear Can someone help me? <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { particlesJS("url-slug", particlesJSConfig); setTimeout(function() { window.dispatchEvent(new Event('resize')); }, 100); }); </script> <style> .particles-js-canvas-el { position: absolute; top:0; left: 0; width: 100%; height: 100%; z-index: 1; } </style> <script> var particlesJSConfig = { "particles": { "number": { "value": 250, "density": { "enable": false, "value_area": 800 } }, "color": { "value": "#5b86e5" }, "shape": { "type": "edge", "stroke": { "width": 0, "color": "#000" }, "polygon": { "nb_sides": 6 }, "image": { "src": "img/github.svg", "width": 100, "height": 100 } }, "opacity": { "value": 1, "random": true, "anim": { "enable": true, "speed": 0.5, "opacity_min": 0.1, "sync": false } }, "size": { "value": 1, "random": true, "anim": { "enable": true, "speed": 10, "size_min": 50, "sync": false } }, "line_linked": { "enable": false, "distance": 200, "color": "#ffffff", "opacity": 1, "width": 2 }, "move": { "enable": true, "speed": 0.75, "direction": "top-left", "random": true, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 1250, "rotateY": 2600 } } }, "interactivity": { "detect_on": "window", "events": { "onhover": { "enable": true, "mode": "bubble" }, "onclick": { "enable": false, "mode": "push" }, "resize": true }, "modes": { "grab": { "distance": 300, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 200, "size": 1, "duration": 2, "opacity": 3, "speed": 2 }, "repulse": { "distance": 50, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true } </script>

Hi, wondering if anyone else here is having the following issue. I created a Lottie animation out of AE via Bodymovin', uploaded to Github, used URL of resulting Json file to insert into Lottie player on my website. All works great - for the first few minutes only!! Then, the URL changes on Github (???) and the link breaks. I tested my animation in the desktop Lottie player, works great. So I know it isn't the animation itself. I also know it isn't any weird code interference, because I tested my Json in a new trial site - same problem. I have seen a few people with this same issue posting under a Youtube "How to" video, but no solutions. I also have a ticket in to Github but thought I'd also try here. I don't even care where I host, I just need my hand held as to how to insert code into the Lottie player because I am new and not a coder. So that's how I ended up with Github, I saw a How to and they have a good reputation. Any help, recognition of the problem, alternates, or hacks are very welcome! I'm about to tear my hair out after two weeks of circling around with this.

Hi! I have an issue of not getting things to work the way I want it to. Sorry the language is n Norwegian in the webpage, but I´ll try to describe the issue nevertheless. On https://play.bilmc.no/ you will now see how the new site looks like. On the attached image I´ve shown an example of how I can make usage of the api with css customization, and the strings in the code will help me show what data to present to the vistor. On https://bergenbilogmcskole.tabs.no/kursoversikt you´ll see the data I want to present on play.bilmc.no. The creators of that page is the same company who produced the api. One of the attached images shows how to be able to use the api. On that "code-image" it says that "To use the JSON-endpoints it needs to register the IP adresss of the server used. I´ve told them to "open up" and approve 4 IP-adressess who is attached to Squarespaces servers. That means that the developers opens these four IP´s as whitelisted. https://www.nslookup.io/domains/play.bilmc.no/webservers/ Further on is says "Kurs" and "HTML" on the third attached image to this post. Both with <script> and <div code. My questions are to you; Where do I put the different codes? If I put this in the header: $client = new GuzzleHttp\Client(); $res = $client->request('GET', 'https://api.tabs.no/api/v2/course', [ 'headers' => ['ApiKey' => 'c4e844824823f69be8305a98696b96d5'], 'query' => ['officeId' => 304], ]); It will only appear as black text and white background all the way on top. I don´t understand how to add a Query-parameter... When I include this in code-block; <script>var officeId = {ID};</script> <script src="https://api.tabs.no/js/api.js?v2.0.0"></script> I will have a "No preview when logged in box" and nothing when published... How can I make the data appear on my page? Hopefully someone can make me understand!

HI all, I want to display on my blog some code (not code as in HTML injections for sqarespace) that I want to publish. I would like line numers and formating (color) for JavaScript, JSON, Yaml, C++ etc. Any ideas how to do this easy and nice looking? Thanks

Hi there I am looking to install vertical sticky menu on the website. Can you please help me find code to make text white on dark backgrounds and black (inverted) on white backgrounds? Thank you 🙂 URL: https://mono-c2-jul.squarespace.com/ PW: onlyme

There a way to access the Media Library within the DevTool console as JSON-T. I been having hard time understand how to import separate image within your code I have find how to import the right code doing the below code: <div class="item"> <div class="bio-container"> <img class="dhphoto" src={@|image-meta} /> <p></p> </div> </div> But I still don't know why not importing the image that I want to show on the screen from Squarespace.

Site URL: https://itsbrandond.com Hey everyone! Quick question: Launching my personal portfolio website on 7.1 and just needed the personal plan. Totally understand that there are no custom code blocks or injection on this plan, but didn't occur to me I wouldn't be able to implement JSON Schema markup into my site. Fully realize 7.1 sees it as Javascript, but this is kinda critical for SEO for many reasons. Does anyone know a way around this? How can I implement my JSON Schema markup on a 7.1 personal plan? Big picture, I feel this could be implemented in the 7.1 backend by adding an "advanced" section to the marketing menu area where you can choose various Schema options such as @Type and image assets different than the ones Squarespace chooses. Would be an incredibly powerful option for folks on the personal plan and you wouldn't need to add Code Injection capabilities. A great resource to see how it should be implemented is on this page. Thanks everyone!

Hi all! I was wondering how it would be possible to implement a button onto my website which I can click to get a light/dark mode activated- simply changing the background to dark and its components such as the navigation bar etc.. Hopefully you could help me out! Thank you in advance!

Site URL: http://lrcss.com How can I add a donors address into a donation notification message? I'm attempting to use the donation notification as an official tax receipt for donors and one of the things I am required to include is their address. I know we collect that when they complete the donation transaction so I assume I can pull it into the email using a JSON variable I'm just not sure which one? Thanks for helping me out!

Site URL: https://www.1924.us/ Does Squarespace expose cart data? I see the shoppingCart property in the JSON data, but it's otherwise empty. And I don't see anything in the developer docs about the cart either. I know the cart page itself is rendered via React, and they include the cart JSON data within the HTML on the page, but it's not available to fetch from anywhere else on the site.

Site URL: https://www.halebyhenderson.com/gallery/p/kapulua-entry-table Hello I'm trying to find a way to display the product dimensions on product pages. Ideally below the choice of Material. As you'll see they are a decor company and this information is key to potential clients in setting up their spaces. I assume it could be accomplished by pulling information from the JSON data, however I'm pretty new to JSON and wouldn't know exactly how to pull it to print, plus does the Squarespace 'Code Block' support JSON and what I'm looking to accomplish? Thank you for your time.