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

Inserting Widgets into Wix

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

We recommend to read the instructions provided in the Widget Generator section of this manual 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.

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.

When installing the widget in a Wix website, the only available integration method is JS as HTML is not allowed.

Let’s get started.

Install 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 the Wix Editor for the site in which you’re installing your Widget. 

2. Click on the Settings menu on the left sidebar and then Custom Code under the Advanced tab.

1. Add ArtPlacer Script

1. Click + New Tool and select Custom.
2. Paste 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 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 + New Tool and select Custom.
2. Paste 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 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.

Add the ArtPlacer Widget Buttons

We are now ready to start adding widgets to your website.

There are two ways we can insert our widgets in your website. One is via Dynamic Integration and the other one is via Static Integration (ArtPlacer Artworks). While the process is the same for both methods, the data that will be added to the code changes in each case.

Static Integration

The static integration method is easier to achieve than the other method, and is recommended for most cases, specially if you are not intending to install the widget in a product page.

1. Get your widget code using the Widget Generator and make sure you choose the JS code integration method and ArtPlacer Artworks or Not Specified in the Artwork field. If you choose the former, make sure you have uploaded some artworks to your ArtPlacer Catalog and pick the one you would like to display in your widget.

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

3. Click + New Tool, and select Custom.
4. Paste the JS widget 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 own code using the Widget Generator

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

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

Your code should look like this:

6. Click Apply

ALTERNATIVE

You can also set up a specific artwork URL instead of choosing one of your uploaded artworks. For that, you will need to set the artwork_url and the height attributes in your code instead of the artwork attribute with the id. The height must be in inches. It would look something like this:

<script type="application/javascript">
ArtPlacer.insert({
	gallery: "some gallery id",
        space: "some space id",
	default_style: "true",
	type: "2",
 	artwork_url: "http://www.mywebsite.com/artworks/my-favorite-artwork.jpg",
        height: "35",
        after: ""
})
</script>

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

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

Dynamic Integration

The Dynamic Integration is the recommended method for displaying widgets in your product page, specially 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.

To install widgets with Dynamic Integration, repeat the process for the Static Integration method, but choose Dynamic in the Artwork field of your Widget Generator. The code should look something like this (do not copy this, it will not work):

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

You are all set!

Start enjoying ArtPlacer’s functionalities within your website!

Conclusion

Installing the ArtPlacer Widgets in Wix might be challenging. Serve yourself some coffee and take a few moments to follow up this tutorial thoroughly and you will get the widget up and running before you even notice!

If you need further help installing the ArtPlacer Widgets into Wix, please contact us.

Was this article helpful to you? Yes No