# Overview
This widget is a JavaScript-based application that can be embedded onto the desired page via a specific script that can be associated to an HTML element. It also provides the possibility to associate each question to specific attibute names and finally it exposes useful functions that can be configured as desired collecting data for each question and/or action of the user.
# Usage
## Step 1
### Apply the styles
Add the stylesheet to the `<head>` element of your webpage:
```html
<link href="https://fitquiz.miles.plussizecorp.com/style.css" />
```
## Step 2
### Add the JS script
Add the JS script at the end of the `<body>` element of your webpage:
```html
<script src="https://fitquiz.miles.plussizecorp.com/swimsuit-quiz-widget.min.js"></script>
```
## Step 3
### Add the container div
To add the FBB Swimsuit Quiz Widget to a webpage, include a container element with a unique id wherever you want the widget to be displayed. For instance:
```html
<div id="quiz-widget"></div>
```
## Step 4
### Widget Initialization
To initialize the widget create an instance of ```SwimsuitQuizWidget``` as follows:
```javascript
const swimsuitQuizWidgetInstance = new SwimsuitQuizWidget('quiz-widget',
{
// configuration options
}
);
```
The `SwimsuitQuizWidget` constructor accepts two parameters:
* `widgetContainerId`: *A string representing the ID of the HTML element where the widget should be placed. This should match the ID of the div element you included in your [HTML structure](#Step-3).*
* `options`: *an object containing the configuration options for the widget (refer [here](#Configuration-options) for more details)*
## Step 5
### Widget Rendering
After initializing the widget it can be displayed by calling the `start()` method that mounts the widget on the designated container element:
```javascript
swimsuitQuizWidgetInstance.start()
```
## Step 6 (Optional)
### Widget Removal
To remove the widget from the page call the following method:
```javascript
swimsuitQuizWidgetInstance.destroy()
```
:::danger
**Important:** If you don't do this, the global resources used by the widget will not be freed up from memory.
:::
# Configuration options
The configuration options can be applied at the [initialization step](#Step-4) inside the corresponding object that follows the `widgetContainerId`.
This object is constructed with the following properties:
##### `attributes`:
When configuring the `SwimsuitQuizWidget` you need to specify the attribute names and values for each question and answer as they are stored in Miles. You can achieve this by passing an object for each question id and each answer id like so:
```javascript
const swimsuitQuizWidgetInstance = new SwimsuitQuizWidget('quiz-widget',
{
attributes: {
1: { // Question id (auto incrementing)
attributeName: 'coverage_level',
attributeValues: {
1: 'full_coverage', // Answer id (auto incrementing)
2: 'moderate_coverage',
3: 'less_coverage',
},
},
2: {
attributeName: 'swimsuit_type',
attributeValues: {
1: 'one_piece',
2: 'swimdress',
3: 'tankini',
4: 'bikini',
},
},
3: {
attibuteName: 'support',
attributeValues: {
1: 'average',
2: 'minimal',
3: 'maximum',
},
},
4: {
attributeName: 'wire',
attributeValues: {
1: 'underwire',
2: 'wirefree',
},
},
5: {
attributeName: 'body_shape',
attributeValues: {
1: 'athletic',
2: 'apple',
3: 'heart',
4: 'hourglass',
5: 'pear',
},
},
6: {
attributeName: 'neckline',
attributeValues: {
1: 'high_neck',
2: 'modest_squareneck',
3: 'bandeau_convertible',
4: 'one_shoulder',
5: 'v_neck-plunging-halter',
},
},
},
}
);
```
##### `callbacks` (optional):
Callbacks can be used to configure actions and/or collect data that the user inputs during the quiz like so:
```javascript
const swimsuitQuizWidgetInstance = new SwimsuitQuizWidget('quiz-widget',
{
// ...attributes
callbacks: {
onQuizStarted: () => {
// Do something when user clicks on "START THE QUIZ"
},
onEmailSubmitted: (email, newsletterSubscribe, smsSubscribe) => {
// Do something when user completes submits the email form
console.log(`
Email address: ${email},
Subscribed: ${newsletterSubscribe},
SMS: ${smsSubscribe}
`),
},
// ...more callbacks here
}
}
);
```
#### The available callback functions are:
* `onQuizStarted`: Called when user clicks on the "START THE QUIZ" button.
:::spoiler Function Definition
```javascript
() => void
```
:::
* `onQuizCompleted`: Called when the email step is mounted.
:::spoiler Function Definition
```javascript
() => void
```
:::
* `onQuestionAnswered`: Called when the user clicks on "NEXT" or "SUBMIT" button
:::spoiler Function Definition
```javascript
(questionId, answers) => void
```
:::
* `onQuestionSkipped`: Called when the user clicks on the "SKIP" link
:::spoiler Function Definition
```javascript
(step) => void
```
:::
* `onVideoStarted`: Called when the user presses play on the video or when the video restarts after the user forwards it
:::spoiler Function Definition
```javascript
() => void
```
:::
* `onVideoPaused`: Called when the user presses pause on the video or when the user forwards it
:::spoiler Function Definition
```javascript
() => void
```
:::
* `onVideoEnded`: Called when the video ends
:::spoiler Function Definition
```javascript
() => void
```
:::
* `onVideoClosed`: Called when the user navigates to the next or previous step of the measurement step
:::spoiler Function Definition
```javascript
() => void
```
:::
* `onSeeResults`: Called when the user clicks on the "SEE RESULTS" button
:::spoiler Function Definition
```javascript
(results) => void
```
:::
* `onEmailSubmitted`: Called when the user clicks on the "ENTER" button of the email form
:::spoiler Function Definition
```javascript
(_:{email, newsletterSubscribe, smsSubscribe}) => void
```
:::
* `onViewSizeCharts`: Called when the user clicks on the "SIZE CHARTS" link
:::spoiler Function Definition
```javascript
() => void
```
:::
# Additional Methods
## Get Container Id
If you want to read the id of the container element that the widget is attached to, you can use the `getContainerId()` method:
```javascript
const containerId = fbbOutfitsWidget.getContainerId();
```
## Get Options
If you want to read the current options, you can use the `getOptions()` method:
```javascript
const options = fbbOutfitsWidget.getOptions();
```
## Update Options
You can update the widget's options after it has started. This is done by calling the `updateOptions()` method and passing in an object with the new options:
```javascript
fbbOutfitsWidget.updateOptions({
api: {
brandId: "WW",
productId: 1234567,
colorId: 1234567,
}
});
```
By default the new options get merged with the old options to produce the final object. Optionally, you can tell `updateOptions()` to completely override the old options with the new ones by passing in the `replace: true`. Example:
```javascript
fbbOutfitsWidget.updateOptions(
{
api: {
brandId: "WW",
productId: 1234567,
colorId: 1234567,
}
},
{ replace: true }
);
```
Sign in with Wallet
Connect another wallet