OnlyCopilotFans | Copilot Studio Agent Web Channel Direct Line Deployment (Interactive)

Designed for Microsoft Copilot Studio agents

Web Channel Direct Line deployment template

Created by AJ Ansari, Microsoft MVP

Fully configurable
Deploy in minutes
Free &
Source Available

See what the basic IFRAME embed Chat Widget looks like (hint: not very pretty)

Launcher button

The launcher is the floating button in the corner that opens and closes the chat.

Launcher style launcherStyle

All five styles explained

full: Icon + full label. "Close chat" while open. Default.
compact: Icon + short label. "Close" while open.
icon: Round button, icon only. An X while open.
fulltext: Full label only, no icon.
compacttext: Short label only, no icon.

Full label launcherLabelFull

Used by the full and fulltext styles.

Short label launcherLabelCompact

Used by the compact and compacttext styles.

Font size adjustment (px) fontSizeAdjust

Added to every text size in the widget: launcher, header, messages, input and buttons. 0 is the built-in size, +2 enlarges, -2 shrinks. Recommended range -5 to +5.

Pinned to launcherPosition

The corner the launcher sits in. The floating chat window opens above the button at the bottom, below it at the top.

Offset from edge (px) launcherOffsetUp

Moves the launcher and the chat window up from the bottom edge, or down from the top edge when pinned top-right.

Offset left (px) launcherOffsetLeft

Moves them left from the right edge. Use both to clear a cookie banner or another button in the corner. 0 and 0 is the corner.

Icon launcherIconUrl

Shown on the launcher button and in the chat window title bar, inside a circle. Recommended: a square 136 × 136 px PNG, JPG, WebP or SVG with the subject centred and a little padding. Any image you pick is scaled and centre-cropped to 136 × 136 here; for your own site, save the file as images/chat-icon.png.

Button colour launcherColor

Colour of the launcher button. A darker shade for the gradient is derived automatically.

Message box colour inputBoxColor

Background of the box where the visitor types. Text stays dark, so keep it light.

Chat window layout

Where the chat window appears when the launcher is pressed: floating in the corner, docked to the right edge like Copilot in Edge or Office, or covering the browser window.

Display mode displayMode

Sidecar width sidecarWidth

Pixels (420) or a share of the browser window (30%).

Resizable sidecarResizable

The visitor can stretch the sidecar by dragging its left edge, or focus the edge and press the arrow keys.

Push the page sidecarPushPage

Like Copilot in Edge: with true the page content shifts left so nothing is hidden behind the sidecar.

Width fullscreenWidth

Height fullscreenHeight

A share of the browser window (100%) or pixels (900). Anything smaller than the window is centred over a dimmed page.

Close (X) button closeButton

With the X hidden, the launcher stays on top of the chat window so the visitor can still return to the page. Escape closes too.

Open on page load openOnLoad

For a page dedicated to the chat: the window is already open when the page loads.

Text

Chat title chatTitle

Heading in the chat window, next to the icon. Also used as the window's accessible name for screen readers. Leave blank to use the default.

Input placeholder inputPlaceholder

Grey hint text shown in the message box before the visitor types.

Optional features

These only show or hide controls in the widget. The agent must support them too: in Copilot Studio open the agent, go to Settings > Generative AI, turn on File uploads and/or Collect user reactions to agent messages, then publish the agent again.

File uploads fileUploads

Shows a paperclip in the message box so visitors can attach files (up to 15 MB each). Hide it when the agent does not accept files.

Feedback buttons feedbackButtons

Thumbs up / thumbs down under agent replies, with an optional comment box. auto shows them only on replies the agent marks as accepting feedback, always turns them on for every reply, never turns them off.

Try with your own agent

Paste the Direct Line secrets of your own Copilot Studio agent to chat with it here instead of the default agent. Leave both blank to use the agent from config.js.

Reminder: this works only for agents that run without authentication. The widget talks to Direct Line with a secret alone, so an agent that requires users to sign in will not respond here.

Classic experience agents only (as of October 8, 2026). Direct Line is currently offered for classic experience agents (standard harness). A new experience agent (GitHub Copilot harness) accepts the secret and shows Online, but sends no greeting and no replies, because Microsoft lists the Direct Line channel as not yet available for that harness. Use the iframe embed for those agents until Direct Line support arrives.

In Copilot Studio open your agent and go to Settings > Security.
Open Authentication and set it to No authentication. Save.
Open Web channel security and copy Secret 1, and optionally Secret 2, into the fields below.
Require secured access on that page is recommended but optional: the widget always sends a secret, so it works either way. On, the agent refuses Direct Line callers that bring no secret.
Save, publish the agent again, then press Try It here.

Primary secret directLine.primarySecret

Secret 1. Used first to request a Direct Line token for the conversation.

Secondary secret directLine.secondarySecret

Secret 2. Only tried if the primary secret is rejected, so you can rotate one secret without downtime.

Secrets you paste here stay in this browser tab's session storage and are never written to a file. Anyone who has a secret can talk to the agent, so use a test agent and regenerate the secret in Copilot Studio when you are done.

Agent: default from config.js

Your settings as config.js values

Paste these over the matching lines in your own config.js.

Take it to your own site

Download a ready-made package built from the settings above: the widget files, a config.js filled in with your values, your icon, and EMBED.html with the code to paste into a web page, another page of your site, or WordPress. The zip is built in your browser; nothing is uploaded.