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/webex-viewer@v1.5.0/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/webex-viewer@v1.5.0/webex-viewer-module.js"></script>
<script src="js/app.js"></script>
<script src="https://cdn.jsdelivr.net/gh/randomcontrol/webex-viewer@v1.5.0/webex-viewer.js"></script>
Three details worth knowing:
- Set the API key before the module script. The CDN module reads
window.WEBEX_API_KEYthe 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.wasmandwebex-viewer.datacompanions 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
@latesttag 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.
Found a mistake?
We do our best to keep this reference accurate and in step with the product, but mistakes and omissions can slip through, and they are never intentional. If anything here looks wrong, incomplete, or unclear, please contact us and we will gladly fix it.
