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