Widget

Generating ArtPlacer Widgets

Artplacer Admin
by on May 6, 2020

In this brief tutorial we will cover how to generate the ArtPlacer Widget code, so that we can insert it and integrate it with any platform. We will generate a plain HTML code that will be compatible with almost any platform available out there.

Before we begin, please make sure you understand what different types of widgets there are and what you need to make them work.

Single Artwork vs Dynamic Integration

There are 2 ways to generate a widget for an artwork in your catalog.

Single Artwork

With Single Artwork integration, you must upload your artwork to ArtPlacer first, and then choose it from your artworks list when generating the widget code.

This type of integration allows you to use the artworks you already uploaded to ArtPlacer. The Widget Generator will include the ArtPlacer artwork ID for you, and you don’t need to worry on specifying the artwork height, as it will be fetched automatically from your ArtPlacer catalog.

This kind of integration is very easy and straight forward as it only involves copying and pasting the widget code. On the other hand, it may not be recommended for large catalogs as you will be forced to: 1) Upload all your artworks on beforehand to ArtPlacer and, 2) Insert the widget code for each of the artworks you would like to display the widget for.

Dynamic Integration

With Dynamic Integration, you set the artwork image URL you want to preview into the widget code. This way, you won’t need to upload your artworks to ArtPlacer on beforehand, in order to preview them with the ArtPlacer Widget. Additionally – and here resides the power of the Dynamic Integration – you can automatically pass the image URL of the artwork you are looking at to the widget. This way, you don’t need to insert the widget code for every artwork. You will be able to insert the ArtPlacer Widget only once and use it with any number of different artworks, seamlessly.

The way to assign the image URL of the artwork you are looking at (dynamic integration) strictly depends on the CMS or platform your website is built on (ex: WordPress, Shopify, Squarespace, custom code, etc) and may require some degree of programming.

In these kinds of integrations, it’s also mandatory to include the height of the artwork, since the widget won’t be able to fetch it automatically from your ArtPlacer catalog.

Additionally, you can always pass a fixed or hardcoded URL into this attribute, and it will work as well, though with a fixed URL you would still have to insert the widget specifically for each artwork.

Generating a Sample Room

1. Log in to ArtPlacer.

2. Go to the Library Spaces section and choose the sample room you’d like to preview art on. Click on the Generate Widget Icon on the top right corner of the thumbnail of the space to “widgetize”. Also, you can go the Widget section and click on Create new Widget button.

3. The Widget Generator will open.

Choose the space you want to show your artwork at (in case it’s not already selected) and select the type of integration: Single Artwork or Dynamic Integration. Select an artwork from your catalog in case you chose the former.

4. Complete the rest of the options. Please, check out this quick guide below.

5. You are done! The widget code is ready.

Paste the widget code into your page template, and the script tag in the footer, right before the </body> tag.

Generating a Client Room

1. Log in to ArtPlacer.

2. Go to the Widget section and click on the Create new Widget button.

3. The Widget Generator will open.

Client Room will automatically be selected (select it if it isn’t). Choose the type of integration: Single Artwork or Dynamic Integration. Select an artwork from your catalog in case you chose the former.

4. Complete the rest of the options. Please, check out this quick guide below.

5. You are done! The widget code is ready.

Paste the widget code into your page template, and the script tag in the footer, right before the </body> tag.

Widget Options

Below you will find a list of the available widget options. With these, you can shape your widget the way you want and provide it with different specifications regarding look, functionality, and behavior.

Sample Room Attributes

Space (required): The space you will display your artwork on. You can choose from your personal spaces or from one of the Library Spaces ArtPlacer provides. Choose it from the list or type the name of the desired space. Once selected, it will be displayed as a numeric ID in your widget code.

Client Room Attributes

Price (optional): The price of the artwork in display, for informational purposes.

Size (optional): The size of the artwork in display, for informational purposes.

General Attributes

Artwork: Only for Single Artwork integration. Choose the artwork to preview in your widget.

Artwork URL: Only for Dynamic Integration. It should the URL of the artwork image to visualize in your widget.

* Tip: If you provide no artwork at all, the widget will not place any artworks on any wall, and will present the user with the ArtPlacer catalog automatically to choose an artwork from.

Height: The height of the artwork in inches. The widget will use this value to scale the artwork relative to the walls. This is required if you are using Dynamic Integration, and optional if you are using Single Artwork integration.

Artwork Resizable: Whether or not the size of the artworks can be modified by the user “on the fly”. Resize is done by dragging the artwork corner handles. Default is yes.

Text: Text to be displayed on your widget buttons. Defaults to “Try in your room” for Client Room and “View in a room” for Sample Room.

CSS Class Name: CSS class to shape and style the ArtPlacer widget buttons. If not set, it will default to the style of the <button> tag in your website.

Language: Language of the widget. Defaults to English.

Show Frames: Whether or not to enable Frame selection in your widget. Default is yes.

Show Catalog: Whether to allow users to try alternative artworks. If enabled, will fetch artworks from your ArtPlacer catalog and show them on a side slide. Users can add multiple artworks to the space besides the one prefetched. Defaults is yes.

Collection: Enter the name of the collection you want to display as alternative artworks. Only available if Show Catalog is enabled. If not set, all public artworks are displayed.

Conclusion

The ArtPlacer Widget provides plenty of different options to leverage integration with multiple platforms and meet different behavior requirements.

It can be very powerful when integrated dynamically with your catalog, and very easy to install for non tech-savvy users when integrated on Single Artwork integration.

Additionally, it can be very useful for different types of pages when no artworks are specified, as it lets clients intuitively play with all your artworks and choose the combination they like better.

There are several ways to use the ArtPlacer Widgets. Be creative and find yours!

If you have any questions, or need additional help to integrate the ArtPlacer Widgets into your website, please contact us.

Blog

Leave a Reply

Your email address will not be published. Required fields are marked *