In this section we will teach you how to generate the code that is required to be embedded into your website to invoke and display the ArtPlacer Widget.
There are two different types of code integration methodologies: HTML and JS. Both of these types can work with different platforms and the final outcome will be the same. However, some platforms are more restrictive than others when adding third party widgets so working with the correct one is key to insure a successful integration. With platforms that are less restrictive and allow both types of integrations you may choose the one you prefer to work with.
The two Dynamic Integration types are described below.
The HTML code is the universal type of coding language that web pages rely on to render themselves. The ArtPlacer Widget can be generated as HTML code.
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 your want the widget button to show up and the script code which needs to be inserted to the footer of your page.
If you have a small knowledge of HTML and your platform allows you to edit the HTML code of your website, this is a great option. However, keep in mind that there may be additional things to consider when planning a Dynamic Integration.
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
price attributes can be provided for Client Room widgets with their dynamic values as well.
You can also pass fixed values to these attributes (
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 JS.
* 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 JS at all times.
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 JS
Dynamic integration with JS requires you to pass the artwork image URL to the
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.