Install the visualizer on your website

Install in four steps

1. Make a publishable key

   In Settings → Developers, make a key and choose Publishable key. List every website the visualizer will appear on. See Make a key.

2. Set it up

   In the visualizer section of the same page, choose what shoppers can try, add your button, set your limits and switch it on. See Visualizer settings and limits.

3. Add the script tag

   Paste the tag where the visualizer should appear, with your publishable key in data-key:

   HTMLCopy

   <script
     src="https://www.skipshoot.com/embed.js"
     data-key="pk_live_…"
     async
   ></script>

4. Check it

   Open the page on one of the websites you listed, upload a room picture and make a picture. Each picture is 1 credit.

Allowed websites

The visualizer opens only on a website listed on its key, matched exactly: https://www.example.com and https://shop.example.com are two entries. Anywhere else it says it is not available. Because of that, the publishable key is safe in your HTML: copied to another site, it does nothing.

A key’s websites cannot be edited later. To add one, make a new key with the full list, swap it into your pages, then revoke the old key. See the rules for website addresses.

Script attributes

On a product page

Open the visualizer with the page’s own product already chosen, so shoppers try what they are looking at:

<script
  src="https://www.skipshoot.com/embed.js"
  data-key="pk_live_…"
  data-product="4410"
  async
></script>

<script
  src="https://www.skipshoot.com/embed.js"
  data-key="pk_live_…"
  data-color="#4A78B8"
  async
></script>

• Product ids come from List all products.
• The product or color must be one the visualizer offers. One it does not offer is ignored, and shoppers choose from the rest.
• The choice is made once the shopper’s room is ready, and they can change it.

Placement and size

• The visualizer fills the width of the element it sits in.
• It starts 420 pixels tall and grows to fit what the shopper sees, so there is no inner scroll bar.
• It loads only when it comes near the screen.
• To place it somewhere other than where the tag is, give an element an id and name it in data-target:

<div id="see-it-in-your-room"></div>

<script
  src="https://www.skipshoot.com/embed.js"
  data-key="pk_live_…"
  data-target="see-it-in-your-room"
  async
></script>

Several tags on one page work independently, but each is a separate visit for the shopper. One visualizer per page is usually best.

Site builders and platforms

The visualizer works anywhere you can add your own HTML to a page: custom storefronts, and the “custom code”, “HTML” or “embed” block most site builders and commerce platforms offer. A few things to check:

• The block must allow a <script> tag. Some builders only allow scripts in a site-wide “header” or “footer” code setting; put a <div id="…"> where the visualizer should appear and point data-target at it.
• On a product template, fill data-product from your own SKU-to-id mapping, so each product page opens with its own product.
• List the exact website address your storefront serves pages from, including any separate shop subdomain where the visualizer appears.

Content Security Policy

If your site sends a Content Security Policy, allow Skip Shoot as a script source and a frame source:

script-src https://www.skipshoot.com;
frame-src https://www.skipshoot.com;

Test before you launch

• To try it on your own computer, list http://localhost with its port, such as http://localhost:3000, on a key used only for testing.
• Test pictures are real and spend credits, so set a low monthly limit while you test.