Drag and drop the code to create a Webex Teams Recents Widget in an existing HTML page. Not all items are used.

Webex Teams Recents Widget - Explanation Overall Goal The Webex Teams Recents Widget is a pre-built UI component from Cisco that embeds a "recent conversations" panel into any HTML page. It lets users see and interact with their recent Webex Teams spaces without leaving your…

Cisco Webex API

Question

Drag and drop the code to create a Webex Teams Recents Widget in an existing HTML page. Not all items are used.

Explanation

Webex Teams Recents Widget - Explanation

Overall Goal

The Webex Teams Recents Widget is a pre-built UI component from Cisco that embeds a "recent conversations" panel into any HTML page. It lets users see and interact with their recent Webex Teams spaces without leaving your app. The correct approach uses Cisco's hosted Widget SDK (loaded via CDN <script> and <link> tags) rather than building from scratch.

The Standard Procedure

Since your options field is empty ({}), I'll walk through the canonical steps as they appear on Cisco DevNet exams:

1. Add the CSS <link> tag in <head>

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

This loads Cisco's widget stylesheet. Without it, the widget renders unstyled or broken. It must be in <head> so styles are available before the DOM renders.

2. Add a container <div> with the required attributes in <body>

<div
  data-toggle="webex-recents"
  data-access-token="YOUR_TOKEN"
  style="width:500px; height:600px;">
</div>

data-toggle="webex-recents" tells the SDK what type of widget to instantiate here.
data-access-token authenticates the widget to the Webex API on behalf of a user.
Explicit width/height are needed because the widget has no natural size - it will collapse to zero without them.

3. Add the SDK <script> tag at the bottom of <body>

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

Placing it at the bottom ensures the DOM (including your <div>) exists before the script runs. If placed in <head>, the script executes before the container div exists and the widget fails to mount.

What Goes Wrong if Steps Are Skipped

Skipped Step	Result
CSS `<link>`	Widget renders but is visually broken/unstyled
`data-toggle` attribute	SDK doesn't know where/what to render - nothing appears
`data-access-token`	Widget loads but immediately fails authentication (401)
`<script>` before closing `</body>`	DOM not ready; widget mounts to nothing
Width/height on container	Widget collapses to 0×0px - invisible

Memory Tip

Think of it as "Dress → Room → Guest":

Dress the page - CSS in <head>
Prepare the room - <div> container with token and toggle
Invite the guest - <script> at end of <body>

The guest (SDK script) can only furnish a room (div) that already exists, and the room looks right only if it's already dressed (CSS).

Topics

#Webex Teams API#Webex Widgets#HTML Integration#Recents Widget

Community Discussion

No community discussion yet for this question.

Full 300-835 Practice