@livelike/embet 0.0.15 → 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 +9 -0
  2. package/README.md +220 -229
  3. package/embet.cjs.js +444 -235
  4. package/embet.cjs.min.js +30 -25
  5. package/embet.esm.js +399 -257
  6. package/embet.esm.min.js +18 -13
  7. package/embet.umd.js +444 -235
  8. package/embet.umd.min.js +27 -22
  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,12 @@
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
+
1
10
  ## 0.0.15 (November 23, 2021)
2
11
 
3
12
  - Removed event being fired on widget dismiss
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
+ disableResizing: 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,23 @@ 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
+ #### parentContainer
165
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.
166
210
 
167
211
  `parentContainer: "#parent-container-id"`
168
212
 
169
213
  `parentContainer: ".parent-container-class"`
170
214
 
171
- ### About the widgetWidthPercentage property
172
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
173
222
  The `widgetWidthPercentage is the optional property that is a percentage decimal that works with the `parentContainer` property.
174
223
 
175
224
  For example
@@ -180,12 +229,13 @@ will set the widget's width at 50% of the parent container.
180
229
 
181
230
  If not provided, the default value is `0.3`.
182
231
 
183
- ### About the disableResizing property
184
-
232
+ #### disableResizing
185
233
  Set `disableResizing` optional property to `true` to prevent the widget from resizing. Default is false.
186
234
 
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.
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.
189
239
 
190
240
  For example, if your `options` and `betDetails` properties are
191
241
 
@@ -209,6 +259,78 @@ For example, if your `options` and `betDetails` properties are
209
259
 
210
260
  The `bet: +120` will match the `options` object with `description: Astros`
211
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
+
212
334
  ## Example widget payloads
213
335
 
214
336
  ### Green Theme Moneyline
@@ -229,7 +351,7 @@ The `bet: +120` will match the `options` object with `description: Astros`
229
351
  question: "Who wins tonight?",
230
352
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
231
353
  custom_data: JSON.stringify({
232
- place_bet_url: "#",
354
+ placeBetUrl: "#",
233
355
  type: "LIVE MONEYLINE",
234
356
  widgetVariation: "bar",
235
357
  parentContainer: ".parent-container-class",
@@ -293,7 +415,7 @@ The `bet: +120` will match the `options` object with `description: Astros`
293
415
  question: "Who wins tonight?",
294
416
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
295
417
  custom_data: JSON.stringify({
296
- place_bet_url: "#",
418
+ placeBetUrl: "#",
297
419
  type: "LIVE MONEYLINE",
298
420
  widgetVariation: "square",
299
421
  sponsors: [
@@ -355,7 +477,7 @@ The `bet: +120` will match the `options` object with `description: Astros`
355
477
  question: "Will LA win by 3 or more runs?",
356
478
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
357
479
  custom_data: JSON.stringify({
358
- place_bet_url: "#",
480
+ placeBetUrl: "#",
359
481
  type: "LIVE SPREAD",
360
482
  sponsors: [
361
483
  {
@@ -416,7 +538,7 @@ The `bet: +120` will match the `options` object with `description: Astros`
416
538
  question: "Will LA win by 3 or more runs?",
417
539
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
418
540
  custom_data: JSON.stringify({
419
- place_bet_url: "#",
541
+ placeBetUrl: "#",
420
542
  type: "LIVE SPREAD",
421
543
  sponsors: [
422
544
  {
@@ -478,7 +600,7 @@ The `bet: +120` will match the `options` object with `description: Astros`
478
600
  question: "Will the total score be o/u 5.5?",
479
601
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
480
602
  custom_data: JSON.stringify({
481
- place_bet_url: "#",
603
+ placeBetUrl: "#",
482
604
  type: "LIVE TOTAL",
483
605
  sponsors: [
484
606
  {
@@ -539,7 +661,7 @@ The `bet: +120` will match the `options` object with `description: Astros`
539
661
  question: "Will the total score be o/u 5.5?",
540
662
  program_id: "e7df6164-bbc9-47d0-b7e8-ad4c86fa2e26",
541
663
  custom_data: JSON.stringify({
542
- place_bet_url: "#",
664
+ placeBetUrl: "#",
543
665
  type: "LIVE TOTAL",
544
666
  sponsors: [
545
667
  {
@@ -582,154 +704,23 @@ The `bet: +120` will match the `options` object with `description: Astros`
582
704
  }
583
705
  ```
584
706
 
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
707
 
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
708
+ ## Theming
718
709
 
719
- The two properties `liveSpread.kind = "image-prediction"` and `liveSpread.widgetPayload = { id: '' }` are required.
710
+ ### Usage
720
711
 
721
- ## 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.
722
713
 
723
714
  ### Usage
724
715
 
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.
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.
726
717
 
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.
718
+ All widgets extend the `Prediction` widget kind as a base, so the `widget's object property is required to contain the `predictions` object.
728
719
 
729
720
  The example below shows what is required. Any properties added within the `prediction` object are optional.
730
721
 
731
722
  ```js
732
- LiveLike.applyTheme({
723
+ embet.applyTheme({
733
724
  widgets: {
734
725
  prediction: {
735
726
 
@@ -741,7 +732,7 @@ LiveLike.applyTheme({
741
732
  Example showing a change to the header's padding and background color, and the footer's background color.
742
733
 
743
734
  ```js
744
- LiveLike.applyTheme({
735
+ embet.applyTheme({
745
736
  widgets: {
746
737
  prediction: {
747
738
  header: {
@@ -758,7 +749,7 @@ LiveLike.applyTheme({
758
749
 
759
750
  ### Theme Reference
760
751
 
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.
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.
762
753
 
763
754
  ```
764
755
  {