Drag and Drop Question. Drag and drop the code to add a Webex Teams Space Widget in an existing HTML page. Not all items are used.

Webex Teams Space Widget - HTML Integration Since the answer options weren't included ({}), I'll explain the correct procedure based on the official Webex (formerly Cisco Spark) Widget documentation, which is the basis for this type of DevNet exam question. --- Overall Goal The W

Cisco Webex API

Question

Drag and Drop Question. Drag and drop the code to add a Webex Teams Space Widget in an existing HTML page. Not all items are used.

Exhibits

Explanation

Webex Teams Space Widget - HTML Integration

Since the answer options weren't included ({}), I'll explain the correct procedure based on the official Webex (formerly Cisco Spark) Widget documentation, which is the basis for this type of DevNet exam question.

Overall Goal

The Webex Teams Space Widget lets you embed a live Webex messaging space directly into a web page using a CDN-hosted bundle. No backend server is required - the widget runs entirely client-side using an access token.

Correct Steps & Why Each Matters

Step 1 - Add the CSS <link> in <head>

<link rel="stylesheet" href="https://code.s4d.io/widget-space/production/main.css">

Loads the widget's stylesheet. Must be in <head> so the widget renders styled on first paint. Without this, the widget appears as an unstyled, broken layout.

Step 2 - Add a <div> placeholder in <body>

<div
  data-toggle="ciscospark-widget"
  data-type="space"
  data-access-token="YOUR_ACCESS_TOKEN"
  data-destination-id="ROOM_ID"
  data-destination-type="spaceId"
  style="width: 750px; height: 500px;">
</div>

This is the mount point. The data-* attributes tell the widget script what space to load and with what credentials. Without this div, the JavaScript has nowhere to render.

Step 3 - Add the JavaScript bundle <script> before </body>

<script src="https://code.s4d.io/widget-space/production/bundle.js"></script>

Loads the widget engine. Placed after the <div> so the DOM element already exists when the script runs and auto-initializes via the data-toggle attribute. If placed in <head>, the script runs before the div exists and the widget fails to mount.

What Goes Wrong if Steps Are Skipped

Skipped Step	Failure
CSS link	Widget renders unstyled / broken visually
The `<div>`	Widget has no mount target - nothing appears
`data-access-token`	API calls return 401 Unauthorized
`data-destination-id`	Widget doesn't know which space to load
JS bundle after div	Script runs before DOM is ready - mount fails

Memory Tip

Think "Head, Body, Boot":

Head = styles (CSS)
Body = placeholder div with data attributes
Boot = script at end of body kicks off the widget

Note on "Not All Items Are Used"

Common distractors in this question include things like:

data-type="message" (wrong - correct value is "space")
<script> placed in <head> (wrong order)
Incorrect CDN URLs or widget types (e.g., the Meet widget URL instead of Space)
Redundant manual window.ciscoSparkWidget() init calls (not needed when using data-toggle)

Topics

#Webex Widget#HTML Integration#Web Embedding

Community Discussion

No community discussion yet for this question.

Full 300-835 Practice