CDN embed¶

Open it live: maverickrender.com/scratchpad/viewer-jsdelivr

This is the Material switcher, with exactly one difference: instead of self-hosting the viewer runtime, the runtime scripts load from jsDelivr. (Full source; the app.js stays byte-identical between the two examples: the application code does not care where the runtime came from.)

What jsDelivr is¶

jsDelivr is a free public CDN that serves files straight out of public GitHub repositories. The viewer runtime lives in the repository randomcontrol/webex-viewer, and each release is a git tag, so a jsDelivr URL decomposes as:

https://cdn.jsdelivr.net/gh/<user>/<repository>@<release tag>/<file>
https://cdn.jsdelivr.net/gh/randomcontrol/[email protected]/webex-viewer-module.js

The page then loads the runtime like this:

<script> window.WEBEX_API_KEY = 'ak_xxxxxxxxxxxxxxxx'; </script>

<script src="https://cdn.jsdelivr.net/gh/randomcontrol/[email protected]/webex-viewer-module.js"></script>
<script src="js/app.js"></script>
<script src="https://cdn.jsdelivr.net/gh/randomcontrol/[email protected]/webex-viewer.js"></script>

Three details worth knowing:

• Set the API key before the module script. The CDN module reads window.WEBEX_API_KEY the moment it loads, so define it first, in a tiny inline script as above.
• You host nothing else. The module detects its own URL and fetches the webex-viewer.wasm and webex-viewer.data companions from the same CDN folder automatically.
• Pin both scripts to the same tag. The module and the loader travel as a pair, and mixing versions is the one way to break an otherwise working page. A @latest tag exists, but pinning a release keeps your page immune to surprises.

Self-hosting instead¶

Prefer your own servers? Download the four runtime files from the repository (webex-viewer-module.js, webex-viewer.js, webex-viewer.wasm, webex-viewer.data), place them in a folder of your site, and reference the two scripts with relative paths, exactly as the Material switcher does. The module auto-detects its folder either way.