@livelike/embet 0.0.12 → 0.0.16

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 (12) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/README.md +241 -221
  3. package/embet.cjs.js +549 -373
  4. package/embet.cjs.min.js +20 -15
  5. package/embet.esm.js +568 -459
  6. package/embet.esm.min.js +8 -3
  7. package/embet.umd.js +549 -373
  8. package/embet.umd.min.js +17 -12
  9. package/index.html +332 -0
  10. package/j.js +0 -0
  11. package/package.json +1 -1
  12. package/tt.js +8 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,26 @@
1
+ ## 0.0.16 (December 20, 2021)
2
+
3
+ - Added `parentFullscreenWidth` property to widget's custom_data
4
+ - Added `displayPreviewWidget` and `displayPublishedWidget` method
5
+ - 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
6
+ - Aliased LiveLike's exports to be present in the embet export
7
+ - Removed description element centering
8
+ - Edited widget resizing logic to maintain widget's aspect ratio and resize widget's internal elements equally
9
+
10
+ ## 0.0.15 (November 23, 2021)
11
+
12
+ - Removed event being fired on widget dismiss
13
+
14
+ ## 0.0.14 (November 22, 2021)
15
+
16
+ - Added `widgetWidthPercentage`, `parentContainer, `disableResizing` properties to widget's custom_data
17
+ - Removed dynamic font size setting
18
+ - Moved ResizeObserver from embet-widgets to the individual widget elements to allow for resizing in single tag widgets
19
+
20
+ ## 0.0.13 (November 22, 2021)
21
+
22
+ - Removed hard coded livelike-title color
23
+
1
24
  ## 0.0.12 (November 20, 2021)
2
25
 
3
26
  - Added widget resize observer
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
+ disableResizing: 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,40 @@ 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
+ #### parentContainer
209
+ 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.
210
+
211
+ `parentContainer: "#parent-container-id"`
212
+
213
+ `parentContainer: ".parent-container-class"`
214
+
215
+
216
+ #### parentFullscreenWidth
217
+ 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.
218
+
219
+ `parentFullscreenWidth: "1200"`
220
+
221
+ #### widgetWidthPercentage
222
+ The `widgetWidthPercentage is the optional property that is a percentage decimal that works with the `parentContainer` property.
223
+
224
+ For example
225
+
226
+ `widgetWidthPercentage: "0.5"`
227
+
228
+ will set the widget's width at 50% of the parent container.
229
+
230
+ If not provided, the default value is `0.3`.
231
+
232
+ #### disableResizing
233
+ Set `disableResizing` optional property to `true` to prevent the widget from resizing. Default is false.
234
+
235
+ #### betDetails
236
+ An array of objects with the properties `bet` and `description`.
237
+
238
+ The `description` properties must match with your `options` array `description` properties.
162
239
 
163
240
  For example, if your `options` and `betDetails` properties are
164
241
 
@@ -182,6 +259,78 @@ For example, if your `options` and `betDetails` properties are
182
259
 
183
260
  The `bet: +120` will match the `options` object with `description: Astros`
184
261
 
262
+ #### sponsors
263
+ 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.
264
+
265
+ #### placeBetUrl
266
+ A url or src string that will be the `href` property of the place bet button's link.
267
+
268
+ ## Displaying Widgets
269
+
270
+ ### Published Widgets
271
+
272
+ 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.
273
+
274
+ This method fetches the published widget's data and appends the widget element to the `embet-widgets` element.
275
+
276
+ ```js
277
+ const embetWidgets = document.querySelector("embet-widgets");
278
+ embetWidgets.displayPublishedWidget({id: "<Widget Id>"})
279
+ ```
280
+
281
+ **The widget must be published to use `displayPublishedWidgets`. The widget `id` can be found in the published widget's payload.**
282
+
283
+ ### Preview Widgets
284
+
285
+ Widgets previews can be displayed using the `displayPreviewWidget` method. It takes an object argument with two properties.
286
+
287
+ The first property is `widgetPayload`, which is an object containing the same properties outlined in [Widget Properties](doc:widget-properties).
288
+
289
+ The second property is `target`, which is an HTMLElement that the preview widget will be appended to. This can be any HTMLElement.
290
+
291
+ **Preview widgets are not widgets that have *not* been published.**
292
+
293
+ ```html
294
+ <embet-widgets programid="<Program Id"></embet-widgets>
295
+
296
+ <script>
297
+ const widgetPayload = {
298
+ question: "Will LA win by 3 or more runs?",
299
+ options: [
300
+ {
301
+ description: "Astros",
302
+ image_url: "https://example.com/astros.png"
303
+ },
304
+ {
305
+ description: "Dodgers",
306
+ image_url: "https://example.com/dodgers.png"
307
+
308
+ },
309
+ ],
310
+ customData: {
311
+ place_bet_url: "#",
312
+ type: "LIVE SPREAD",
313
+ widgetVariation: "inline",
314
+ theme: { },
315
+ sponsors: [
316
+ {
317
+ logo_url: "https://example.com/logo.png",
318
+ name: "Logo Name",
319
+ },
320
+ ],
321
+ betDetails: [
322
+ { bet: "+120", description: "Astros" },
323
+ { bet: "-140", description: "Dodgers" },
324
+ ]
325
+ }
326
+ }
327
+
328
+ const target = document.querySelector("embet-widgets");
329
+
330
+ embet.displayPreviewWidget({widgetPayload, target})
331
+ </script>
332
+ ```
333
+
185
334
  ## Example widget payloads
186
335
 
187
336
  ### Green Theme Moneyline
@@ -202,9 +351,11 @@ The `bet: +120` will match the `options` object with `description: Astros`
202
351
  question: "Who wins tonight?",
203
352
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
204
353
  custom_data: JSON.stringify({
205
- place_bet_url: "#",
354
+ placeBetUrl: "#",
206
355
  type: "LIVE MONEYLINE",
207
356
  widgetVariation: "bar",
357
+ parentContainer: ".parent-container-class",
358
+ widgetWidthPercentage: "0.5",
208
359
  sponsors: [
209
360
  {
210
361
  logo_url:
@@ -264,7 +415,7 @@ The `bet: +120` will match the `options` object with `description: Astros`
264
415
  question: "Who wins tonight?",
265
416
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
266
417
  custom_data: JSON.stringify({
267
- place_bet_url: "#",
418
+ placeBetUrl: "#",
268
419
  type: "LIVE MONEYLINE",
269
420
  widgetVariation: "square",
270
421
  sponsors: [
@@ -326,7 +477,7 @@ The `bet: +120` will match the `options` object with `description: Astros`
326
477
  question: "Will LA win by 3 or more runs?",
327
478
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
328
479
  custom_data: JSON.stringify({
329
- place_bet_url: "#",
480
+ placeBetUrl: "#",
330
481
  type: "LIVE SPREAD",
331
482
  sponsors: [
332
483
  {
@@ -387,7 +538,7 @@ The `bet: +120` will match the `options` object with `description: Astros`
387
538
  question: "Will LA win by 3 or more runs?",
388
539
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
389
540
  custom_data: JSON.stringify({
390
- place_bet_url: "#",
541
+ placeBetUrl: "#",
391
542
  type: "LIVE SPREAD",
392
543
  sponsors: [
393
544
  {
@@ -449,7 +600,7 @@ The `bet: +120` will match the `options` object with `description: Astros`
449
600
  question: "Will the total score be o/u 5.5?",
450
601
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
451
602
  custom_data: JSON.stringify({
452
- place_bet_url: "#",
603
+ placeBetUrl: "#",
453
604
  type: "LIVE TOTAL",
454
605
  sponsors: [
455
606
  {
@@ -510,7 +661,7 @@ The `bet: +120` will match the `options` object with `description: Astros`
510
661
  question: "Will the total score be o/u 5.5?",
511
662
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
512
663
  custom_data: JSON.stringify({
513
- place_bet_url: "#",
664
+ placeBetUrl: "#",
514
665
  type: "LIVE TOTAL",
515
666
  sponsors: [
516
667
  {
@@ -553,154 +704,23 @@ The `bet: +120` will match the `options` object with `description: Astros`
553
704
  }
554
705
  ```
555
706
 
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
707
 
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
708
+ ## Theming
689
709
 
690
- The two properties `liveSpread.kind = "image-prediction"` and `liveSpread.widgetPayload = { id: '' }` are required.
710
+ ### Usage
691
711
 
692
- ## Theming
712
+ 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
713
 
694
714
  ### Usage
695
715
 
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.
716
+ 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
717
 
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.
718
+ All widgets extend the `Prediction` widget kind as a base, so the `widget's object property is required to contain the `predictions` object.
699
719
 
700
720
  The example below shows what is required. Any properties added within the `prediction` object are optional.
701
721
 
702
722
  ```js
703
- LiveLike.applyTheme({
723
+ embet.applyTheme({
704
724
  widgets: {
705
725
  prediction: {
706
726
 
@@ -712,7 +732,7 @@ LiveLike.applyTheme({
712
732
  Example showing a change to the header's padding and background color, and the footer's background color.
713
733
 
714
734
  ```js
715
- LiveLike.applyTheme({
735
+ embet.applyTheme({
716
736
  widgets: {
717
737
  prediction: {
718
738
  header: {
@@ -729,7 +749,7 @@ LiveLike.applyTheme({
729
749
 
730
750
  ### Theme Reference
731
751
 
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.
752
+ 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
753
 
734
754
  ```
735
755
  {