TABLE OF CONTENTS

This documentation is intended for non-mainstream platforms, as well as for custom sites. We highly recommend reading the step-by-step full guide to understand some of the vocabulary here named.



If your website was built using Shopify, Wix, Squarespace or WooCommerce, read the article corresponding to your platform.


Note: 
If you undergo a theme change or visual changes in your website, we suggest removing the ArtPlacer widgets and reinstalling them. 
Before doing so, copy your widgets' codes and paste them somewhere safe in case you need them again.


Initial Considerations


WIDGET GENERATOR GENERATED CODE


You can create an HTML code or a JavaScript type of code. 


HTML

Insert the button code in the exact spot where you want to display it. You will need to be able to edit the HTML code of your website.


Additionally, insert the script code in the footer of your website. Depending on your platform, you may be able to do this in Settings, Tracking Codes, or Footer sections. Otherwise, you can insert this code right below the </body> tag.




JavaScript

In JS integration, you will only have a single snippet of code that needs to be added in the footer of your website. As for HTML, you should be able to do these in Settings, Tracking Codes, or Footer sections, depending on your platform.


Step by Step Guide

Artworks from your website (recommended for e-commerce stores with Product Pages)


This method is recommended when you have a large catalog and editing every artwork would be too tedious. Using this method will ensure that your page’s catalog is in sync with the widget at all times, as you won’t have to load any artwork data into the ArtPlacer Dashboard, rather the data will be pulled dynamically from the product page itself.


While Dynamic Integration can be carried out with any technology (JavaScript or HTML), in this tutorial we will focus on JavaScript as it’s the most flexible and adaptable method.



Important 
Depending on the capabilities of your platform, you may need programming skills to accomplish this integration.



Note: Changing the data in Product Pages will change the data retrieved by the widget. 



1. Get your widget code using the Widget Generator and make sure you choose "Artwork from your website" in step 3.





2. Then copy the Javascript code generated in step 4.




3. In your Platform locate the section for custom code injection. If you’re on a custom site, you’ll simply need to add the JavaScript code in the Product Page Template.



4. Ensure the code is run on Product Pages only, to prevent the widget from being displayed in pages where it is not meant to appear.


Note: There may be cases where some platforms won’t allow you to enter custom code in specific pages. For those cases, you’ll need to add additional logic.



For example:

If your platform does not support code injection on some pages only, rather on all pages every time, but your Product Pages URL always contains /products/ in the path you could do the Widget Insertion conditionally like so:


if(window.location.href.includes('/product/')) {

    // We're currently in a product page

    // Code to insert the Widgets should be put here.

}


1. Generate your code snippets using ArtPlacer’s Widget Generator and paste it into the platform code editor/page template code:



<script src="//widget.artplacer.com/js/script.js"></script>

<script type="application/javascript">

ArtPlacer.insert({

    gallery: "1",

    default_style: "true",

    type: "2",

    artwork_url: "dynamic url here",

    height: "dynamic height here",

    text: "Button Text here",

space: "14392", 

    after: 'CSS Selector for element after which button should be placed'})

</script>


Note: If you want to add more than one widget you can just put all the ArtPlacer.insert calls one below the other (without repeating the insertion of the ArtPlacer Script) as such:


<script src="//widget.artplacer.com/js/script.js"></script>

<script type="application/javascript">


    // Code to insert the Client Room Widget

ArtPlacer.insert({

    gallery: "1",

    default_style: "true",

    type: "1",

    artwork_url: "dynamic url here",

    height: "dynamic height here",

    text: "Button Text here",

    size: "dynamic size here",

    price: "dynamic price here",

title: "dynamic title here",

    after: 'CSS Selector for element after which button should be placed'})


// Code to insert the Sample Room Widget

ArtPlacer.insert({

    gallery: "1",

    default_style: "true",

    type: "2",

    artwork_url: "dynamic url here",

    height: "dynamic height here",

    text: "Button Text here",

space: "14392", 

    after: 'CSS Selector for element after which button should be placed'})


    // Code to insert the AR Widget

ArtPlacer.insert({

    gallery: "1",

    default_style: "true",

    type: "3",

    artwork_url: "dynamic url here",

height: "dynamic height here",

    text: "Button Text here",

    artist: "dynamic artist name here",

title: "dynamic title here",

    after: 'CSS Selector for element after which button should be placed'})


</script>



Important Note: Make sure you’re copying the code generated by the Widget Generator and not copy/pasting code from this page as it will not work.


     1. Replace Dynamic Values and Configuration in the code with the corresponding CSS Selectors that will target the elements in the page that holds the necessary data.


Example:

Let’s say our (very minimal) product page’s HTML looks like this:


<!DOCTYPE html>

<html lang="en">

<head>

   <title>My Product page</title>

</head>

<body>

   <div class="float-left">

       <h1 class="product-title">Scream</h1>

       <h2 class="artist-name">Edvard Munch</h2>

       <img class="product-image"

           src="https://picsum.photos/200/300"

           alt="" />

   </div>

   <div class="float-right">

       <h3 class="artwork-size">91 cm × 73.5 cm (36 in × 28.9 in)</h3>

       <h3 class="product-price">$1,000,000</h3>

       <button class="buy-btn">Buy!</button>

   </div>

 

</body>

</html>


Then our three widgets final code would look like this:


<script src="//widget.artplacer.com/js/script.js"></script>

<script type="application/javascript">

       // We don't have a height, however we have the full size, we could do some

       // String manipulation to get the Height, like so:

           // 1. Get the Size element

           // 2. Split it's innerText property on every space or " "

           // 3. Get the first of those, as it is the height.

       var height = document.querySelector(".product-size").innerText.split(" ")[0];

       // Code to insert the Client Room Widget

       ArtPlacer.insert({

           gallery: "1",

           default_style: "true",

           type: "1",

           artwork_url: ".product-image",

           height: height, // Here we provide the JS variable as we don't have a Selector that targets height only

           text: "View in a picture of your room",

           size: ".artwork-size",

           price: ".product-price",

           title: ".product-title",

           after: '.buy-btn' // We want our Widget Button to appear after the buy button, if no selector provided, it will float in the bottom right.

       });

      

       // Code to insert the Sample Room Widget

       ArtPlacer.insert({

           gallery: "1",

           default_style: "true",

           type: "2",

           artwork_url: ".product-image",

           height: height,

           text: "View in a predefined space",

           space: "14392",

           after: '.buy-btn'})

      

       // Code to insert the AR Widget

       ArtPlacer.insert({

           gallery: "1",

           default_style: "true",

           type: "3",

           artwork_url: ".product-image",

           height: height,

           text: "View with AR (mobile)",

           artist: ".artist-name",

           title: ".product-title",

           after: '.buy-btn'})

      

</script>


If you want to learn more about CSS Selectors, please check this out.


HTML Static Integration (recommended for Dedicated Pages)


In this example we will integrate the ArtPlacer Widgets to a Dedicated Page using the HTML method.


While the Static Integration can be carried out with any technology (JavaScript or HTML), in this tutorial we will focus on HTML as it’s the easiest method for this kind of integration.


In Dedicated Pages you will want to install widgets that will display either specific artworks, artwork collections or your entire catalog (previously uploaded to your ArtPlacer Dashboard).




Specific Artworks (recommended for small catalogs)

Get your widget code using the Widget Generator.


1. Make sure you choose "Artwork from ArtPlacer" in the step 3 of the Widget Generator.


2. Select the Artwork you want to display and add the necessary data.



3. Login to your website admin, and head to your site’s custom code section (if it’s not on a platform, adding custom HTML & CSS will suffice)


4. Copy the "Script Button" generated in step 4 in the Widget Generator.


Paste this script on your site’s footer: <script src=”//widget.artplacer.com/js/script.js”></script>


5. Select the page where you want to insert the ArtPlacer Widget and copy the "button code" generated in the step 4 of the Widget generator.


6. Then paste the code you created with the Widget Generator wherever you’d like the Widget Button to appear. 

It will look something like this:


 <artplacer gallery="1" type="2" text="try in your room" artwork="13872" space="156"></artplacer>


 Do not copy it from here, it won’t work.


Entire Catalog / Artwork Collections

Get your widget code using the Widget Generator.


1. Make sure you choose "ArtPlacer Catalog" in the step 3 of the Widget Generator. 


2. If you don’t specify any collection, your entire ArtPlacer Catalog will be available in the Widget. 
You can specify any number of collections.




3. Login to your website admin, and head to your site’s custom code section (if it’s not on a platform, adding custom HTML & CSS will suffice)


4. Copy the "Script Button" generated in step 4 in the Widget Generator. 


Paste this script on your site’s footer: <script src=”//widget.artplacer.com/js/script.js”></script>


5. Select the page where you want to insert the ArtPlacer Widget and copy the "button code" generated in the step 4 of the Widget generator.

6. Then paste the code you created with the Widget Generator wherever you’d like the Widget Button to appear. 

It will look something like this:



 

 <artplacer gallery="1" type="2" text="try in your room" artwork="13872" space="156"></artplacer>


Do not copy it from here, it won’t work.


Example:

Let’s say we want to include a widget with Three Collections on our website’s About page. Suppose the HTML looks like this:


<!DOCTYPE html>

<html lang="en">

<head>

   <title>About Our Gallery</title>

</head>

<body>

   <h1>Our Gallery</h1>

   <h2>About Us</h2>

   <p>Our Gallery was founded in 1936 by Thomas Galleryowner.</p>

   <h2>Our Art</h2>

   We have over 1000 expressionist art paintings on sale.

   <h2>Try some in a room!</h2>

   <p>By using ArtPlacer, you can test how the art would look like in your house.</p>

</body>

</html>



Then our edited page with the ArtPlacer Widget Button and Script displaying some of our collections would look like:


<!DOCTYPE html>

<html lang="en">

<head>

   <title>About Our Gallery</title>

</head>

<body>

   <h1>Our Gallery</h1>

   <h2>About Us</h2>

   <p>Our Gallery was founded in 1936 by Thomas Galleryowner.</p>

   <h2>Our Art</h2>

   We have over 1000 expressionist art paintings on sale.

   <h2>Try some in a room!</h2>

   <p>By using ArtPlacer, you can test how the art would look like in your house. Click the button below!</p>

   <artplacer gallery="1" default_style="true" type="1" collection="abstract,art &amp; fun"></artplacer>

 

   <script src="//widget.artplacer.com/js/script.js"></script>

</body>

</html>


Happy embedding! If you need assistance, contact us.