1. Home
  2. Docs
  3. Documentation
  4. Widget Generator
  5. Code

Code

In this section, we will teach you how to generate the code that is required to be embedded into your website to display the ArtPlacer Widgets.

Make sure you read the previous sections to understand which Widget Technology you need.

HTML

With the HTML integration two sets of code are required to be inserted into the website: The button code which is pure HTML and should be pasted in the exact spot where you want the widget button to show up and the script code which needs to be inserted to the footer of your page.

Dynamic Integration with HTML

Dynamic integration in HTML requires you to pass your artwork image URL to the artwork_url attribute and a height in inches to the height attribute. The URL should be fetched dynamically from a variable in your platform or framework, like in this WordPress / WooCommerce example below:

<artplacer gallery="GALLERY_ID" 
default_style="true" 
type="2" 
space="11111" 
artwork_url="<?php echo wp_get_attachment_url($_product->get_image_id());?>" price="" 
size="" 
height="30">
</artplacer>

Notice the PHP code between quotes set to the artwork_url attribute.

Additionally, the size and price attributes can be provided for Client Room widgets with their dynamic values as well.

You can also pass fixed values to these attributes (artwork_url, height, size, and price) instead of using dynamic values from variables. This way you could perform Single Artwork integrations (non dynamic) without having to upload your artworks to ArtPlacer on beforehand.

Unfortunately, many widespread platforms such as Wix* and Squarespace do not provide means to access variables with dynamic values. For these platforms, the only way to perform a dynamic integration is using JavaScript.

* Due to its restrictive use of HTML custom elements, the ArtPlacer Widget cannot be used with HTML integration in Wix, regardless of the type of integration. Use JavaScript at all times.

JavaScript

When adding the ArtPlacer Widget through JavaScript you only need to generate, copy and paste a single piece of code into the footer of your website.

In order to specify where you want the widget button to appear in your page you need to use CSS selectors which require some minor programming skills. If you do not specify any CSS selectors the widget button will automatically appear on the bottom right of your page.

To specify the exact spot to place the widget button, you need to pass the CSS selector to the after attribute as in the example below:

after: '.main .description .add-to-cart'

The codes above indicates the ArtPlacer Widget to render the Widget Button into your website after the element with the class “add-to-cart“, within the element with the class “description” and inside the element with the class “main”. Please note this is just an example and the CSS selector needs to be adjusted to meet the particular element hierarchy in your page.

Dynamic Integration with JavaScript

Dynamic integration with JavaScript requires you to pass the artwork image URL to the artwork_url attribute. This URL should be fetched dynamically from an element in your page, using JavaScript. For example:

artwork_url: document.querySelector('.featured-image img').src

Attributes height (in inches), size, and price can be populated using the same method as shown below:

height: document.querySelector('.description .height').textContent,

size: document.querySelector('.description .size').textContent,

price: document.querySelector('.description .price').textContent

Once again, please note that the code above should match the particular structure of your page to work. Do not copy and paste this code as it will not work.

If you don’t have enough programming skills, or need help, please contact us.

Was this article helpful to you? Yes 1 No