While it is possible to use widgets in standalone HTML pages on certain browsers, it is preferable to serve them in a web application to avoid CORS issues.
Make sure you are using the latest Node Long Term Support and Python 2.7.
Install the Express generator globally. We will use this to quickly generate a web application.
npm install express-generator -gCreate your app with Effective JavaScript templating (EJS).
express --view=ejs myappExpress ships with several great templating engines, but EJS is closest to HTML. It allows us to continue without learning another abstraction.
Install the dependencies.
cd myapp
npm installReplace the contents of views/index.ejs with the following:
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://code.s4d.io/widget-space/latest/main.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.s4d.io/widget-space/latest/bundle.js"></script>
</head>
<body>
<div
id="my-webex-widget"
style="display:inline-block; height: 415px;" />
<script>
var widgetEl = document.getElementById('my-webex-widget');
// Init a new widget
webex.widget(widgetEl).spaceWidget({
accessToken: 'REPLACE WITH YOUR ACCESS TOKEN',
spaceId: 'REPLACE WITH SPARK SPACE ID'
});
</script>
</body>
</html>Your accessToken allows you to perform actions in Cisco Spark as yourself. Get your accessToken at https://developer.webex.com/docs/api/getting-started#accounts-and-authentication and replace the value of accessToken with it.
spaceId is the ID of the Spark space where you wish to read and send messages. Visit https://developer.webex.com/docs/api/v1/rooms/list-rooms to list the spaces (rooms) you have access to. Choose an ID from one of the spaces in the items array and replace the value of spaceId with it.
Start the application.
DEBUG=myapp:* npm start🎉 Congratulations! You created your first widget.
Type a message and send it to the space. You should see it reflected in both your widget and the Spark client.
- Bender, Brian, et al. Spark Space Widget (@webex/Widget-Space). GitHub, 11 Apr. 2017, github.com/webex/react-widgets/blob/master/packages/node_modules/@webex/widget-space/README.md.