Try ShortPoint now

How can we help you today?

Details

How to Add a Microsoft Copilot Agent Pop-up Across All SharePoint Sites in Your Tenancy

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

Want to give your SharePoint users quick access to a Microsoft Copilot Agent? This guide shows you how to add a convenient pop-up chat interface using ShortPoint's Global Scripts and Styles. Once implemented, the Copilot agent will be available across all  SharePoint sites where ShortPoint is installed.


Using Global Scripts and Styles is also recommended when you want centralized control, as it makes it simpler to maintain and update the implementation across all sites from one location.


Pop-up Microsoft Copilot Agent


Note:
To add a Microsoft Copilot Agent to a single SharePoint site, you can implement it using ShortPoint Theme Builder. For step-by-step guidance, see our article on How to Add a Microsoft Copilot Agent Pop-up into a SharePoint Site.

TABLE OF CONTENTS

Prerequisites

Adding a Pop-up Microsoft Copilot Agent

Following these steps will enable a pop-up Microsoft Copilot Agent across your SharePoint sites where ShortPoint is installed throughout your entire tenancy. If you have multiple Copilot Agents, you can specify which SharePoint sites each agent should appear on.

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 SALES_URL = `https://copilotstudio.microsoft.com/environments/Default-f7142c94-67ee-484b-8c07-0e13778c5635/bots/cr279_copilotSalesSupport/webchat?__version__=2`;
const HR_URL = `https://copilotstudio.microsoft.com/environments/Default-f7142c94-67ee-484b-8c07-0e13778c5635/bots/cr279_copilotSalesSupport/webchat?__version__=2`;
const ACCOUNTING_URL = `https://copilotstudio.microsoft.com/environments/Default-f7142c94-67ee-484b-8c07-0e13778c5635/bots/cr279_copilotSalesSupport/webchat?__version__=2`;

// --- EDIT THESE SITE COLLECTION URLS (REQUIRED) ---
// These are the URLs of the SharePoint site collections where each chat link button should appear.
const SALES_COLLECTIONS = ["/sales", "/sales-team"];
const HR_COLLECTIONS = ["/hr", "/human-resources"];
const ACCOUNTING_COLLECTIONS = ["/accounting", "/finance"];

let IFRAME_URL = "";
if (SALES_COLLECTIONS.some(site_id => window.location.href.includes("/sites/" + site_id))) {
  IFRAME_URL = SALES_URL;
} else if (HR_COLLECTIONS.some(site_id => window.location.href.includes("/sites/" + site_id))) {
  IFRAME_URL = HR_URL;
} else if (ACCOUNTING_COLLECTIONS.some(site_id => window.location.href.includes("/sites/" + site_id))) {
  IFRAME_URL = ACCOUNTING_URL;
} else {
  IFRAME_URL = SALES_URL; // Default URL if no match found
}

// --- 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="${IFRAME_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 name and URL with your own.
    • You can set your URL name and add the corresponding Copilot Agent URL
    • Add individual URL names for each Copilot Agent URL that will be assigned to specific site collections


Edit URL name and Agent URL


  • Replace Site Collection name and URL with your own
    • You can set your Site Collection URL name and add the corresponding Site Collection URLs
    • Add individual URL names for each Site Collection URL where you want specific Copilot Agents to appear


Edit Site Name and URL


  • Update the Agent URL names and Site Collection URL names in the code below to match the ones you configured earlier


Replace names in the following code


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


Adjust values on the display of the Copilot agent pop-up


  • Once done, copy the code for the next step

Step 3: Implement the code

To implement the Copilot Agent pop-up across all ShortPoint-enabled SharePoint sites—or to manage the code from a single location for easier updates across site collections—you can use the ShortPoint Global Scripts and Styles feature. Here are the steps to follow:


Note:
If you haven't yet enabled ShortPoint Global Scripts and Styles and added a Global Script text file, please refer to our guide on How to Use ShortPoint's Global Scripts and Styles before proceeding.


  • Navigate to your tenancy’s Root Site
  • Go to Site Contents and select the ShortPoint Assets document library
  • Open the "shortpoint-global-script.js" file
  • Paste the JavaScript code you just prepared
  • Save the file


Add JavaScript code to your Global Scripts file


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.


Well done! Your SharePoint site collections now have a Microsoft Copilot Agent that users can easily access through a pop-up interface.

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