How to Configure a Sample Room Widget for a Product Page

Modified on Tue, 06 Feb 2024 at 11:02 AM

The Sample Room Widget allows visitors to your website to visualize your artwork in a room mockup you select. To configure this functionality for your website, you need to:

  1. Create the Sample Room Widget with ArtPlacer’s widget generator.

  2. Add the code provided by the widget generator to your website. 

Note: To use the ArtPlacer Widget tool, you need Advanced or Premium plan subscriptions.

Create the Sample Room Widget 

  1. Click Widget on the top header or select the Widget dashlet on the home dashboard. 

  2. Select the platform or structure where you want to add the widget.


  4. Select Product Page under WHERE DO YOU WANT TO PLACE YOUR WIDGET?

  5. Click NEXT.

  6. On the Sample Room Widget Settings page, configure the following settings:

  • Language: Select the language you want the widget to display.

  • Space: Click Select Space to choose a space from the Room Mockups or the Personal Spaces Section. This is the space that the widget will show for visitors to visualize your artwork in.  

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

  1. Click NEXT.

  2. On the CUSTOMIZE BUTTON page, configure the following settings:

  • 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 location of the button.

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

  1. Click NEXT.

  2. The Code page shows instructions for copying and pasting the code into your website. Depending on your website’s platform, you might need to paste:

  • The Button Code

  • The Script and Button Codes

Copy and save the code to paste on your website later. To see the code, click See Code.

Add the Code to Your Website

Depending on the platform used for your website, there are different configuration steps you need to follow to add the code. In the list below, you can find the links to the corresponding set of instructions for each:

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article