Introduction
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 is an ArtPlacer Widget?
The types of Widget
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 Room Mockup 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.
Generating the Widget Code
1. To begin, log into your account and head up to the Widget section (top menu bar):
2. Select the type of Widget you´d like to implement on your website and click 'Next':
On this Guide we will use the 'Sample Room' type as an example:
3. On the 'Text' field, type in the wording that you want for the Widget button
For E.g.,'VIEW IN A ROOM, LIVING ROOM, BEDROOM, etc.'
The Widget button style
Style the Widget buttons to make them stand out or match with the overall style of your website
You will see the visual reference of how it will look like, on the right side of the form.
4. Select the style from the Default drop down options:
Default: This option will lock the button background color to be red (only) and the font color to be white.
The font family will be automatically detected, and set to match your website's visual interface.
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 Room Mockup 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 Room Mockups, 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 Room Mockup, 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.