@webex/widgets 1.23.0 → 1.24.0
Sign up to get free protection for your applications and to get access to all the features.
- 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);
|