Show a product in 3D on your website

For a plain HTML website. You need: the splat-viewer folder, your product’s 3D file (ending in .sog), its photo (ending in .webp or .jpg), and a way to put files on your website, such as your host’s file manager or an FTP program.

1. Put the files on your website

1. Upload the whole splat-viewer-0.1.0 folder to the top level of your website, next to your home page.
2. Make a folder called products next to it, and upload your product’s .sog file and its photo there.

To check: open https://your-site/splat-viewer-0.1.0/README.md in your browser. You should see the README text. If you see “Not found”, the folder is in the wrong place.

2. Paste the snippet into your page

1. Open snippet.html from the splat-viewer folder in a text editor (Notepad, TextEdit), and copy everything in it.
2. Open your product page’s HTML, and paste it where the product should appear.
3. In what you pasted, change the three names in capitals:
   • PRODUCT.sog to your 3D file’s name;
   • PRODUCT.webp to your photo’s name (both times);
   • PRODUCT NAME to a few words describing the product (both times), for people who can’t see the picture.
4. Save the page and upload it again.

3. Check it

Open your product page. The photo shows first; a moment later it turns into the 3D product, which you can turn with the mouse or a finger.

If only the photo stays:

• Check the file names in the snippet against the files you uploaded, letter for letter, including capitals.
• If your site has a security policy, it must allow what script-policy.md lists. Your web host can tell you whether you have one.
• Still stuck: send us the page address.

Size and options

The viewer is a square, as wide as its space, up to 600 pixels. To change it, and for turning on its own, preset views, labels and colours, see element.md.