Before code
Create a channel and ownership model
- Choose whether the channel represents a website, language, department, product or campaign.
- Name at least two operational owners and define business-hour coverage.
- Confirm every agent has the required Teams access and understands thread-based replies.
- Separate test and production routing where the product configuration permits it.
- Document who can administer the WebChat backend and the Teams app.
Implementation
Use the asynchronous script with the exact locale channel
The supplied widget pattern loads widget.js asynchronously and identifies the route through a channel query parameter. A copied channel ID can send real customer requests to the wrong language or team.
Place the script near the closing body tag unless your CMS or consent platform requires a controlled loader. Do not duplicate the same widget through both source code and tag manager.
Sources: 2
Browser and privacy controls
Check CSP, consent, disclosure and accessibility
- Allow only the required script, frame, connect and asset origins in Content Security Policy.
- Decide with the privacy owner whether the widget loads immediately or after consent.
- Update the privacy notice with verified controller, processor, retention and transfer information.
- Test keyboard focus, visible labels, contrast, zoom and screen-reader announcements.
- Do not publish unverified GDPR or hosting guarantees.
Acceptance
Run a complete round trip, not a launcher check
- 01
Load
Check desktop, mobile, slow connection, blocked storage and relevant consent states.
- 02
Route
Send distinct messages from each page, language and configured intent.
- 03
Reply
Answer from the intended Teams channel and verify the visitor receives it.
- 04
Fail
Test outside hours, unavailable agents, reconnect and a deliberately blocked script.
- 05
Observe
Check console errors, network requests, Teams notifications and operational ownership.
Production
Deploy gradually and retain rollback
Start with one representative route, validate real traffic and support ownership, then expand to templates and locales. Record the deployed channel-to-site mapping so future editors do not copy the wrong snippet.
Remove the old Microsoft widget only after the new production path is accepted and monitored.