# How To Implement 360 Viewer **Source:** https://beyondspace.studio/blog/how-to-implement-360-viewer **Language:** French (France) --- # How to implement 360 viewer Jul 1 Written By Beyondspace To implement a 360 sphere viewer on Squarespace, follow these steps below to create and use animated sprites. ## Preparing the Images 1. **Create Sprites**: Prepare the individual images for your animation and combine them into a single spritesheet. 2. **Insert Image**: Use the Image block to add the viewer to your page. 3. **Attach Spriteify URLs**: Attach link to Image block in order to activate the view ![Single sprite](https://images.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/1720586428471-XLHY0E1WTCTNDT5L6UKD/Heart-360-_000-min.jpg)![Single sprite]() Single sprite ![40 Frames spritesheet](https://images.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/1720586445140-WFICSVR6ET8F6EGVVUPM/Heart-40-Frames-min.jpg)![40 Frames spritesheet]() 40 Frames spritesheet ## Spriteify URLs A Spriteify URL is a special link with reserved parameters that configure how the viewer plays a spritesheet animation. URL parameters begin with a question mark (`?`). The parameters are joined using an ampersand (`&`) and follow the format `parameter=value`. ### Supported parameters | Parameter | Required/Optional | Description | Values | Default Value | | --- | --- | --- | --- | --- | | `spriteify` | Required | Turns the image into a spritesheet animation. | `true`/`false`ou `1`/`0` | 1 | | `width` | Optional | Specifies the width of the sprite. | Any valid pixel value | Image block width | | `height` | Optional | Specifies the height of the sprite. | Any valid pixel value | Image block height | | `frames` | Required | Specifies the total number of frames in the merged sprite image. | Any positive integer | N/A | | `framesX` | Required | Specifies the number of columns in the merged sprite. | Any positive integer | N/A | | `responsive` | Optional | Determines whether the viewer dimensions change when resizing. | `true`/`false`ou `1`/`0` | 1 | | `animate` | Optional | Determines whether the viewer auto-rotates on load. | `true`/`false`ou `1`/`0` | 1 | | `loop` | Optional | Determines whether the viewer loops when animate is true. | `true`/`false`ou `1`/`0` | 0 | | `sense` | Optional | Specifies the direction of the animation. | `1`ou `-1` | N/A | ### Example URL For example, given a spritesheet with 40 frames and 6 frames per row, the URL might look like this: **https://images.squarespace-cdn.com/content/660f72446b381f5933e3f1c9/48950111-b977-4fff-bf15-9c4611af8091/Heart-40-Frames-min.jpg**?spriteify=true&frames=40&framesX=6&responsive=true&animate=true&loop=false #### Before `?`: The Image URL - `https://images.squarespace-cdn.com/content/660f72446b381f5933e3f1c9/48950111-b977-4fff-bf15-9c4611af8091/Heart-40-Frames-min.jpg` This part of the URL points to the actual image file. It is a direct link to the image hosted on Squarespace's CDN (Content Delivery Network). #### `?`: The URL Parameter Separator - The question mark (`?`) indicates the beginning of the URL parameters. These parameters are used to configure how the image should be processed or displayed. #### URL Parameters and Their Values 1. `spriteify=true:` This required parameter activates the spritesheet animation feature. Setting it to `true` enables the image to be treated as a spritesheet. 2. `frames=40:` Specifies the total number of frames in the merged sprite image. In this case, there are 40 frames. 3. `framesX=6`: Indicates the number of columns in the merged sprite image. This means there are 6 frames per row in the spritesheet. 4. `responsive=true`: Determines whether the viewer dimensions change when resizing. Setting it to `true` makes the viewer responsive to different screen sizes. 5. `animate=true`: Specifies whether the viewer should auto-rotate the spritesheet on load. Setting it to `true` means the animation will start automatically when the viewer loads. 6. `loop=false`: Determines whether the viewer should loop the animation when `animate` is set to `true`. Setting it to `false` ensures that the animation play just once. Image Spriteify URL params ## Detail Instructions 1. **Insert Image Block**: Add the image block to your page. 2. **Add Sprite Image**: Upload the first sprite image. 3. **Upload Spritesheet**à Asset Library and get its URL to create the spriteify URLs 4. **Attach Link**: Click on "Attach link" and use the spriteify URLs. 5. **Save the Page**: Save your changes. *10 STEPS* 1. Edit your page and insert an Image block ![Step 1 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2404373&step_number=1&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5) 2. Cliquez sur **Image** ![Step 2 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2404373&step_number=2&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5) 3. Click **Add an Image** ![Step 3 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2404373&step_number=3&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5) 4. Click **Upload File** ![Step 4 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2404373&step_number=4&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5) 5. Click **Attach Link** ![Step 5 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2404373&step_number=5&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5) 6. Paste the **Spriteify URL** ![Step 6 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2404373&step_number=6&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5) 7. Save the Image changes ![Step 7 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2404373&step_number=7&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5) 8. Click **Enregistrer** ![Step 8 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2404373&step_number=8&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5) 9. Click **Exit** ![Step 9 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2404373&step_number=9&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5) 10. That's it. You're done. ![Step 10 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2404373&step_number=10&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5) ### Here's an interactive tutorial *\*\* Best experienced in Full Screen (click the icon in the top right corner before you begin) \*\** **Next step** ## Takeaway - **Image Width Limitation**: Since Squarespace limits image width to 2500px, create a maximum of 2-column spritesheets to ensure the highest quality. - Use this online tool to merge the spritesheet, MacOS users can use Combine Images Shortcut Beyondspace As a Squarespace Circle member, Beyondspace delivers plugins that elevate your website, streamline workflows, and optimize the Editor experience—saving time and driving engagement. https://beyondspace.studio Précédent Précédent ## Essential Lightbox features for Designer portfolio website Suivant Suivant ## How to create unique subject for Squarespace form submission