Answered

How to make Co-Pilot look and feel like a real chatbot on my website?

(1) Share

Report

Posted on by DD-28101424-0

I have a Go High Level website Funnel/Site. Go High Level allows me to enter my Co-Pilot Website Code into the body of the page. Because it's only html code, the Co-Pilot app in an iFrame only shows up at the very bottom of the page, in a very small box. It's very difficult to see and you can't even see it unless you scroll to the very bottom of the page, which is not ideal.

I am also testing out Zoho's SalesIQ chatbot. Instead of using an iFrame, it uses a script. I can cut and paste their script code into the same body section within Go High Level that I am using for Co-Pilot's code, and Zoho's chatbot shows up on my website as an actual chatbot that sits in the lower right corner of the page, as most chatbots do, and stays there as I'm scrolling up and down the page, so it's always visible wherever I am on the page, like most chatbots work. (See images attached)

How can i get Co-Pilot to function like a normal chatbot instead of a small iFrame on the very bottom of my site? Is there a different set of code that I can use for Co-Pilot that makes it function more like a script and like the Zoho SalesIQ chatbot does, and other chatbots like Intercom and all of the others ones out there do? How can I get that type of UI/UX functionality with Co-Pilot on my website?

You can see how radically different these two solutions look and function in the screenshots attached. How can I get Co-Pilot to look and function like a normal chatbot and not a small chat window at the bottom of my web page?

Categories:

General topics

Screenshot 2024-1...

Your file is currently under scan for potential threats. Please wait while we review it for any viruses or malicious content.

I have the same question (0)

All responses (3)

Answers (1)

Verified answer

Vinoth Selvam 1,590 Super User 2025 Season 2 on at

Like (0)

Report

Hi DD-28101424-0,

Unfortunately, Copilot doesn’t currently provide an out-of-the-box JavaScript widget with floating behavior similar to other third-party chatbots, but you can simulate it with custom code.

You can achieve a floating chatbot experience using custom HTML, CSS, and JavaScript.

Thanks.

Was this reply helpful? Yes No
Suggested answer

Sharath V 4 on at

Like (0)

Report

Follow this article - CopilotStudioSamples/SharePointSSOComponent/SETUP.md at master · microsoft/CopilotStudioSamples · GitHub

Was this reply helpful? Yes No
CU26110138-0 16 on at

Like (0)

Report

You can make Co-Pilot behave like a normal floating chatbot by embedding a small script that injects a floating widget and toggle button which opens a fixed-position iframe, instead of dropping the raw iframe at the bottom of the body.

I work at eesel AI and we ship chat widgets like this — see our AI Chatbot for examples and embed ideas: https://www.eesel.ai/product/ai-chatbot.

Implementation tips: append a script that creates a fixed div bottom-right with high z-index, a compact toggle button that opens/closes the iframe, CSS for width/height and transitions, and use window.postMessage for iframe ↔ page communication if the iframe is cross-origin.

If Go High Level only lets you paste HTML into the page body, wrap the logic in a <script> that runs on load and appends the widget to document.body so it stays visible while scrolling.

Finally, test mobile breakpoints, keyboard accessibility (focus trapping/aria labels), and any content-security-policy or sandbox attributes that might block scripts or postMessage.

Was this reply helpful? Yes No