To embed the hosted App in any existing web-page or eCommerce setup you will need to add two things into the HTML content of that page - The set of HTML elements we want to embed out UI into and the script tag to request our React UI bundle.
Set of HTML Elements
In the eCommerce or webpage you're embedding into, you will need to add an HTML element that the Treble App can load itself into. In most cases this will be a single
div container but it can be multiple containers as need, for example if you need to separate the Player and Form in the page. Each
div must have the correct Id for the Treble App to be able to locate it in the page. For example
To get a list of all the containers that will have to be created for the App, you can head over to the
public/index.html file and see what div's exist there, making sure they have counterparts in the environment your are embedding.
We will also need add a
<script> tag to request and execute our built Treble App bundle. By default,
@threekit-tools/treble-scripts will create a single bundle for the React app with the filename
threekit-embed.js in the
build folder - this is the file we need to reference in the script tag.
<script src="https://treble-app.com/threekit-embed.js" defer></script>
Multi HTML elements
<head> <link rel="stylesheet" href="https://treble-app.com/treble-app.css" /> </head> <body> <div id="tk-treble-root"></div> <div id="tk-treble-form"></div> <script src="https://treble-app.com/treble-app.js" defer></script> </body>