Try ShortPoint now

How can we help you today?

Details

How to Add a Microsoft Copilot Agent Pop-up into a SharePoint Site

Modified on: Thu, 14 Aug, 2025 at 2:22 PM

Want to add a Microsoft Copilot Agent as a pop-up to your SharePoint site? This step-by-step guide will show you how to implement it using ShortPoint Theme Builder.


Add Microsoft Copilot agent as a pop-up up to a single site


Note:
To implement a Microsoft Copilot Agent across multiple SharePoint sites or your entire tenancy, use ShortPoint Global Scripts and Styles. For detailed instructions, see our article on How to Add a Microsoft Copilot Agent Pop-up Across All SharePoint Sites in Your Tenancy.

TABLE OF CONTENTS

Prerequisites

  • You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
  • You are a ShortPoint Designer with an active license.
  • You must have at least one published Agent from Copilot Studio ready to use. If you don't have one yet, visit Microsoft Copilot Studio.

Adding a Pop-up Microsoft Copilot Agent to a Site

Following these steps will enable a pop-up Microsoft Copilot Agent on a SharePoint site.


Step 1: Get the Copilot Agent URL

  • Open Copilot Studio
  • Select Agents and open the Copilot Agent you want to use
  • Go to the Channels tab and open Web App
  • Copy the Embed code and paste it into a notepad


Copy the Agent URL from Microsoft Copilot studio


  • Extract the URL following iframe src= from the embed code


extract the Agent URL from the embed code


Note:
Only Copilot Agents configured with "No Authentication" in their Security settings will have the Web App channel option available. You may be charged per prompt, depending on how your organization's Microsoft Copilot plan is set up.


Step 2: Prepare the JavaScript code

The pop-up interface on your SharePoint pages will be created using JavaScript code.

  • Copy this code and paste it into a notepad:


// --- EDIT THESE URLS (REQUIRED) ---
const AGENT_URL = `https://copilotstudio.microsoft.com/environments/Default-f7142c94-67ee-484b-8c07-0e13778c5635/bots/cr279_copilotSalesSupport/webchat?__version__=2`;

// --- CONFIGURABLE VALUES IN PX (OPTIONAL) ---
const CHAT_WIDTH = 350;
const CHAT_HEIGHT = 500;
const BUTTON_SIZE = 56;
const BUTTON_RIGHT = 40;
const BUTTON_BOTTOM = 20;
const CHAT_RIGHT = 40;

// ========== Don't modify the code below =============

// 1- Reset the page in case the script loaded twice:
const chatBtnDel = document.querySelector('.t3-chat-btn');
if (chatBtnDel) chatBtnDel.remove();

const chatWindowDel = document.querySelector('.t3-chat-window');
if (chatWindowDel) chatWindowDel.remove();

const styleSheetsDel = Array.from(document.querySelectorAll('style'));
for (const style of styleSheetsDel) {
  if (
    style.textContent.includes('.t3-chat-btn') &&
    style.textContent.includes('.t3-chat-window')
  ) {
    style.remove();
  }
}

// --- SVG ICONS ---
const chatIconImg = `<img src="https://shortpoint-software.s3.us-east-1.amazonaws.com/assets/Microsoft_365_Copilot_Icon-small.png" style="width: 24px; height: 24px;">`;
const closeIconSVG = `
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
  <line x1="6" y1="6" x2="18" y2="18" stroke="#fff" stroke-width="2"/>
  <line x1="18" y1="6" x2="6" y2="18" stroke="#fff" stroke-width="2"/>
</svg>
`;

// --- STYLES ---
const style = document.createElement('style');
style.textContent = `
.t3-chat-btn {
  position: fixed;
  right: ${BUTTON_RIGHT}px;
  bottom: ${BUTTON_BOTTOM}px;
  width: ${BUTTON_SIZE}px;
  height: ${BUTTON_SIZE}px;
  background: linear-gradient(135deg, #61ADFF 0%, #2351A2 100%);
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
  border: none;
  transition: box-shadow 0.2s;
  overflow: hidden;
}
.t3-chat-btn:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
}
.t3-chat-window {
  font-family: sans-serif;
  position: fixed;
  width: ${CHAT_WIDTH}px;
  height: ${CHAT_HEIGHT}px;
  right: ${CHAT_RIGHT}px;
  bottom: ${BUTTON_BOTTOM + BUTTON_SIZE + 16}px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.t3-chat-window.visible {
  opacity: 1;
  pointer-events: auto;
}
.t3-chat-icon {
  position: absolute;
  left: 50%; top: 55%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  opacity: 0;
  pointer-events: none;
}
.t3-chat-btn .t3-chat-icon-chat {
  opacity: 1;
}
.t3-chat-btn.open .t3-chat-icon-chat {
  opacity: 0;
}
.t3-chat-btn .t3-chat-icon-close {
  opacity: 0;
}
.t3-chat-btn.open .t3-chat-icon-close {
  opacity: 1;
}
`;
document.head.appendChild(style);

// --- CREATE BUTTON ---
const chatBtn = document.createElement('button');
chatBtn.className = 't3-chat-btn';
chatBtn.style.borderRadius = "50% !important";
chatBtn.style.margin = "0px !important"; 
chatBtn.style.boxSizing = "border-box !important";
chatBtn.style.padding = "1px 6px !important"; 

chatBtn.innerHTML = `
  <span class="t3-chat-icon t3-chat-icon-chat">${chatIconImg}</span>
  <span class="t3-chat-icon t3-chat-icon-close">${closeIconSVG}</span>
`;
document.body.appendChild(chatBtn);

// --- CREATE CHAT WINDOW ---
const chatWindow = document.createElement('div');
chatWindow.className = 't3-chat-window';
chatWindow.innerHTML = `
  <div style="height: 100%; padding: 0px; overflow: hidden;">
    <iframe src="${AGENT_URL}" frameborder="0" style="width: 100%; height: 100%;"></iframe>
  </div>
`;
document.body.appendChild(chatWindow);

// --- TOGGLE LOGIC ---
let chatOpen = false;

chatBtn.addEventListener('click', () => {
  if (!chatOpen) {
    chatWindow.classList.add('visible');
    chatBtn.classList.add('open');
    chatOpen = true;
  } else {
    chatWindow.classList.remove('visible');
    chatBtn.classList.remove('open');
    chatOpen = false;
  }
});
  • Replace the placeholder Copilot Agent URL with your own

Replace Copilot agent URL

  • (Optional) Adjust the values in the following code according to your preference

Adjust values of the pop-up display

  • Once done, copy the code for the next step

Step 3: Implement the code

To add the pop-up Copilot Agent to a specific Site Collection, add your prepared JavaScript code to the ShortPoint Theme Builder.


  • Go to the site where you want to add the Copilot Agent
  • Open ShortPoint Theme Builder
  • In the main menu, scroll down to Utilities
  • Select Custom JavaScript
  • Paste the code into the JavaScript field
  • Hit Apply
  • Then Publish your changes


Add JavaScript code to Theme Builder


Note:
If your pop-up appears blank after successful implementation, make sure you have enabled content embedding from copilotstudio.microsoft.com in your Site Settings. You can Allow or restrict the ability to embed content on SharePoint pages by following the steps in the link provided.


Congratulations! Your SharePoint site now has a Microsoft Copilot Agent pop-up that users can easily use.

Related articles:


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

Visit our dedicated courses on ShortPoint Academy

Click Here!

World's best intranet sites are designed using ShortPoint

Get started today! Learn more

Visit our dedicated courses on ShortPoint Academy

Click Here!
See all 2 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more