@webex/widgets 1.23.0 → 1.24.0
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.
- package/README.md +19 -42
- package/dist/webexWidgets.esm.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -20,19 +20,9 @@
|
|
|
20
20
|
that follow the [Webex](https://www.webex.com) products experience,
|
|
21
21
|
aimed at developers that want to embed Webex into their applications.
|
|
22
22
|
|
|
23
|
-
## Project Status
|
|
24
|
-
|
|
25
|
-
The Webex Component System is considered to be in beta stage and it's not a generally available product from Webex at this time.
|
|
26
|
-
This means that the Webex Component System is available for everyone to use but breaking changes may occur as we develop it.
|
|
27
|
-
We try our best to minimize any breaking changes but they may occur.
|
|
28
|
-
While the Webex Component System is not a GA product, we still offer support through all regular channels.
|
|
29
|
-
However, bug priority is given to product already generally available.
|
|
30
|
-
We love for you to use the Webex Component System and be part of the feedback process!
|
|
31
|
-
|
|
32
23
|
## Table of Contents
|
|
33
24
|
|
|
34
25
|
- [Install](#install)
|
|
35
|
-
- [Webex Components vs Webex Widgets](#webex-components-vs-webex-widgets)
|
|
36
26
|
- [Usage](#usage)
|
|
37
27
|
- [Contributing](#contributing)
|
|
38
28
|
- [License](#license)
|
|
@@ -42,38 +32,17 @@ We love for you to use the Webex Component System and be part of the feedback pr
|
|
|
42
32
|
## Install
|
|
43
33
|
|
|
44
34
|
```bash
|
|
45
|
-
|
|
35
|
+
npx install-peerdeps @webex/widgets
|
|
46
36
|
```
|
|
47
37
|
|
|
48
|
-
|
|
49
|
-
has to be installed as a peer dependency.
|
|
50
|
-
|
|
51
|
-
## Webex Components vs Webex Widgets
|
|
52
|
-
|
|
53
|
-
In addition to the Webex Widgets, we also offer the
|
|
54
|
-
[Webex Component System](https://github.com/webex/components#webex-components).
|
|
55
|
-
The Webex Component System (sometimes shortened as _Webex Components_) is a set of
|
|
56
|
-
React components that, while following Webex styling, allow for more granularity
|
|
57
|
-
in terms of layout and source of data.
|
|
58
|
-
To learn more on the Webex Component System head to its Github repository at
|
|
59
|
-
https://github.com/webex/components.
|
|
60
|
-
|
|
61
|
-
Webex Widgets are based on Webex Components but include the adapter that uses
|
|
62
|
-
our [Javascript SDK](https://github.com/webex/webex-js-sdk) to talk to Webex services for you.
|
|
63
|
-
This means that the Webex Widgets use the
|
|
64
|
-
[SDK Component Adapter](https://github.com/webex/sdk-component-adapter#webex-sdk-component-adapter)
|
|
65
|
-
to inject the Webex data.
|
|
66
|
-
All you need is a valid access token and a few parameters based on the widget you want to use.
|
|
67
|
-
|
|
68
|
-
You have to take the Widget layout as-is, but the benefit is that there are no configurations needed.
|
|
69
|
-
Install, copy-paste and you have the power of Webex in your application!
|
|
38
|
+
This will install the Widgets package, peer dependencies and dependencies.
|
|
70
39
|
|
|
71
40
|
## Usage
|
|
72
41
|
|
|
73
42
|
### Styles
|
|
74
43
|
|
|
75
44
|
In order to properly style Webex Widgets, you will need to import our CSS separately.
|
|
76
|
-
Import `@webex/widgets/dist/
|
|
45
|
+
Import `@webex/widgets/dist/css/webex-widgets.css` into your main entry file.
|
|
77
46
|
|
|
78
47
|
There are two ways to do this:
|
|
79
48
|
|
|
@@ -82,7 +51,7 @@ There are two ways to do this:
|
|
|
82
51
|
In your `App.js[x]`, add the following import:
|
|
83
52
|
|
|
84
53
|
```js
|
|
85
|
-
import '@webex/widgets/dist/
|
|
54
|
+
import '@webex/widgets/dist/css/webex-widgets.css';
|
|
86
55
|
|
|
87
56
|
...
|
|
88
57
|
```
|
|
@@ -95,7 +64,7 @@ In the `<head>` tag of your `index.html`, add the following tag:
|
|
|
95
64
|
<head>
|
|
96
65
|
...
|
|
97
66
|
|
|
98
|
-
<link rel="stylesheet" type="text/css" href="node_modules/@webex/widgets/dist/
|
|
67
|
+
<link rel="stylesheet" type="text/css" href="node_modules/@webex/widgets/dist/css/webex-widgets.css" />
|
|
99
68
|
</head>
|
|
100
69
|
```
|
|
101
70
|
|
|
@@ -105,26 +74,34 @@ reference accordingly.
|
|
|
105
74
|
|
|
106
75
|
### Widgets
|
|
107
76
|
|
|
108
|
-
Please make sure to install the [Webex
|
|
109
|
-
along with the [Webex Widget](https://www.npmjs.com/package/@webex/widgets) package.
|
|
77
|
+
Please make sure to install the [Webex Widget](https://www.npmjs.com/package/@webex/widgets) package and related dependencies.
|
|
110
78
|
|
|
111
79
|
```bash
|
|
112
|
-
|
|
80
|
+
npx install-peerdeps @webex/widgets
|
|
113
81
|
```
|
|
114
82
|
|
|
115
83
|
To use a Webex Widget, simply import the desired widget and render it into your React application.
|
|
116
84
|
|
|
117
85
|
```js
|
|
118
|
-
import React from 'react';
|
|
119
86
|
import {WebexMeetingsWidget} from '@webex/widgets';
|
|
120
87
|
|
|
121
|
-
import '@webex/widgets/dist/
|
|
88
|
+
import '@webex/widgets/dist/css/webex-widgets.css';
|
|
122
89
|
|
|
123
90
|
export default function App() {
|
|
124
|
-
return
|
|
91
|
+
return (
|
|
92
|
+
<WebexMeetingsWidget
|
|
93
|
+
style={{width: "1000px", height: "500px"}} // Substitute with any arbitrary size or use `className`
|
|
94
|
+
accessToken="<ACCESS_TOKEN>"
|
|
95
|
+
meetingDestination="<MEETING_DESTINATION>"
|
|
96
|
+
/>
|
|
97
|
+
);
|
|
125
98
|
}
|
|
126
99
|
```
|
|
127
100
|
|
|
101
|
+
Available widgets from this package are:
|
|
102
|
+
|
|
103
|
+
- [Webex Meetings widget](https://github.com/webex/widgets/tree/master/src/widgets/WebexMeetings#webex-meetings-widget)
|
|
104
|
+
|
|
128
105
|
## Contributing
|
|
129
106
|
|
|
130
107
|
We'd love for you to contribute to our source code and to make the Webex Widgets even better than they are today!
|
package/dist/webexWidgets.esm.js
CHANGED
|
@@ -16610,7 +16610,7 @@ var WebexMeetings = si(ai(WebexMeetingsWidget), function (props) {
|
|
|
16610
16610
|
},
|
|
16611
16611
|
config: {
|
|
16612
16612
|
appName: appName,
|
|
16613
|
-
appVersion: "1.
|
|
16613
|
+
appVersion: "1.23.0"
|
|
16614
16614
|
}
|
|
16615
16615
|
});
|
|
16616
16616
|
return new WebexSDKAdapter(webex);
|