TABLE OF CONTENTS

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

We recommend reading the Step by Step Full Guide on How to Create a Widget before proceeding with the steps described below.

We have split this tutorial into two parts. In the first part we will Install ArtPlacer Script. The steps described within this section are mandatory for all kinds of integrations. In the second part, Add the ArtPlacer Widget Buttons, we will choose how to add the buttons depending on whether we are integrating with a product page or with a regular page.

Note: 
If you undergo a theme change or visual changes in your website, we suggest removing the ArtPlacer widgets and reinstalling them.
Before doing so, copy your widgets' codes and paste them somewhere safe in case you need them again.

Initial Considerations

While this tutorial intends to be accessible by everyone, you may need to have some web programming knowledge in order to install the ArtPlacer Widgets into Wix.

The ArtPlacer Widget will detect the height of first one of your variants to scale against the wall. In order for the widget to detect this, you'll need to input the height and width in the following format:

  • HxW 
  • numberxnumber

Like on this example:

School of Paris by Museum Editions


Let’s get started.

Installing the ArtPlacer Script

In this first step, we need to install the ArtPlacer Script and get everything set up for our widgets to work.

1. Log in to your Wix account and access your Wix dashboard for the site on which you’re installing your Widget. 

2. Click on the Settings menu on the left sidebar and then Custom Code:

1. Adding the ArtPlacer Script

1. Click +Add Custom Code:


2. Paste the code below in the box Paste the code snippet here:

<script src="//widget.artplacer.com/js/script.js"></script>

3. Enter name: ArtPlacer - Script

4. In 'Add Code to Pages' section, select All Pages  and Load code once

5. Place code in: Head 

Your code should look like this:

6. Click Apply

2. Set it up!

1. Click  +Add Custom Code:
2. Paste the code below in the box Paste the code snippet here:

<script type="application/javascript">
ArtPlacer.clear()
</script>

3. Enter name: ArtPlacerClear,
4. In 'Add Code to Pages' section, select All Pages and Load code on each new page.
5. Place code in: Head.

Your code should look like this:


6. Click Apply


That’s it. We have already installed the ArtPlacer scripts. Let’s get started with adding some widgets to your website.



There are two ways we can insert our widgets in your website. 

For e-commerce stores with larger catalogs, we recommend Artworks from your Website. For websites that don't have e-commerce capabilities, we recommend Artworks from ArtPlacer. While the process is similar for both methods, the data that will be added to the code changes in each case.



Artwork from your website

This integration is the recommended method for displaying widgets in your product page, especially if you have a large catalog. In such cases, you don’t want to enter the widget code for every artwork in your catalog. That is when this integration method comes in handy.

1. On step 4, choose Artwork from your website.


2. Later, in the step 4 make sure you choose "Wix" 


3. Get back to your Wix dashboard and click on Settings on the left sidebar menu, and then Custom Code under the Advanced tab.


4. Click + New Tool, and select Custom.


5. Paste the "Button Code" you copied from the Widget Generator in the Paste the code snippet here box.


It should look like the one below. Do not copy this because it won’t work. Get your code from your ArtPlacer account.


<script type="application/javascript">
ArtPlacer.insert({
gallery: "some gallery id",
space: "some space id",
default_style: "true",
type: "2",
artwork_url: "dynamic artwork url here",
height: "dynamic height here",
after: ""
})
</script>
Replace the text "dynamic height here" of the height attribute with a CSS selector that targets an element in the page that holds the height in inches. If you don’t specify a height, it will use the default of 30 inches.
If you experience any problems targeting the element using CSS selectors, whether because you can’t find these elements or because you are not sure how to do this, we recommend checking out with someone with web programming experience to help out.

6. Enter Name: ArtPlacerButtons,
7. In Add Code to Pages select Choose Specific Pages and add the pages you wish the widget buttons to appear on (i.e. Product Page).
8. Place code in: Body – end.

It should look like this:


Collection & Individual Artwork Widget Integration

This integration method requires less advanced skills, and is recommended for most cases, especially if you are not intending to install the widget in a product page. 

Important note: If you select either of these options, you'll need to upload your artworks to ArtPlacer before.



1. Get your widget code from your ArtPlacer Account and make sure you choose to "Artwork from ArtPlacer" or "ArtPlacer Catalog."



Artwork from ArtPlacer 


ArtPlacer Catalog



 


2. Later, in the step 4 make sure you choose "Wix" 


4. Get back to your Wix dashboard and click on Settings on the left sidebar menu, and then Custom Code under the Advanced tab.


5. Click + New Tool, and select Custom.


6. Paste the "Button Code" you copied from the Widget Generator in the Paste the code snippet here box.


It should look like the one below. Do not copy this because it won’t work. Get your code from your ArtPlacer account.


<script type="application/javascript">
ArtPlacer.insert({
gallery: "your gallery id",
space: "a space id",
default_style: "true",
type: "2",
artwork: "your chosen artwork id",
after: ""
})
</script>


7. Enter Name: ArtPlacerButtons,
8. In Add Code to Pages select Choose Specific Pages and add the pages you wish the widget buttons to appear on (i.e. Product Page).
9. Place code in: Body – end.

It should look like this:


IMPORTANT

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 right bottom of your page.

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

You are all set!

Your website visitors are one click away from trying your art on their walls.
If you need further help installing the ArtPlacer Widgets into Wix, please contact us.