Integration

At its simplest, MyMy can be added by performing the following:

1. Including mymy_makeup.js, where all the client-side functionality resides.
2. Including mymy.css or mymy.scss, which has very minimal basic styling to ensure components display correctly.
3. Adding two container elements with id's for reference. One to contain the canvas where the image and results will be displayed, and one to contain the buttons for uploading the image and controlling the canvas.

<section id="mymy-app-container"></section>
<section id="mymy-button-container"></section>

4. Calling our MyMy initialisation function on the #mymy-app-container element

Additionally, if you want to display several products, you'll need to create elements with the class name 'mymy-swatch' and a data-name of the makeup item to switch to. See HTML elements.