@webex/widgets NPM

Webex Widgets are a set of self-contained React components that follow the Webex products experience, aimed at developers that want to embed Webex into their applications.

Install

npx install-peerdeps @webex/widgets

This will install the Widgets package, peer dependencies and dependencies.

Usage

Styles

In order to properly style Webex Widgets, you will need to import our CSS separately. Import @webex/widgets/dist/css/webex-widgets.css into your main entry file.

There are two ways to do this:

JavaScript

In your App.js[x], add the following import:

import '@webex/widgets/dist/css/webex-widgets.css';

...

HTML

In the <head> tag of your index.html, add the following tag:

<head>
  ...

  <link rel="stylesheet" type="text/css" href="node_modules/@webex/widgets/dist/css/webex-widgets.css" />
</head>

For this to work, make sure that your node_modules folder is served. Alternately, you may copy the CSS file to your public folder and update the link reference accordingly.

Widgets

Please make sure to install the Webex Widget package and related dependencies.

npx install-peerdeps @webex/widgets

To use a Webex Widget, simply import the desired widget and render it into your React application.

import {WebexMeetingsWidget} from '@webex/widgets';

import '@webex/widgets/dist/css/webex-widgets.css';

export default function App() {
  return (
    <WebexMeetingsWidget
      style={{width: "1000px", height: "500px"}} // Substitute with any arbitrary size or use `className`
      accessToken="<ACCESS_TOKEN>"
      meetingDestination="<MEETING_DESTINATION>"
    />
  );
}

Available widgets from this package are:

Webex Meetings widget

FedRAMP Environment

To enable usage simply use the fedramp prop when adding the widget to your React appplication.

import {WebexMeetingsWidget} from '@webex/widgets';

import '@webex/widgets/dist/css/webex-widgets.css';

export default function App() {
  return (
    <WebexMeetingsWidget
      accessToken="<ACCESS_TOKEN>"
      meetingDestination="<MEETING_DESTINATION>"
      fedramp={true}
    />
  );

For more information on FedRAMP visit https://developer.webex.com/docs/fedramp-overview

Features that do not work in FedRAMP

Creating Guest tokens aka JWT tokens (not a widget limitation but environment limitation)

Contributing

We'd love for you to contribute to our source code and to make the Webex Widgets even better than they are today! Here are some guidelines that we'd like you to follow.