1. Home
  2. Docs
  3. Documentation
  4. Platforms
  5. Inserting Widgets into Squarespace

Inserting Widgets into Squarespace

In this brief tutorial we will cover how to effectively install the ArtPlacer Widgets into your Squarespace website.

We recommend reading the instructions provided in the Widget Generator section of this manual before proceeding with the steps described below.

Initial Considerations

The ArtPlacer Widget can be embedded into Regular Pages or Product Pages.

Regular Pages are distinctive pages where you communicate something about your company such as the Home Page, About Us, Contact, etc.

Product Pages are pages typically found in e-commerce websites that display information of a specific product.  These pages are usually generated automatically for each product, and they are usually similar pages where only the product data varies (i.e. the artwork image, its description, its cost, etc.).  A good example of a product page is a Shopping Cart Page such as the one below.

Important

In order for the ArtPlacer Widgets to work in Squarespace you need to disable Ajax in your website. To do so, please follow these instructions or contact Squarespace support.

Installing the ArtPlacer Widget in Regular Pages

In this example we will install the ArtPlacer Widget in a Regular Page using the HTML type of widget.

In Regular Pages you install widgets that will display specific artworks you have uploaded through the ArtPlacer Dashboard by selecting ArtPlacer Artworks from the Artworks Selector or you or you can trigger an automatic display of a list of artworks that have been uploaded to ArtPlacer by choosing Not Specified. For both cases the process is the same.

We will illustrate the former.

Get your widget code using the Widget Generator and make sure you choose ArtPlacer Artworks.

1. Login to your Squarespace dashboard and navigate to the Code Injection menu entry by clicking on Settings > Advanced > Code Injection

2. Paste the line below into the FOOTER Box and click Save

<script src=“//widget.artplacer.com/js/script.js”></script>

3. Navigate back to the Main menu and click on the Pages selection.

4. Select the page where you want to insert the ArtPlacer Widget and click Edit.

5. The editable areas will be marked with “+” signs. Click on the one marking the area where you wish to add the widget button.

6 Click on Add Blank +

7. Hover over the newly inserted Text element and click on the small circle at the top left corner.

8. A list of Content Blocks will pop up. Click on the < / > Code Block.

9. Paste the widget code generated with the Widget Generator into the Code Box.

<artplacer gallery="1" type="2" text="try in your room" artwork="13872" space="156"></artplacer>

10. Next, click on the top Edit Pencil icon on the right under the image to edit the appearance and position of the element.

11. You can adjust the size and alignment of the new element within the area.

Installing the ArtPlacer Widget in Product Pages 

There are two ways to install the ArtPlacer Widgets into Product Pages. You can add the widget code into each specific artwork description or you can add the code just once so it works for your entire catalog. For the first method we use HTML code and for the second we use JavaScript (JS) .  In this tutorial we will show both.

Individual Product Integration with HTML

This method is recommended when you have a small number of products and when you don’t add or remove products from your catalog periodically.

Get your widget code using the Widget Generator and make sure you choose Dynamic and HTML for the Artwork and Code Selectors.

1. Login to your Squarespace dashboard and navigate the Code Injection menu entry by clicking on Settings > Advanced > Code Injection

2. Paste the line below into the FOOTER Box and click Save, as shown above for the Regular Pages.

<script src=“//widget.artplacer.com/js/script.js”></script>

3. Navigate back to the Main menu and click on the Pages selection and then on Shop to view the list of your products.

4. Select a product on the left bar and then go to EDIT PRODUCT

5. Go to Additional Info and add a CODE < / > element

6.  Paste the code copied from the Widget Generator into the box.  Make sure to click on APPLY to close the modal box.

NOTE: Please leave the artwork_url: "dynamic url here" and height: "dynamic height here" attributes as they are. The ArtPlacer Script you included in the previous steps will automatically replace those with the correct values.

TIP: You can generate additional code for the other types of widgets and add it to the code block as shown below.

7. Now click on Price & Variants and make sure you enter the correct Height of your artwork, in inches. If left blank the height will default to 30”.  (You do not need to enter the Width since it will be calculated automatically from the image aspect ratio).

8. Make sure to click on SAVE to save all your work

You are all set! The widget should be up and running for the chosen product.

Dynamic Product Integration with JS

This method is recommended when you have a large catalog and editing every artwork would be too tedious. In general, this applies mostly to Product Pages but it could be used for Regular Pages as well.

Get your widget code using the Widget Generator and make sure you choose Dynamic and JS for the Artwork and Code Selectors.

1. Login to your Squarespace dashboard and navigate the Code Injection menu entry by clicking on Settings > Advanced > Code Injection

2. Paste the code below into the FOOTER Box and click Save

<script src="//widget.artplacer.com/js/script.js"></script>
<script type="application/javascript">
ArtPlacer.insert({
	gallery: "7642",
	space: "14392",
	default_style: "true",
	type: "2",
	artwork_url: "dynamic_url here",
	after: ''})
  </script>


IMPORTANT
Please note the attribute after.  This attribute is used to specify the position of the element after which the ArtPlacer Widget Button is to be inserted using CSS Selectors. If you leave it blank – as in the example above – the button will be floating at the bottom right of the page with the following result:

Below is an example of a gallery that added three different types of the ArtPlacer Widgets, Sample Room (type 2), Client Room (type 1) and AR (type 3).  

IMPORTANT
As indicated above, you can specify where to insert the widget by adding a CSS selector to the after attribute of your code. Setting up CSS Selectors can be tricky, so if you don’t have any web programming knowledge, we recommend you leave this empty and the widget will be displayed floating at the bottom of your page as shown in the previous example.

If you want to learn more about CSS Selectors, you can check here.

Conclusion

We presented different ways of adding the ArtPlacer Widgets into Regular and Product Pages on Squarespace websites with different levels of difficulty and different outcomes.

If you need further help, please contact us.

Was this article helpful to you? Yes No