Jump to content

Syntax Error on Line 1

Go to solution Solved by paul2009,

Recommended Posts

I've been watching a couple Squarespace videos on how to do small customizations on my website via the Custom CSS section and I type in the code exactly and it constantly gives me the Syntax Error on Line 1.

Not sure what I'm doing wrong?

Here's the code I was trying out.



Link to comment
  • Replies 21
  • Views 8.5k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

The brackets should be curly braces like this:

{} not ()

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 10 months later...

<!DOCTYPE html> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="utf-8">
        <title>Model Viewer</title>
<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

Model viewer {
  Margin: 0 auto; }

    <body> <model-viewer> scr="https://products.aspose.app/3d/assets/js/aspose.3d-2.0.js" camera-controls auto-rotate</model>

I keep getting syntax error one line? what does this mean

Link to comment


The code you have there wouldn't be valid entered anywhere in SS.

Please explain what you are trying to accomplish and we may be able to guide you.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Hi Creedon thank you so much for your reply I'm trying to add a 3D model  image to my sqaure space website that visitors can grab / rotate and view all angles I have the same image file saved as OBJ FBX PLY STL 

I'd like the web user to be able to hover mouse over image and drag and pull move and interact with the 3D model file I have of a laser scan of a pipe. 

To show website visitors the defects in the image. I have uploaded a still Jpeg of the 3D model file. I've tired using paid third party programs like Vectary but I can't seem to get those embeded codes to work on Sqaurespace either. 


Really stuck because entire site is build on sqaurespace for a rov engineering company,

Samaple Model.png

Link to comment


I'm starting to understand. I think this is the technology you are trying to use.


Looking at the Quick Start on the above page your code has some of the elements. But it appears to have been munged. I don't see a glb file. I've spent all of about two minutes so I'm no expert.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
<!DOCTYPE html>
  <html lang="en">
  <title>&lt;model-viewer&gt; Interactive Example</title>
  <meta charset="utf-8">
  <meta name="description" content="&lt;model-viewer&gt; interactive example">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link type="text/css" href="../styles/examples.css" rel="stylesheet" />
  <link rel="shortcut icon" type="image/png" href="../shared-assets/models/favicon.png"/>
  <!-- 💁 OPTIONAL: The :focus-visible polyfill removes the focus ring for some input types -->
  <script src="../node_modules/focus-visible/dist/focus-visible.js" defer></script>
  body, html {
  height: 100%;
  font-size: 10pt;
  label {
  display: inline-block;
  width: 120px;
  height: 24px;
  input {
  vertical-align: middle;
  input.number {
  border: 0;
  background: transparent;
  font-size: 16px;
  width: 32px;
  outline: none;
  select {
  font-size: 14px;
  #container {
  display: flex;
  height: 100%;
  model-viewer {
  flex-grow: 1;
  height: 100%;
  #instructions {
  width: 320px;
  margin-top: 10px;
  margin-left: 30px;
  margin-bottom: 20px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: none;
  background-color: blue;
  background-color: #888888;
  position: absolute;
  transform: translate(10px, 10px);
  border-radius: 10px;
  padding: 10px;
  text-align: left;
  background-color: red;
  .hotspot:not(.selected) > .annotation{
  display: none;
  @media screen and (max-width: 320px) {
  #instructions {
  display: none;
  <div id="container">
  <div id="instructions">
  <a href="https://github.com/google/model-viewer" target="_blank" rel="noopener">&lt;model-viewer&gt;</a>
  Drop a <a href="https://github.com/KhronosGroup/glTF" target="_blank" rel="noopener">glTF or GLB</a> for the model =><br/>
  Drop an <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDR or JPG</a> for the skybox =><br/>
  <input type="file" id="input" multiple><br/><br/>
  <label for="src">src:</label>
  <select id="src">
  <option value="../shared-assets/models/Astronaut.glb">Astronaut</option>
  <option value="../shared-assets/models/glTF-Sample-Models/2.0/BoomBox/glTF-Binary/BoomBox.glb">Boom Box</option>
  <option value="../shared-assets/models/glTF-Sample-Models/2.0/BrainStem/glTF-Binary/BrainStem.glb">Brain Stem</option>
  <option value="../shared-assets/models/glTF-Sample-Models/2.0/Corset/glTF-Binary/Corset.glb">Corset</option>
  <option value="../shared-assets/models/glTF-Sample-Models/2.0/DamagedHelmet/glTF-Binary/DamagedHelmet.glb" selected>Damaged Helmet</option>
  <option value="../shared-assets/models/glTF-Sample-Models/2.0/FlightHelmet/glTF/FlightHelmet.gltf">Flight Helmet</option>
  <option value="../shared-assets/models/glTF-Sample-Models/2.0/Lantern/glTF-Binary/Lantern.glb">Lantern</option>
  <option value="../shared-assets/models/glTF-Sample-Models/2.0/Suzanne/glTF/Suzanne.gltf">Monkey</option>
  <option value="../shared-assets/models/glTF-Sample-Models/2.0/SpecGlossVsMetalRough/glTF-Binary/SpecGlossVsMetalRough.glb">Water Bottles</option>
  <option value="../shared-assets/models/RobotExpressive.glb">Robot Expressive</option>
  <option value="../shared-assets/models/alpha-blend-litmus.glb">Transparency Test</option>
  <option value="../shared-assets/models/glTF-Sample-Models/2.0/MetalRoughSpheres/glTF/MetalRoughSpheres.gltf">Metal Rough Spheres</option>
  <label for="environmentImage">environment-image:</label>
  <select id="environmentImage">
  <option value="" selected>default</option>
  <option value="../shared-assets/environments/spruit_sunrise_1k_HDR.hdr">spruit sunrise HDR</option>
  <option value="../shared-assets/environments/spruit_sunrise_1k_LDR.jpg">spruit sunrise JPG</option>
  <option value="../assets/music_hall_01_1k.hdr">music hall</option>
  <option value="../assets/whipple_creek_regional_park_04_1k.hdr">whipple creek</option>
  <option value="../shared-assets/environments/aircraft_workshop_01_1k.hdr">aircraft workshop</option>
  <option value="../assets/pillars_1k.hdr">pillars</option>
  <label for="useSkybox">use as skybox:</label>
  <input id="useSkybox" type="checkbox" disabled="true"><br/>
  <label for="exposure">exposure:</label>
  <input id="exposure" type="range" step="0.01" min="0" max="2" value="1">
  <input id="exposureValue" value="1" class="number"><br/>
  <label for="shadowIntensity">shadow-intensity:</label>
  <input id="shadowIntensity" type="range" step="0.01" min="0" max="1" value="0">
  <input id="shadowIntensityValue" value="0" class="number"><br/>
  <label for="shadowSoftness">shadow-softness:</label>
  <input id="shadowSoftness" type="range" step="0.01" min="0" max="1" value="1">
  <input id="shadowSoftnessValue" value="1" class="number"><br/>
  <label for="autoRotate">auto-rotate:</label>
  <input id="autoRotate" type="checkbox"><br/><br/>
  To create a seamless poster:<br/>
  Orient model and resize window to desired size (small is recommended), then click:<br/>
  <button onclick="createPoster()">Create Poster</button><br/>
  Then resize window to any aspect ratio and click:<br/>
  <button id="display" onclick="reloadScene()">Display Poster</button><br/>
  Click the model to dismiss the poster and interact. To save your poster, click:<br/>
  <button id="download" onclick="downloadPoster()">Download Poster</button><br/>
  <div id="cameraOrbit"></div><br/><br/>
  To calculate hotspot locations, click:<br/>
  <button onclick="addHotspot()">Add Hotspot</button><br/>
  Then click on the model.<br/>
  To remove a hotspot, select it, then click:<br/>
  <button onclick="removeHotspot()">Remove Hotspot</button><br/>
  <model-viewer id="loading-demo" autoplay camera-controls interaction-prompt="none"
  src="../shared-assets/models/glTF-Sample-Models/2.0/DamagedHelmet/glTF-Binary/DamagedHelmet.glb" alt="A 3D model">
  <div class="footer">
  <li class="attribution">
  <a href="https://poly.google.com/view/dLHpzNdygsg">Astronaut</a> by <a href="https://poly.google.com/user/4aEd8rQgKu2">Poly</a>,
  licensed under <a href="https://creativecommons.org/licenses/by/2.0/">CC-BY</a>.
  <li class="attribution">
  <a href="https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/DamagedHelmet">Damaged Helmet</a> by <a href="https://sketchfab.com/theblueturtle_">theblueturtle_</a>,
  licensed under <a href="https://creativecommons.org/licenses/by-nc/3.0/us/">Creative Commons Attribution-NonCommercial</a>.
  <li class="attribution">
  <a href="https://github.com/mrdoob/three.js/tree/dev/examples/models/gltf/RobotExpressive">RobotExpressive</a> by <a href="https://www.patreon.com/quaternius">Tomás Laulhé</a>,
  licensed under <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>.
  <li class="attribution">
  <a href="https://hdrihaven.com/hdri/?h=small_hangar_01">small_hangar_01_1k.jpg</a> by <a href="https://hdrihaven.com">HDRI Haven</a>,
  licensed under <a href="https://hdrihaven.com/p/license.php">CC0</a>.
  <li class="attribution">
  <a href="https://hdrihaven.com/hdri/?h=whipple_creek_regional_park_04">whipple_creek_regional_park_04_1k.hdr</a> by <a href="https://hdrihaven.com">HDRI Haven</a>,
  licensed under <a href="https://hdrihaven.com/p/license.php">CC0</a>.
  <div style="margin-top:24px;" class="copyright">©Copyright 2018-2020 Google Inc. Licensed under the Apache License 2.0.</div>
  <div><a href="https://github.com/google/model-viewer">Github</a><a href="https://model-viewer.glitch.me/">Glitch</a><a href="https://github.com/google/model-viewer/issues">Bug report</a></div>
  <script type="module" src="./built/tester.js"></script>
  <!-- Documentation-specific dependencies: -->
  <script type="module"
Link to comment
  • 1 year later...

Syntax Error on line 1

<!-- Start Square Appointments Embed code -->
<a target="_top" style="
background-color: transparent;
border: 2px solid #e7d1b5;
color: #e7d1b5;
height: 40px;
text-transform: uppercase;
font-family: 'Square Market', sans-serif;
letter-spacing: 1px;
line-height: 38px;
padding: 0 28px;
border-radius: 8px;
font-weight: 500;
font-size: 14px;
cursor: pointer;
display: inline-block;
" href="https://squareup.com/appointments/book/y3zoxs7mwpetmr/LRHJY8WVT5BEB/start" rel="nofollow">Book Now</a>
<!-- End Square Appointments Embed code -->


this is the code trying to add a button that takes visitors to a booking calendar keep getting the same error not sure how to handle this. please if anyone can help 



Link to comment
35 minutes ago, angelorman said:

this is the code trying to

The code you show is HTML. I suspect you've tried to add it to Design > Custom CSS. Custom CSS is for CSS code, HTML can not go in there.

You probably want to add the code Either the site-wide HEADER for FOOTER code injection.

It's hard to know for sure how to advise you. It helps if we have a site URL and a description of the effect you want.

I suggest you start a new thread with what you want to accomplish, supply some details, and then perhaps we can help. This thread has several different issues being discussed and it's easier on everyone if we can keep threads down to one set of issues.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 5 months later...
7 minutes ago, Impact23 said:

How am I getting a Syntax error on line 1 ?

You are getting an error because the code you show is not CSS. Only CSS can go in Custom CSS.

The shown code looks like either JSON or a JavaScript fragment.

Without knowing what you are trying to do it will be hard to help.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

can you assist

As far as I can tell there is more than just a JSON file that needs to be uploaded somewhere.

This is an application with bunch of files that constitutes the app. The app needs to be uploaded to a traditional website hosting service that accepts outside software being uploaded to it.

SS is not a traditional old style web hosting service. SS is designed to isolate the user from all that old school stuff.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 9 months later...
On 5/16/2024 at 11:07 PM, lilbaldin0 said:

I paid for a custom font from Creative Market that is meant to be used on web pages and I'm getting the syntax error on line 1 message - I believe it's because it's HTML, is there a way to translate to CSS?



Can you take a screenshot of code?


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • 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.