TABLE OF CONTENTS



In this guide we will revise the different parts of the widget generator step by step, so by the end of this guide you will have the widget code ready to insert on your website. 


Read: What are the ArtPlacer Widgets?


Where to generate the Widget?


1) You can generate your widgets codes on ArtPlacer's Widget generator, under the tab widget



2) You will then Click or tap on Create Widget, and start filling in the form


3) You will encounter the following form. You will need to start completing it step by step and selecting the corresponding option depending on how you want to customize your widget.




How to complete the Widget Generator form


Once you have found where the Widget Generator form is, you will be asked to complete a series of sections in order to create the code.



1) On the first step of the form you have to select the type of Widget you want to generate.


There are three different types of ArtPlacer Widgets:


Sample Room

Visitors to your site view the art in a Library Space you selected or in one of your Personal Spaces you have created in ArtPlacer.


Client Room

Visitors to your website upload and set an image of their own room.


Augmented Reality

The Augmented Reality Widget allows customers to visualize artworks through their device’s camera, straight on their walls as if the art was already hung on that spot.


This Widget redirects users to the ArtPlacer AR App (or takes them to the iOS App or Google Play Store for a free download). 



Courtesy of https://gallerywol75.com


2) Choosing an Integration Type:


It’s important you choose the proper integration type to embed the widget on your website. These types describe the processes used to access and display artworks with the ArtPlacer Widget. Artworks can be accessed directly from the ArtPlacer database or they can be accessed dynamically from wherever you specify.


Settings


Through the Widget Generator you can setup several settings described below which will give you flexibility when presenting your art to your website visitors.


Language

The Widget is currently available in English, Spanish, French, German, Arabic, Polish, Portuguese, Hebrew, Dutch and Italian.


 If you need a language that is not on this list, let us know.


Resizable Artwork

Whether the widget users can or cannot resize the artwork on the wall.


Frames

Whether or not to allow the widget users to choose frames.


More Artworks

Whether or not to display the Artworks button in your widget and let your visitors try out additional artworks. The options are the following:


Enabled

This option displays/hides the list of additional artworks in the widget window. (Note: the list is hidden by default.)


Disabled

This option doesn't display the list of additional artworks in the widget window. Your visitors will not be able to try out additional artworks while visualizing a specific one.


Enabled & Visible

This option displays/hides the list of additional artworks and the list is automatically displayed when the widget window is opened.


Collections

If More Artworks is enabled, you can specify collections to be displayed. Create artwork collections in the Artworks section of your ArtPlacer dashboard and enter them here. 


Button Style


You can style the widget buttons to make them stand out or match them the style of your website. You will find the options of Default, Custom or Thumbnail.



Text

ArtPlacer provides default texts for each of the buttons. These texts can be edited using the Widget Generator.


Default Style

This option will show the Background and the Border color in ArtPlacer Red and the text in white. The button's font will match your website's. (See example below)




Personalized


You can choose the background, text and border color of the widget buttons. 

To choose a color simply enter the HEX color or select it using the color picker. You can also customize the widget buttons through the use of CSS Classes.


Examples of personalized buttons:




Thumbnails

In addition to text, you can use images for your widget buttons. Use the chosen room image automatically or upload your own.



Multiple Widgets


You can combine multiple widgets and widget types in the same page to personalize user experience.



Different combinations, different options


Add a Sample Room widget, a Client Room widget, an Augmented Reality widget, or all of them. Add  a Library Space, a Personal Space, or both!


Customize your website by choosing which widgets you would like to display, how many of them, and add multiple possible scenarios, such as Living Room, Dining Room, or anything you can think of.



Courtesy of https://gallerywol75.com


Collections


The Widget can be set up so that it displays all your artworks or specific collections to your users while they are looking at a specific artwork, in a way that they can switch to other pieces of their interest.


Additionally, you can specify no collections at all and let them choose any one from your catalog as they open the widget.


Upload artworks and collections beforehand to your ArtPlacer dashboard.


Artwork in Place

When the Widget window is opened, the artwork is automatically displayed in the space. This option works great when the Widget is embedded on a product page and you want to focus on a single artwork. 


Courtesy of https://gallerywol75.com



Artwork in Place and Collection Slide Open


The artwork is automatically displayed in the space and a list of additional artworks appears on the right side. This option works wonderfully when the Widget is embedded on a product page and you want to let your potential client try additional artworks from that same collection. 


Courtesy of https://gallerywol75.com


No Artwork in Place and Collection Slide Open


With this option selected, no artworks will automatically be displayed in the space and a list of artworks will appear on the right side. This option is recommended when the Widget is embedded in a collection page or if you want to showcase a specific collection or collections to your website visitors. 




Other Settings


Frames

Your website visitors can select a frame from a preset list of available frames and try them out on the artworks.




Powered by ArtPlacer

The ArtPlacer brand displays at the bottom of the Widget window and can be hidden for all Premium users.



Languages


The Widget is currently available in English, Spanish, French, German, Arabic, Polish, Portuguese, Hebrew, Dutch and Italian.


If you would like to use a different language, please contact us! 



Code


In this section, we will teach you how to generate the code that is required to be embedded into your website to display the ArtPlacer Widgets.


Make sure you read the previous sections to understand which Widget Technology you need.


HTML

With the HTML integration two sets of code are required to be inserted into the website: The button code which is pure HTML and should be pasted in the exact spot where you want the widget button to show up and the script code which needs to be inserted to the footer of your page.


Dynamic Integration with HTML

Dynamic integration in HTML requires you to pass your artwork image URL to the artwork_url attribute and a height in inches to the height attribute. The URL should be fetched dynamically from a variable in your platform or framework, like in this WordPress / WooCommerce example below:



Notice the PHP code between quotes set to the artwork_url attribute.


Additionally, the size and price attributes can be provided for Client Room widgets with their dynamic values as well.


You can also pass fixed values to these attributes (artwork_url, height, size, and price) instead of using dynamic values from variables. This way you could perform Single Artwork integrations (non dynamic) without having to upload your artworks to ArtPlacer on beforehand.


Unfortunately, many widespread platforms such as Wix* and Squarespace do not provide means to access variables with dynamic values. For these platforms, the only way to perform a dynamic integration is using JavaScript.


* Due to its restrictive use of HTML custom elements, the ArtPlacer Widget cannot be used with HTML integration in Wix, regardless of the type of integration. Use JavaScript at all times.


JavaScript

When adding the ArtPlacer Widget through JavaScript you only need to generate, copy and paste a single piece of code into the footer of your website.


In order to specify where you want the widget button to appear in your page you need to use CSS selectors which require some minor programming skills. If you do not specify any CSS selectors the widget button will automatically appear on the bottom right of your page.


To specify the exact spot to place the widget button, you need to pass the CSS selector to the after attribute as in the example below:


The codes above indicates the ArtPlacer Widget to render the Widget Button into your website after the element with the class “add-to-cart“, within the element with the class “description” and inside the element with the class “main”. Please note this is just an example and the CSS selector needs to be adjusted to meet the particular element hierarchy in your page.


Dynamic Integration with JavaScript

Dynamic integration with JavaScript requires you to pass the artwork image URL to the artwork_url attribute. This URL should be fetched dynamically from an element in your page, using JavaScript. For example:


Attributes height (in inches), size, and price can be populated using the same method as shown below:



Once again, please note that the code above should match the particular structure of your page to work. Do not copy and paste this code as it will not work.


If you don’t have enough programming skills, or need help, please contact us.


All Set


You are ready to insert the ArtPlacer Widgets into your website.



For HTML

Insert the button code in the exact spot where you want to display it. You will need to be able to edit the HTML code of your website.


Additionally, insert the script code in the footer of your website. Depending on your platform, you may be able to do this in Settings, Tracking Codes, or Footer sections. Otherwise, you can insert this code right below the </body> tag.


For JS

In JS integration, you will only have a single snippet of code that needs to be added in the footer of your website. As for HTML, you should be able to do these in Settings, Tracking Codes, or Footer sections, depending on your platform.




The Integration Process


We have created a series of guides to help you on your Widget Installation process. Whether you have Squarespace, Wix, WooCommerce or  WordPress, or other platforms we have created a series of guided steps


You can find them here: Documentation on Widgets


Inserting Widgets into Shopify 

Inserting Widgets into Squarespace 

Inserting Widgets into Wix 

Inserting Widgets into WordPress (WooCommerce) 

Inserting Widgets into Other Platforms 


As well we have guides on customization: 



Grab a read at the Widget documentation to help yourself or your developer choose the proper integration method for your particular site and requirements.