TABLE OF CONTENTS



On this article we will cover each step on how to generate the code required to implement an ArtPlacer Widget on your website.


Read: What are the ArtPlacer Widgets?




1) Head up to our Widget Generator by clicking on 'WIDGET' from the top menu options:





2) Select the type of Widget you´d like to be implemented on your website:





These are the available type of widget at the moment:



Courtesy of https://gallerywol75.com



Sample Room:  Thought to give your website visitors the possibility to preview how an Artwork may look prior to purchase on a pre-selected Library or Personal Space wall.


Client Room: Thought to give your website visitors the possibility to preview how an Artwork may look prior to purchase on Space of their own. The widget will prompt the visitor to upload a picture of the wall they'd like to preview your Artwork on.


Augmented Reality: Thought to give your website visitors the possibility to preview how an Artwork may look prior to purchase on Space of their own using their mobile device integrated camera thanks to the AR technology.




3) Establish how you want the Widget buttons to look prior to being implemented on your website:



Type into the 'Text' field the wording you'd like the button to have. For example: If you'd like to implement a Sample Room Widget, you could type in "Try on a Living Room".


ArtPlacer provides default text for each of the buttons. This text can be edited on the first step.

Leave this field blank to show the default text, or type in the text you want your button to read.


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

You will see the visual reference of how it will look like, on the right side of the form.


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. 



Custom


You can choose the background, text, and border color of the widget buttons. You will see this reflected on the right side as a preview of how the button will look.



CSS Class Name

You can also customize the widget buttons through the use of CSS Classes. You may type the CSS Class Name used on your website. Bear in mind, this option won't show a preview of the button.



Important note about Class Names

Keep in mind that if you change your website's theme, this could result in style changes, hence possibly affecting our Widget Buttons. We recommend performing a back-up of the class names CSS Styles prior to making any changes to your theme or website's style.




Thumbnails


In addition to text, you can use images for your widget buttons. Use the Library Space thumbnail (it will automatically detect the space you select on step 3) or upload your own image (of whatever you prefer: this could be a special button image, or something else).




You will simply need to upload the image and set the width and height of the button displyed. 






4)  SETTINGS:


For Client Room and Sample Room Widgets, the settings page has a similar procedure. 

For AR Widget, the settings have slightly different instructions that can be found later on this article. 


Language

Select the language in which you want the widget to be displayed. 

It is currently available in English, Spanish, French, Italian, German, Arabic, Polish, Portuguese, Hebrew, Dutch, Norwegian (Beta). If you need a language that is not on this list, let us know.


If you have chosen the Sample Room Widget, you will now need to select a Space from our Library, or one that you've uploaded.



TYPES OF INTEGRATION


Artwork visibility
There are three options: Artwork from your website, Artwork from ArtPlacer, or ArtPlacer Catalog.




It’s important you select 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 your site. The following are the options you will find: 


Artwork from your website



The widget automatically detects your product page's artwork. This means that you will need to have a product page on your site, and the widget will bring up the artwork's image and information from it. 







ArtPlacer Single Artwork




For this type, you will need to have uploaded your artworks to ArtPlacer. Recommended for small catalogs or collections.


If you have selected the Artwork from ArtPlacer, bear in mind that it allows you to select just one of your artworks previously uploaded to the Artworks section of your ArtPlacer Dashboard. If you wish to show more than one artwork, you will need to choose a different widget type, or create a widget for each piece.


The widget will be showcasing a specific artwork from your Artworks Section in ArtPlacer.





ArtPlacer Catalog




This option will not show a specific art piece. Rather, it will open a sidebar containing all the artworks on your ArtPlacer catalog or selected collections from it. This allows your potential customers to browse through your collection or catalog, and trying out your art in a room, in one single widget. 






Other settings


The following setting options work by setting the toggle button on (green) or off (gray)



Resizable Artwork

Enable this option to allow visitors to resize the artwork on the widget's wall. Disable it if you don't want visitors to be able to alter the size of the artwork.


Frames 

Enable this options for to show frames. If this option is activated, your website visitors can select a frame from a preset list of available frames and try them out on the artworks. The frame option will show in the top right corner of the widget.


Artwork Rotation

Enable this option to allow visitors to rotate the artwork on the widget's wall. 


Catalog Sidebar


To be able to enable your catalog, you'll first need to upload artworks to your ArtPlacer dashboard.

Enable this option to show your entire ArtPlacer Catalog (or specific collections) to be displayed. 

Create artwork collections in the Artworks section of your ArtPlacer dashboard and enter them in 'collections'.


Courtesy of https://gallerywol75.com


5) AR WIDGET


For the AR Widget all steps are similar except for the settings section. In the settings section you will find the selection for the Artwork Visibility.  This can be either Artwork from your website or Artwork from ArtPlacer. 


Artwork from your website

This option will display your product page's artwork. It will automatically detect it from your site.


Artwork from ArtPlacer

This option will prompt you to select an artwork from your ArtPlacer Catalog will open up. Select the artwork and see the preview on the right side of the widget generator. 


6) CODE


You are ready to insert the ArtPlacer Widgets into your website. Click or tap on the logo, to go to the article on how to integrate to the specific platform:




If you need additional information on widgets, grab a read at the Widget documentation to help yourself or your developer choose the proper integration method for your particular site and requirements.



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.