With this type of integration, you can choose how you want your Advanced for Website to be displayed by styling the html element yourself.
This type of integration is used in Sample 2.
Add a div in your html.
This div will contain the Advanced for Website.
The id is important and will be used in the createWidget function below (you can use your own name, but the same name must be used in the createWidget function)
A size must be set in your css files for Advanced for Website to work correctly.
It can be set to either a fixed or a dynamic size:
Now that you have:
- added a container for your Advanced for Website
- set its size
We can create the Advanced for Website instance.
The following code must be added in the HTML (in head)
Now that the container was added, the size set and the script loaded, you should see a working Advanced for Website created in the div you have added.
You can now link your glasses “try-on” button to a setFrame('
glassesId') to change the glasses.
Basic on page integration example (intermediate) : https://codepen.io/Fittingbox/pen/cb94d662f163a987cccf6bd5791673aa
Advanced integration (advanced) : https://codepen.io/Fittingbox/pen/92c07d9762fd814c6c170903b5f51d71