@livelike/embet 0.0.14 → 0.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/README.md +224 -230
  3. package/embet.cjs.js +445 -323
  4. package/embet.cjs.min.js +20 -15
  5. package/embet.esm.js +395 -336
  6. package/embet.esm.min.js +8 -3
  7. package/embet.umd.js +445 -323
  8. package/embet.umd.min.js +17 -12
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,25 @@
1
+ ## 0.0.18 (January 3, 2022)
2
+
3
+ - Added `allowDismiss` property on widget element to toggle allowing widget dismissal
4
+ ## 0.0.17 (January 3, 2022)
5
+
6
+ - Added interactivity phase to single tag widget default to allow for progress bar display
7
+ - Added wrapperContainer property to widget customData for resizing
8
+ - Changed `disabledResizing` property to `resize` property.
9
+
10
+ ## 0.0.16 (December 20, 2021)
11
+
12
+ - Added `parentFullscreenWidth` property to widget's custom_data
13
+ - Added `displayPreviewWidget` and `displayPublishedWidget` method
14
+ - Added default values for widget payload id and kind properties to make widget displaying easier to handle due to a design detail within the LiveLike SDK
15
+ - Aliased LiveLike's exports to be present in the embet export
16
+ - Removed description element centering
17
+ - Edited widget resizing logic to maintain widget's aspect ratio and resize widget's internal elements equally
18
+
19
+ ## 0.0.15 (November 23, 2021)
20
+
21
+ - Removed event being fired on widget dismiss
22
+
1
23
  ## 0.0.14 (November 22, 2021)
2
24
 
3
25
  - Added `widgetWidthPercentage`, `parentContainer, `disableResizing` properties to widget's custom_data
package/README.md CHANGED
@@ -2,7 +2,26 @@
2
2
 
3
3
  ## Usage
4
4
 
5
- Initialize the SDK with the LiveLike.init function. A Client ID in the clientId parameter is required to initialization to succeed.
5
+ The emBET SDK can be installed with npm or Yarn.
6
+
7
+ `npm install @livelike/embet`
8
+
9
+ Initialize the SDK with the embet.init function. An application *Client ID* is required to be passed as the `clientId` property of the function's object argument.
10
+
11
+ ```js
12
+ import embet from "@livelike/embet";
13
+
14
+ import { clientId } from './your-config'
15
+
16
+ embet.init({ clientId }).then(profile => {
17
+ // This will generate a new profile
18
+ console.log("Initialized")
19
+ });
20
+ ```
21
+
22
+ ### UMD Builds
23
+
24
+ You can also use the UMD build if you would like to use the emBET SDK in the browser without a module context:
6
25
 
7
26
  ```html
8
27
  <html>
@@ -12,37 +31,24 @@ Initialize the SDK with the LiveLike.init function. A Client ID in the clientId
12
31
  <script>
13
32
  embet.init({ clientId: "<Client Id>" })
14
33
  .then(profile => {
15
- console.log('LiveLike Profile: ', profile)
34
+ console.log('Profile: ', profile)
16
35
  })
17
36
  </script>
18
37
  </body>
19
38
  </html>
20
39
  ```
21
40
 
22
- ## LiveLike Profile
41
+ ## Profiles
23
42
 
24
- LiveLike's user profile can get fetched and updated at any time.
43
+ Profiles are used to collect widget interactions, rewards, points, and other features inside a single identity. Profiles can be provisioned arbitrarily and can be used to extend your existing user account records. These profiles can either be local, allowing you to create anonymous experiences, or persisted in your user databases, allowing you to create profiles that persist across a user's devices.
25
44
 
26
- ```js
27
- LiveLike.getUserProfile({accessToken: "<Access token>"}).then(profile => console.log(profile))
28
- ```
45
+ When a profile is first created it is given a unique ID and a credential called an `Access Token`. It is also automatically given a nickname if one is not provided. Profiles will persist for as long as its credentials are stored and passed back to the SDKs & APIs.
29
46
 
30
- The profile's nickname or custom data can be updated
31
-
32
- ```js
33
- LiveLike.updateUserProfile({
34
- accessToken: "<Access token>",
35
- options: {
36
- nickname: "<New Nickname>",
37
- custom_data: JSON.stringify({ custom: 'data' })
38
- }
39
- })
40
- .then(profile => console.log(profile))
41
- ```
47
+ The user profile can get fetched and updated at any time.
42
48
 
43
49
  ### Profile initialization
44
50
 
45
- When a user loads the application for the first time, a LiveLike profile will be generated and return in the init method. You can use this to save the `access_token` property to your existing user's profile. Loading this profile will allow you to pass the `access_token` property to the init function, which will initialize the application with that user profile, allowing for persistent profiles across devices.
51
+ When a user loads the application for the first time, a profile will be generated and returned in the init method. You can use this to save the `access_token` property to your existing user's profile. Loading this profile will allow you to pass the `access_token` property to the init function, which will initialize the application with that user profile, allowing for persistent profiles across devices.
46
52
 
47
53
  ```js
48
54
  fetchSavedUserProfile()
@@ -56,6 +62,28 @@ fetchSavedUserProfile()
56
62
  })
57
63
  ```
58
64
 
65
+ ### Fetching Profile
66
+ The profile can be fetched and updated at any time with the `getUserProfile` method. This method is passed an `accessToken` and returns the profile object.
67
+
68
+ ```js
69
+ embet.getUserProfile({accessToken: "<Access token>"}).then(profile => console.log(profile))
70
+ ```
71
+
72
+ ### Updating Profile
73
+
74
+ The profile's nickname or custom data can be updated with the `updateUserProfile` method. This method is passed the profile's `accessToken`, and optionally an `options` object containing either a `nickname` property, a `custom_data` property, or both. This method returns the updated profile object.
75
+
76
+ ```js
77
+ embet.updateUserProfile({
78
+ accessToken: "<Access token>",
79
+ options: {
80
+ nickname: "<New Nickname>",
81
+ custom_data: JSON.stringify({ custom: 'data' })
82
+ }
83
+ })
84
+ .then(profile => console.log(profile))
85
+ ```
86
+
59
87
  ## Widget setup
60
88
 
61
89
  To add widgets to the page, the `embet-widgets` element can be used.
@@ -72,68 +100,87 @@ The `embet-widgets` element has optional `programid` and `customid` attributes.
72
100
 
73
101
  ## Widgets
74
102
 
75
- The three widgets currently available are the `live-moneyline`, `live-spread`, and `live-total` widgets. These are signified by the widget payload's custom_data `type` property ` type: 'LIVE SPREAD' | 'LIVE MONEYLINE' | 'LIVE TOTAL'`
103
+ The various interactive elements that are delivered to audiences to engage with are called widgets. Widgets can be created and published manually by producers using the Producer Suite, and can also be automated through the REST API.
76
104
 
77
- ### Widget Properties Type Definition
105
+ Every widget is created as part of a `Program`. A program associates a sequence of widgets with some content. Every program has a `Program ID` that uniquely identifies the program.
106
+
107
+ To add widgets to the page, first the `embet-widgets` element can be used.
108
+
109
+ The `embet-widgets` element must have either a `programid` or `customid` attribute.
110
+
111
+ ```html
112
+ <embet-widgets programid="<Program Id>"></embet-widgets>
78
113
  ```
79
- program_id: string;
80
- question: string;
81
- options: [{
82
- image_url: string;
83
- description: string
84
- }]
85
- custom_data: JSON stringified object
86
-
87
- custom_data: {
88
- place_bet_url: string;
89
- type: 'LIVE SPREAD' | 'LIVE MONEYLINE' | 'LIVE TOTAL';
90
- sponsors: [{logo_url: string, name: string}];
91
- betDetails: [{bet: string; description: string;}],
92
- customCss: string,
93
- customStyles: string,
94
- widgetHeight: string | number,
95
- widgetWidthPercentage: string | number,
96
- parentContainer: string,
97
- disableResizing: boolean,
98
- widgetVariation: 'bar' | 'square' | 'inline'
99
- theme: {
100
- widgets: {
101
- prediction: {
102
- header: {
103
- background: { format: "fill", color: string },
104
- },
105
- body: {
106
- background: { format: "fill", color: string },
107
- },
108
- footer: {
109
- background: { format: "fill", color: string },
110
- },
111
- timer: {
112
- background: { format: "fill", color: string },
113
- },
114
- unselectedOption: {
115
- borderColor: "#1493ff",
116
- },
117
- betButton: {
118
- background: { format: "fill", color: string },
119
- borderColor: string,
120
- fontColor: string,
121
- },
122
- }
123
- }
124
- }
125
- }
114
+
115
+ ```html
116
+ <embet-widgets customid="my-custom-id"></embet-widgets>
126
117
  ```
127
118
 
128
- ### About the customStyles and customCss properties
119
+ View more details about [displaying widgets](doc:displaying-widgets),
129
120
 
130
- These properties allow adding arbitrary CSS to the widgets.
121
+ ### Widget UI
131
122
 
132
- The `customCss` is a string that is a url or src to a CSS file. It is the `href` attribute in a `<link rel="stylesheet" href="styles.css">`.
123
+ The three widget types are the `live-moneyline`, `live-spread`, and `live-total` widgets. These are signified by the widget payload's custom_data `type` property ` type: 'LIVE SPREAD' | 'LIVE MONEYLINE' | 'LIVE TOTAL'`.
133
124
 
134
- The `customStyles` property is a string of CSS. For example
125
+ View all of the [widget properties](doc:widget-properties).
126
+
127
+ ### Widget Properties Type Definition
135
128
 
129
+ ```ts
130
+ program_id: string;
131
+ question: string;
132
+ options: Array<{
133
+ image_url: string;
134
+ description: string;
135
+ }>;
136
+ custom_data: {
137
+ placeBetUrl: string;
138
+ type: 'LIVE SPREAD' | 'LIVE MONEYLINE' | 'LIVE TOTAL';
139
+ widgetVariation: 'bar' | 'square' | 'inline';
140
+ sponsors: [{ logo_url: string; name: string }];
141
+ betDetails: [{ bet: string; description: string }];
142
+ customCss: string;
143
+ customStyles: string;
144
+ widgetHeight: string | number;
145
+ widgetWidthPercentage: string | number;
146
+ parentContainer: string;
147
+ resize: boolean;
148
+ theme: {
149
+ widgets: {
150
+ prediction: { };
151
+ };
152
+ };
153
+ };
136
154
  ```
155
+
156
+ ## Widget Properties
157
+
158
+ Creating or displaying a widget requires two properties, `options` and `question`, and accepts a third, optional property `customData`.
159
+
160
+ ### options
161
+ The `options` property is an array of objects containing the properties `image_url` and `description`.
162
+
163
+ ### question
164
+
165
+ The `question` property is a string that is a question, or the main header of the widget.
166
+
167
+ ### customData
168
+ Widgets also accept an optional `customData` property. This `customData` object contains properties that are used to customize the widget.
169
+
170
+ #### type
171
+ **Required** Defines the type of widget. Can be `LIVE SPREAD`, `LIVE MONEYLINE`, or `LIVE TOTAL`
172
+
173
+ #### customCss
174
+ Allows the addition of arbitrary CSS to the widgets.
175
+
176
+ The `customCss` is a string that is a url or src to a CSS file. It is the href attribute in a <link rel="stylesheet" href="styles.css">.
177
+
178
+ #### customStyles
179
+ Allows the addition of arbitrary CSS to the widgets.
180
+
181
+ The `customStyles` property is a string of CSS. For example
182
+
183
+ ```js
137
184
  customStyles = `
138
185
  .bet-button {
139
186
  background: purple;
@@ -144,8 +191,7 @@ customStyles = `
144
191
  `
145
192
  ```
146
193
 
147
- ### About the widgetHeight property
148
-
194
+ #### widgetHeight
149
195
  This property allows setting the overall widget height.
150
196
 
151
197
  ```
@@ -156,20 +202,29 @@ widgetHeight = '400px'
156
202
  widgetHeight = '50%'
157
203
  ```
158
204
 
159
- ### About the widgetVariation property
160
-
205
+ #### widgetVariation
161
206
  The `widgetVariation` property can be used control the layout of the widgets. The three options are `bar`, `square`, and `inline`.
162
207
 
163
- ### About the parentContainer property
164
-
208
+ ### resize
209
+ Set `resize` optional property to `true` to cause the widget automatically resize on page resize. Default is false.
210
+ #### parentContainer
165
211
  The `parentContainer` optional property is the selector of an element that is a parent of a widget. It is used to calculate styles for resizing. If `parentContainer` is not provided, `document.body` will be used instead.
166
212
 
167
213
  `parentContainer: "#parent-container-id"`
168
214
 
169
215
  `parentContainer: ".parent-container-class"`
170
216
 
171
- ### About the widgetWidthPercentage property
217
+ ### wrapperContainer
218
+ The `wrapperContainer` optional property is the selector of an element that is a parent of a widget. It is used to calculate styles for resizing. If `wrapperContainer` is not provided, `document.body` will be used instead.
219
+
220
+ `wrapperContainer: "#wrapper-container-id"`
172
221
 
222
+ #### parentFullscreenWidth
223
+ The `parentFullscreenWidth optional property is the string or number that signifies that width value in pixels of the widget's parent container when at its full width.
224
+
225
+ `parentFullscreenWidth: "1200"`
226
+
227
+ #### widgetWidthPercentage
173
228
  The `widgetWidthPercentage is the optional property that is a percentage decimal that works with the `parentContainer` property.
174
229
 
175
230
  For example
@@ -180,12 +235,10 @@ will set the widget's width at 50% of the parent container.
180
235
 
181
236
  If not provided, the default value is `0.3`.
182
237
 
183
- ### About the disableResizing property
184
-
185
- Set `disableResizing` optional property to `true` to prevent the widget from resizing. Default is false.
238
+ #### betDetails
239
+ An array of objects with the properties `bet` and `description`.
186
240
 
187
- ### About the betDetails property
188
- In the `betDetails` property of the `custom_data` stringified object, the `description` properties must match with your `options` array `description` properties.
241
+ The `description` properties must match with your `options` array `description` properties.
189
242
 
190
243
  For example, if your `options` and `betDetails` properties are
191
244
 
@@ -209,6 +262,78 @@ For example, if your `options` and `betDetails` properties are
209
262
 
210
263
  The `bet: +120` will match the `options` object with `description: Astros`
211
264
 
265
+ #### sponsors
266
+ An array of objects with the properties `logo_url` and `name`. The `logo_url` is a url or src string of an image to display as a sponsor.
267
+
268
+ #### placeBetUrl
269
+ A url or src string that will be the `href` property of the place bet button's link.
270
+
271
+ ## Displaying Widgets
272
+
273
+ ### Published Widgets
274
+
275
+ Widgets that have previously been published can be displayed at any time using the `displayPublishedWidget` method that is a property on the `embet-widgets` element. It accepts an object argument with the property `id`, which is the id of the widget.
276
+
277
+ This method fetches the published widget's data and appends the widget element to the `embet-widgets` element.
278
+
279
+ ```js
280
+ const embetWidgets = document.querySelector("embet-widgets");
281
+ embetWidgets.displayPublishedWidget({id: "<Widget Id>"})
282
+ ```
283
+
284
+ **The widget must be published to use `displayPublishedWidgets`. The widget `id` can be found in the published widget's payload.**
285
+
286
+ ### Preview Widgets
287
+
288
+ Widgets previews can be displayed using the `displayPreviewWidget` method. It takes an object argument with two properties.
289
+
290
+ The first property is `widgetPayload`, which is an object containing the same properties outlined in [Widget Properties](doc:widget-properties).
291
+
292
+ The second property is `target`, which is an HTMLElement that the preview widget will be appended to. This can be any HTMLElement.
293
+
294
+ **Preview widgets are not widgets that have *not* been published.**
295
+
296
+ ```html
297
+ <embet-widgets programid="<Program Id"></embet-widgets>
298
+
299
+ <script>
300
+ const widgetPayload = {
301
+ question: "Will LA win by 3 or more runs?",
302
+ options: [
303
+ {
304
+ description: "Astros",
305
+ image_url: "https://example.com/astros.png"
306
+ },
307
+ {
308
+ description: "Dodgers",
309
+ image_url: "https://example.com/dodgers.png"
310
+
311
+ },
312
+ ],
313
+ customData: {
314
+ place_bet_url: "#",
315
+ type: "LIVE SPREAD",
316
+ widgetVariation: "inline",
317
+ theme: { },
318
+ sponsors: [
319
+ {
320
+ logo_url: "https://example.com/logo.png",
321
+ name: "Logo Name",
322
+ },
323
+ ],
324
+ betDetails: [
325
+ { bet: "+120", description: "Astros" },
326
+ { bet: "-140", description: "Dodgers" },
327
+ ]
328
+ }
329
+ }
330
+
331
+ const target = document.querySelector("embet-widgets");
332
+
333
+ embet.displayPreviewWidget({widgetPayload, target})
334
+ </script>
335
+ ```
336
+
212
337
  ## Example widget payloads
213
338
 
214
339
  ### Green Theme Moneyline
@@ -229,7 +354,7 @@ The `bet: +120` will match the `options` object with `description: Astros`
229
354
  question: "Who wins tonight?",
230
355
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
231
356
  custom_data: JSON.stringify({
232
- place_bet_url: "#",
357
+ placeBetUrl: "#",
233
358
  type: "LIVE MONEYLINE",
234
359
  widgetVariation: "bar",
235
360
  parentContainer: ".parent-container-class",
@@ -293,7 +418,7 @@ The `bet: +120` will match the `options` object with `description: Astros`
293
418
  question: "Who wins tonight?",
294
419
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
295
420
  custom_data: JSON.stringify({
296
- place_bet_url: "#",
421
+ placeBetUrl: "#",
297
422
  type: "LIVE MONEYLINE",
298
423
  widgetVariation: "square",
299
424
  sponsors: [
@@ -355,7 +480,7 @@ The `bet: +120` will match the `options` object with `description: Astros`
355
480
  question: "Will LA win by 3 or more runs?",
356
481
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
357
482
  custom_data: JSON.stringify({
358
- place_bet_url: "#",
483
+ placeBetUrl: "#",
359
484
  type: "LIVE SPREAD",
360
485
  sponsors: [
361
486
  {
@@ -416,7 +541,7 @@ The `bet: +120` will match the `options` object with `description: Astros`
416
541
  question: "Will LA win by 3 or more runs?",
417
542
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
418
543
  custom_data: JSON.stringify({
419
- place_bet_url: "#",
544
+ placeBetUrl: "#",
420
545
  type: "LIVE SPREAD",
421
546
  sponsors: [
422
547
  {
@@ -478,7 +603,7 @@ The `bet: +120` will match the `options` object with `description: Astros`
478
603
  question: "Will the total score be o/u 5.5?",
479
604
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
480
605
  custom_data: JSON.stringify({
481
- place_bet_url: "#",
606
+ placeBetUrl: "#",
482
607
  type: "LIVE TOTAL",
483
608
  sponsors: [
484
609
  {
@@ -539,7 +664,7 @@ The `bet: +120` will match the `options` object with `description: Astros`
539
664
  question: "Will the total score be o/u 5.5?",
540
665
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
541
666
  custom_data: JSON.stringify({
542
- place_bet_url: "#",
667
+ placeBetUrl: "#",
543
668
  type: "LIVE TOTAL",
544
669
  sponsors: [
545
670
  {
@@ -582,154 +707,23 @@ The `bet: +120` will match the `options` object with `description: Astros`
582
707
  }
583
708
  ```
584
709
 
585
- ## Preview Widgets
586
-
587
- Widgets previews can be displayed using the the same properties outlined above when creating the widgets.
588
-
589
- The 'live-moneyline', 'live-spread', and 'live-total' elements are created, the properties outlined below added, and then the element is appended to the DOM.
590
710
 
591
- ### Moneyline Example
592
- ```
593
- const embetWidgets = document.querySelector("embet-widgets");
594
- const liveMoneyline = document.createElement("live-moneyline");
595
- liveMoneyline.kind = "image-prediction";
596
- liveMoneyline.widgetPayload = { id: '' };
597
- liveMoneyline.options = [
598
- {
599
- image_url:
600
- "https://cf-blast-storage-qa.livelikecdn.com/assets/65c28c9a-e1fe-437c-add2-3d48be4a56e2.png",
601
- description: "Astros",
602
- },
603
- {
604
- description: "Dodgers",
605
- image_url:
606
- "https://cf-blast-storage-qa.livelikecdn.com/assets/85632f6e-55c7-4704-b5b8-59da18bc3c57.png",
607
- },
608
- ];
609
- liveMoneyline.question = "Will LA win by 3 or more runs?";
610
- liveMoneyline.customData = {
611
- place_bet_url: "#",
612
- type: "LIVE MONEYLINE",
613
- sponsors: [
614
- {
615
- logo_url:
616
- "https://cf-blast-storage-qa.livelikecdn.com/assets/0464f0fd-3745-4b17-936c-1e26765652c9.png",
617
- name: "LL logo",
618
- },
619
- ],
620
- theme: {
621
- widgets: {
622
- prediction: {
623
- header: {
624
- background: { format: "fill", color: "#027658bf" },
625
- },
626
- body: {
627
- background: { format: "fill", color: "#027658bf" },
628
- },
629
- footer: {
630
- background: { format: "fill", color: "#027658bf" },
631
- },
632
- timer: {
633
- background: { format: "fill", color: "#fbd703" },
634
- },
635
- unselectedOption: {
636
- borderColor: "#fbd703",
637
- },
638
- betButton: {
639
- background: { format: "fill", color: "#fbd703" },
640
- borderColor: "#fbd703",
641
- fontColor: "#000000",
642
- },
643
- },
644
- },
645
- },
646
- betDetails: [
647
- { bet: "+120", description: "Astros" },
648
- { bet: "-140", description: "Dodgers" },
649
- ],
650
- }
651
- embetWidgets.append(liveMoneyline);
652
- ```
653
-
654
- ### Spread Example
655
- ```
656
- const embetWidgets = document.querySelector("embet-widgets");
657
- const liveSpread = document.createElement("live-spread");
658
- liveSpread.kind = "image-prediction";
659
- liveSpread.widgetPayload = { id: '' };
660
- liveSpread.options = [
661
- {
662
- image_url:
663
- "https://cf-blast-storage-qa.livelikecdn.com/assets/65c28c9a-e1fe-437c-add2-3d48be4a56e2.png",
664
- description: "Astros",
665
- },
666
- {
667
- description: "Dodgers",
668
- image_url:
669
- "https://cf-blast-storage-qa.livelikecdn.com/assets/85632f6e-55c7-4704-b5b8-59da18bc3c57.png",
670
- },
671
- ];
672
- liveSpread.question = "Will LA win by 3 or more runs?";
673
- liveSpread.customData = {
674
- place_bet_url: "#",
675
- type: "LIVE SPREAD",
676
- sponsors: [
677
- {
678
- logo_url:
679
- "https://cf-blast-storage-qa.livelikecdn.com/assets/0464f0fd-3745-4b17-936c-1e26765652c9.png",
680
- name: "LL logo",
681
- },
682
- ],
683
- theme: {
684
- widgets: {
685
- prediction: {
686
- header: {
687
- background: { format: "fill", color: "#2b4364bf" },
688
- },
689
- body: {
690
- background: { format: "fill", color: "#2b4364bf" },
691
- },
692
- footer: {
693
- background: { format: "fill", color: "#2b4364bf" },
694
- },
695
- timer: {
696
- background: { format: "fill", color: "#1493ff" },
697
- },
698
- unselectedOption: {
699
- borderColor: "#1493ff",
700
- },
701
- betButton: {
702
- background: { format: "fill", color: "#1493ff" },
703
- borderColor: "#1493ff",
704
- fontColor: "#ffffff",
705
- },
706
- },
707
- },
708
- },
709
- betDetails: [
710
- { bet: "+2.5(-110)", description: "Astros" },
711
- { bet: "-2.5(-110)", description: "Dodgers" },
712
- ],
713
- };
714
- embetWidgets.append(liveSpread);
715
- ```
716
-
717
- ### Notes
711
+ ## Theming
718
712
 
719
- The two properties `liveSpread.kind = "image-prediction"` and `liveSpread.widgetPayload = { id: '' }` are required.
713
+ ### Usage
720
714
 
721
- ## Theming
715
+ The Theme system allows you to customize the widget UI. This includes common UI properties such as background colors and border colors, corner radii, and text size and fonts.
722
716
 
723
717
  ### Usage
724
718
 
725
- You can call the 'LiveLike.applyTheme` method at any time to update the widget's theme. You must pass the theme object as the argument.
719
+ The widget's theme can be updated by calling the 'embet.applyTheme` method at any time. This method takes an object as an argument, with the required `widgets` object as a property.
726
720
 
727
- The `widgets` property is required, and currently the "Prediction" widget is being used as a base, so the `Prediction` property must be used when updating the theme.
721
+ All widgets extend the `Prediction` widget kind as a base, so the `widget's object property is required to contain the `predictions` object.
728
722
 
729
723
  The example below shows what is required. Any properties added within the `prediction` object are optional.
730
724
 
731
725
  ```js
732
- LiveLike.applyTheme({
726
+ embet.applyTheme({
733
727
  widgets: {
734
728
  prediction: {
735
729
 
@@ -741,7 +735,7 @@ LiveLike.applyTheme({
741
735
  Example showing a change to the header's padding and background color, and the footer's background color.
742
736
 
743
737
  ```js
744
- LiveLike.applyTheme({
738
+ embet.applyTheme({
745
739
  widgets: {
746
740
  prediction: {
747
741
  header: {
@@ -758,7 +752,7 @@ LiveLike.applyTheme({
758
752
 
759
753
  ### Theme Reference
760
754
 
761
- Below is an example of all of the theme properties available. Each property inside of the `prediction` object matches a different part of the widget. For example, the `header` property effects the widget's header, and the `selectedOption` matches the widget's options that are selected.
755
+ Below is an example of all of the theme properties available, with example values. Each property inside of the `prediction` object matches a different part of the widget. For example, the `header` property effects the widget's header, and the `selectedOption` matches the widget's options that are selected.
762
756
 
763
757
  ```
764
758
  {