TABLE OF CONTENTS

• Where can I create Widgets?
• How to complete the Widget Generator form
• Settings
• Button Style
• Multiple Widgets
• Collections
• Other Settings
• Code
• The Integration Process

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 can I create Widgets?

1) You can create your widgets on ArtPlacer's Widgets section.
You will need to start completing it step by step and selecting the corresponding option depending on how you want to customize each widget. 

2) Type of widget

First, select what type of widget you wish to create. 

There are three different types of ArtPlacer Widgets:

Courtesy of https://gallerywol75.com

Sample Room

Your website visitors will visualize the art in a Library Space you selected or in one of your Personal Spaces you have previously uploaded to ArtPlacer.

Client Room

Your website visitors will upload and 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).

3) Button Style

Text

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.