BitBute Logo
  • AR Ecommerce
    • ARBute Shopify App
    • ARBute Woocommerce Plugin
    • Embed AR product on any website
    • Free Online 3D Product Store
  • Features
  • AR/3D Demo
  • Pricing
  • FAQ
  • Contact Us
Login / Signup

Uncategorized

Uncategorized

Embed your AR product on any website

May 3, 2024 rashid

AR Product embed inline on any website page We have a built an AR viewer that can easily be added to any website. Here we will walk you through the steps. Step 1: Create a new store We have start by creating a new store in your account. Don’t know how, checkout our tutorial here. For the sake of this tutorial, we will assume that you followed the above tutorial and created one store. Remember to Publish the store so that it becomes active. Here is the example store that we have created.   Step 2: Connect your domain BitBute platform protects your 3D resource as much as possible. Hence, we don’t allow rendering of your model on any website except yours. Hence it is important to whitelist the domain on which your website lives. For e.g. if your website page has url https://my-awesome-3d-store.com/product/nike-shoe  , you would have to add the domain my-awesome-3d-store.com to the whitelist domains in the store settings. Step 3: Embed the Product This requires 2 code changes.Adding the bitbute JS library to the page. This is doable by many plugins on most platforms like Woocommerce, Shopify etc.In case, you wish to do it manually, just add the following script to the head or footer section of the page. <script type="module" async src="https://ar.bitbute.tech/ar-bitbute.js"></script> Example below show it added to to the head section. <head> … <script type="module" async src="https://ar.bitbute.tech/ar-bitbute.js"></script> </head> Next, we will place a custom HTML wherever we wish to render our model. This custom HTML is available on each product by clicking on the menu item < />. It will look something like this. <bitbute-ar style="width:500px;height:500px;display:block;" project-id="01H8XXYGT14BJ0BZ22C7DXPS9N" product-id="8"> </bitbute-ar> Congrats! Its that easy. Here is the output of your steps. Checkout our demo page which uses the same inline embedding feature to display products. AR/3D Demo

Search

Categories

  • Business 3
  • Ecommerce 3
  • Guides 2
  • How-To 3
  • Marketing 1
  • Software 1
  • Technology 4
  • Uncategorized 1

Recent posts

  • Step by step guide to add Augmented Reality & 3D products to your Woocommerce Website
  • Embed your AR product on any website
  • Complete guide to free Online 3D Product Store

Making AR E-commerce easy. 3D Modelling and Viewer solutions provider

Blogs
  • AR Woocommerce
  • AR Shopify
  • Free 3D Store
Get in touch
  • info@augmentedappsreality.com
  • Contact Us
  • FAQ

© Stepping Stone Consultancy 2025. All Rights Reserved.

  • Terms & Conditions
  • Privacy Policy