@livelike/embet 0.0.13 → 0.0.17

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 +25 -0
  2. package/README.md +244 -221
  3. package/embet.cjs.js +491 -393
  4. package/embet.cjs.min.js +20 -15
  5. package/embet.esm.js +510 -475
  6. package/embet.esm.min.js +8 -3
  7. package/embet.umd.js +491 -393
  8. package/embet.umd.min.js +17 -12
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,28 @@
1
+ ## 0.0.17 (January 3, 2022)
2
+
3
+ - Added interactivity phase to single tag widget default to allow for progress bar display
4
+ - Added wrapperContainer property to widget customData for resizing
5
+ - Changed `disabledResizing` property to `resize` property.
6
+
7
+ ## 0.0.16 (December 20, 2021)
8
+
9
+ - Added `parentFullscreenWidth` property to widget's custom_data
10
+ - Added `displayPreviewWidget` and `displayPublishedWidget` method
11
+ - 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
12
+ - Aliased LiveLike's exports to be present in the embet export
13
+ - Removed description element centering
14
+ - Edited widget resizing logic to maintain widget's aspect ratio and resize widget's internal elements equally
15
+
16
+ ## 0.0.15 (November 23, 2021)
17
+
18
+ - Removed event being fired on widget dismiss
19
+
20
+ ## 0.0.14 (November 22, 2021)
21
+
22
+ - Added `widgetWidthPercentage`, `parentContainer, `disableResizing` properties to widget's custom_data
23
+ - Removed dynamic font size setting
24
+ - Moved ResizeObserver from embet-widgets to the individual widget elements to allow for resizing in single tag widgets
25
+
1
26
  ## 0.0.13 (November 22, 2021)
2
27
 
3
28
  - Removed hard coded livelike-title color
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
23
-
24
- LiveLike's user profile can get fetched and updated at any time.
41
+ ## Profiles
25
42
 
26
- ```js
27
- LiveLike.getUserProfile({accessToken: "<Access token>"}).then(profile => console.log(profile))
28
- ```
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.
29
44
 
30
- The profile's nickname or custom data can be updated
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.
31
46
 
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,65 +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
- palce_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
- widgetVariation: 'bar' | 'square' | 'inline'
96
- theme: {
97
- widgets: {
98
- prediction: {
99
- header: {
100
- background: { format: "fill", color: string },
101
- },
102
- body: {
103
- background: { format: "fill", color: string },
104
- },
105
- footer: {
106
- background: { format: "fill", color: string },
107
- },
108
- timer: {
109
- background: { format: "fill", color: string },
110
- },
111
- unselectedOption: {
112
- borderColor: "#1493ff",
113
- },
114
- betButton: {
115
- background: { format: "fill", color: string },
116
- borderColor: string,
117
- fontColor: string,
118
- },
119
- }
120
- }
121
- }
122
- }
114
+
115
+ ```html
116
+ <embet-widgets customid="my-custom-id"></embet-widgets>
123
117
  ```
124
118
 
125
- ### About the customStyles and customCss properties
119
+ View more details about [displaying widgets](doc:displaying-widgets),
126
120
 
127
- These properties allow adding arbitrary CSS to the widgets.
121
+ ### Widget UI
128
122
 
129
- 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'`.
130
124
 
131
- 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
132
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
+ };
133
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
134
184
  customStyles = `
135
185
  .bet-button {
136
186
  background: purple;
@@ -141,8 +191,7 @@ customStyles = `
141
191
  `
142
192
  ```
143
193
 
144
- ### About the widgetHeight property
145
-
194
+ #### widgetHeight
146
195
  This property allows setting the overall widget height.
147
196
 
148
197
  ```
@@ -153,12 +202,43 @@ widgetHeight = '400px'
153
202
  widgetHeight = '50%'
154
203
  ```
155
204
 
156
- ### About the widgetVariation property
157
-
205
+ #### widgetVariation
158
206
  The `widgetVariation` property can be used control the layout of the widgets. The three options are `bar`, `square`, and `inline`.
159
207
 
160
- ### About the betDetails property
161
- In the `betDetails` property of the `custom_data` stringified object, the `description` properties must match with your `options` array `description` properties.
208
+ ### resize
209
+ Set `resize` optional property to `true` to cause the widget automatically resize on page resize. Default is false.
210
+ #### parentContainer
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.
212
+
213
+ `parentContainer: "#parent-container-id"`
214
+
215
+ `parentContainer: ".parent-container-class"`
216
+
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"`
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
228
+ The `widgetWidthPercentage is the optional property that is a percentage decimal that works with the `parentContainer` property.
229
+
230
+ For example
231
+
232
+ `widgetWidthPercentage: "0.5"`
233
+
234
+ will set the widget's width at 50% of the parent container.
235
+
236
+ If not provided, the default value is `0.3`.
237
+
238
+ #### betDetails
239
+ An array of objects with the properties `bet` and `description`.
240
+
241
+ The `description` properties must match with your `options` array `description` properties.
162
242
 
163
243
  For example, if your `options` and `betDetails` properties are
164
244
 
@@ -182,6 +262,78 @@ For example, if your `options` and `betDetails` properties are
182
262
 
183
263
  The `bet: +120` will match the `options` object with `description: Astros`
184
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
+
185
337
  ## Example widget payloads
186
338
 
187
339
  ### Green Theme Moneyline
@@ -202,9 +354,11 @@ The `bet: +120` will match the `options` object with `description: Astros`
202
354
  question: "Who wins tonight?",
203
355
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
204
356
  custom_data: JSON.stringify({
205
- place_bet_url: "#",
357
+ placeBetUrl: "#",
206
358
  type: "LIVE MONEYLINE",
207
359
  widgetVariation: "bar",
360
+ parentContainer: ".parent-container-class",
361
+ widgetWidthPercentage: "0.5",
208
362
  sponsors: [
209
363
  {
210
364
  logo_url:
@@ -264,7 +418,7 @@ The `bet: +120` will match the `options` object with `description: Astros`
264
418
  question: "Who wins tonight?",
265
419
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
266
420
  custom_data: JSON.stringify({
267
- place_bet_url: "#",
421
+ placeBetUrl: "#",
268
422
  type: "LIVE MONEYLINE",
269
423
  widgetVariation: "square",
270
424
  sponsors: [
@@ -326,7 +480,7 @@ The `bet: +120` will match the `options` object with `description: Astros`
326
480
  question: "Will LA win by 3 or more runs?",
327
481
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
328
482
  custom_data: JSON.stringify({
329
- place_bet_url: "#",
483
+ placeBetUrl: "#",
330
484
  type: "LIVE SPREAD",
331
485
  sponsors: [
332
486
  {
@@ -387,7 +541,7 @@ The `bet: +120` will match the `options` object with `description: Astros`
387
541
  question: "Will LA win by 3 or more runs?",
388
542
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
389
543
  custom_data: JSON.stringify({
390
- place_bet_url: "#",
544
+ placeBetUrl: "#",
391
545
  type: "LIVE SPREAD",
392
546
  sponsors: [
393
547
  {
@@ -449,7 +603,7 @@ The `bet: +120` will match the `options` object with `description: Astros`
449
603
  question: "Will the total score be o/u 5.5?",
450
604
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
451
605
  custom_data: JSON.stringify({
452
- place_bet_url: "#",
606
+ placeBetUrl: "#",
453
607
  type: "LIVE TOTAL",
454
608
  sponsors: [
455
609
  {
@@ -510,7 +664,7 @@ The `bet: +120` will match the `options` object with `description: Astros`
510
664
  question: "Will the total score be o/u 5.5?",
511
665
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
512
666
  custom_data: JSON.stringify({
513
- place_bet_url: "#",
667
+ placeBetUrl: "#",
514
668
  type: "LIVE TOTAL",
515
669
  sponsors: [
516
670
  {
@@ -553,154 +707,23 @@ The `bet: +120` will match the `options` object with `description: Astros`
553
707
  }
554
708
  ```
555
709
 
556
- ## Preview Widgets
557
-
558
- Widgets previews can be displayed using the the same properties outlined above when creating the widgets.
559
-
560
- 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.
561
-
562
- ### Moneyline Example
563
- ```
564
- const embetWidgets = document.querySelector("embet-widgets");
565
- const liveMoneyline = document.createElement("live-moneyline");
566
- liveMoneyline.kind = "image-prediction";
567
- liveMoneyline.widgetPayload = { id: '' };
568
- liveMoneyline.options = [
569
- {
570
- image_url:
571
- "https://cf-blast-storage-qa.livelikecdn.com/assets/65c28c9a-e1fe-437c-add2-3d48be4a56e2.png",
572
- description: "Astros",
573
- },
574
- {
575
- description: "Dodgers",
576
- image_url:
577
- "https://cf-blast-storage-qa.livelikecdn.com/assets/85632f6e-55c7-4704-b5b8-59da18bc3c57.png",
578
- },
579
- ];
580
- liveMoneyline.question = "Will LA win by 3 or more runs?";
581
- liveMoneyline.customData = {
582
- place_bet_url: "#",
583
- type: "LIVE MONEYLINE",
584
- sponsors: [
585
- {
586
- logo_url:
587
- "https://cf-blast-storage-qa.livelikecdn.com/assets/0464f0fd-3745-4b17-936c-1e26765652c9.png",
588
- name: "LL logo",
589
- },
590
- ],
591
- theme: {
592
- widgets: {
593
- prediction: {
594
- header: {
595
- background: { format: "fill", color: "#027658bf" },
596
- },
597
- body: {
598
- background: { format: "fill", color: "#027658bf" },
599
- },
600
- footer: {
601
- background: { format: "fill", color: "#027658bf" },
602
- },
603
- timer: {
604
- background: { format: "fill", color: "#fbd703" },
605
- },
606
- unselectedOption: {
607
- borderColor: "#fbd703",
608
- },
609
- betButton: {
610
- background: { format: "fill", color: "#fbd703" },
611
- borderColor: "#fbd703",
612
- fontColor: "#000000",
613
- },
614
- },
615
- },
616
- },
617
- betDetails: [
618
- { bet: "+120", description: "Astros" },
619
- { bet: "-140", description: "Dodgers" },
620
- ],
621
- }
622
- embetWidgets.append(liveMoneyline);
623
- ```
624
710
 
625
- ### Spread Example
626
- ```
627
- const embetWidgets = document.querySelector("embet-widgets");
628
- const liveSpread = document.createElement("live-spread");
629
- liveSpread.kind = "image-prediction";
630
- liveSpread.widgetPayload = { id: '' };
631
- liveSpread.options = [
632
- {
633
- image_url:
634
- "https://cf-blast-storage-qa.livelikecdn.com/assets/65c28c9a-e1fe-437c-add2-3d48be4a56e2.png",
635
- description: "Astros",
636
- },
637
- {
638
- description: "Dodgers",
639
- image_url:
640
- "https://cf-blast-storage-qa.livelikecdn.com/assets/85632f6e-55c7-4704-b5b8-59da18bc3c57.png",
641
- },
642
- ];
643
- liveSpread.question = "Will LA win by 3 or more runs?";
644
- liveSpread.customData = {
645
- place_bet_url: "#",
646
- type: "LIVE SPREAD",
647
- sponsors: [
648
- {
649
- logo_url:
650
- "https://cf-blast-storage-qa.livelikecdn.com/assets/0464f0fd-3745-4b17-936c-1e26765652c9.png",
651
- name: "LL logo",
652
- },
653
- ],
654
- theme: {
655
- widgets: {
656
- prediction: {
657
- header: {
658
- background: { format: "fill", color: "#2b4364bf" },
659
- },
660
- body: {
661
- background: { format: "fill", color: "#2b4364bf" },
662
- },
663
- footer: {
664
- background: { format: "fill", color: "#2b4364bf" },
665
- },
666
- timer: {
667
- background: { format: "fill", color: "#1493ff" },
668
- },
669
- unselectedOption: {
670
- borderColor: "#1493ff",
671
- },
672
- betButton: {
673
- background: { format: "fill", color: "#1493ff" },
674
- borderColor: "#1493ff",
675
- fontColor: "#ffffff",
676
- },
677
- },
678
- },
679
- },
680
- betDetails: [
681
- { bet: "+2.5(-110)", description: "Astros" },
682
- { bet: "-2.5(-110)", description: "Dodgers" },
683
- ],
684
- };
685
- embetWidgets.append(liveSpread);
686
- ```
687
-
688
- ### Notes
711
+ ## Theming
689
712
 
690
- The two properties `liveSpread.kind = "image-prediction"` and `liveSpread.widgetPayload = { id: '' }` are required.
713
+ ### Usage
691
714
 
692
- ## 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.
693
716
 
694
717
  ### Usage
695
718
 
696
- 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.
697
720
 
698
- 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.
699
722
 
700
723
  The example below shows what is required. Any properties added within the `prediction` object are optional.
701
724
 
702
725
  ```js
703
- LiveLike.applyTheme({
726
+ embet.applyTheme({
704
727
  widgets: {
705
728
  prediction: {
706
729
 
@@ -712,7 +735,7 @@ LiveLike.applyTheme({
712
735
  Example showing a change to the header's padding and background color, and the footer's background color.
713
736
 
714
737
  ```js
715
- LiveLike.applyTheme({
738
+ embet.applyTheme({
716
739
  widgets: {
717
740
  prediction: {
718
741
  header: {
@@ -729,7 +752,7 @@ LiveLike.applyTheme({
729
752
 
730
753
  ### Theme Reference
731
754
 
732
- 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.
733
756
 
734
757
  ```
735
758
  {