Table of Contents

• Client Room Widget on Product-page (dynamic integration)
• Client Room Widget for Non-Product pages (static integration)

Client Room Widget on Product-page (dynamic integration):

To begin, log in to your Dashboard and select WIDGET from the top bar menu options:

1. Choose Type section:

1. 2. Select the platform or the structure your website is build on.

1. 3. Under WHAT TYPE OF WIDGET DO YOU WANT TO INTEGRATE?, select Client Room.

1. 4. Under WHERE DO YOU WANT TO PLACE YOUR WIDGET?, select Product Page:

1. 5. Click NEXT in the bottom right corner.

2. The Widget Settings section:

• Language: Select the language you want the widget to display.
  
  
• Artwork Visibility: As you are configuring this widget for a product page, the Artwork from your website option is enabled by default.
  
  
• Resizable Artwork: Enable the toggle to allow visitors to resize the artwork on the widget's image wall. 
  
  
• Frames Button: Enable the toggle to show the frames option. When enabled, visitors can select a frame from a preset list of available frames and try them on an artwork. 
  
  
• Artwork Rotation: Enable the toggle to allow visitors to rotate the artwork.
  
  
• Catalog Sidebar: Enable this option to display the entire ArtPlacer Catalog of artworks or only specific collections. When enabled, additional settings become available: select whether you want the Catalog Sidebar to open automatically, and set the collections you want to display. 

Note: For the catalog to show, you first need to upload artworks to the Artworks Section.

• Product Sample Image: If the product has multiple sample images, choose the position of the image you want to display.
  
  
• Size Unit: Select the unit of measurement for the artworks and spaces.
  
  

Note: Depending on the platform selected, the Size Unit setting might not be available.

• Dimensions Standard: Select how the dimensions of the artwork will be displayed.

2.2 Click NEXT.

Scroll down and continue reading from "3. Button Style section:"

Client Room Widget for Non-Product pages (static integration):

To begin, log in to your Dashboard and select WIDGET from the top bar menu options:

1. Choose Type section:

1. 2. Select the platform or the structure your website is build on.

1. 3. Under WHAT TYPE OF WIDGET DO YOU WANT TO INTEGRATE?, select Client Room.

1. 4.  Under WHERE DO YOU WANT TO PLACE YOUR WIDGET?, select Non-Product page:

1. 5.  Click NEXT.

2. The Widget Settings section:

• Language: Select the language you want the widget to display. 
• Artwork Visibility: Select how you want to display artworks in the widget.
  • Artwork from ArtPlacer: Select this option to display a specific artwork. Click Select Artwork to choose an artwork from your ArtPlacer catalog. 
  • ArtPlacer Catalog: Select this option to display a sidebar with all the artworks from your ArtPlacer catalog or selected collections.

Note: To be able to select artworks, you first need to upload them to the Artworks Section.

• Resizable Artwork: Enable the toggle to allow visitors to resize the artwork on the widget's image wall. 
• Frames Button: Enable the toggle to show the frames option. When enabled, visitors can select a frame from a preset list of available frames and try them on an artwork.  
• Artwork Rotation: Enable the toggle to allow visitors to rotate the artwork.
• Catalog Sidebar: Enable this option to display the entire ArtPlacer Catalog of artworks or only specific collections. When enabled, additional settings become available: select whether you want the Catalog Sidebar to open automatically, and set the collections you want to display.

Note: For the catalog to show, you first need to upload your artwork to the Artworks Section.

• Product Sample Image: If the product has multiple sample images, choose the position of the image you want to display.
• Size Unit: Select the unit of measurement for the artworks and spaces.

Note: Depending on the platform selected, the Size Unit setting might not be available.

• Dimensions Standard: Select how the dimensions of the artwork will be displayed.

2.2. Click NEXT.

3. Button Style section:

• Text: Type the text that will be displayed on the widget button.

• Style: Select a style for your widget button.

  • Default: This is ArtPlacer’s default style option. A red button with white letters in a font style that matches your website’s. On the Width field, select Auto to adjust automatically the button’s width to the text width, or Full Width to adjust the button’s width to the size of the widget’s container. 

  • Custom: Choose the color of your widget's background, font, and border. On the Width field, select Auto to adjust the button’s width to the text width, or select Full Width to adjust the button’s width to the size of the widget’s container.  

  • Thumbnail: Upload an image to display as a button and configure the width and height.

  • CSS Class Name: Use CSS classes to customize the widget button. On the CSS Class Name field, type the CSS class name used on your website. 

• Button Position: Select the position you want the button to load.

Note: Depending on the platform selected, the options to customize buttons might differ.

3.2. Click NEXT.

4. The Code section:

In this section, depending on the website platform/structure that was selected, the platform will show the instructions to be followed after copying the Widget Script and Button codes generated (if necessary).

Select the platform/structure your website is build to learn the following steps:

• Shopify
• WordPress (WooCommerce)
• Squarespace
• Wix
• Others