Skip to main content

Notifications

Community site session details

Community site session details

Session Id :
Copilot Studio - General
Answered

Customize appearance, toggle CP window

(0) ShareShare
ReportReport
Posted on by

I don't think this can be made by an option/configuration...
I'm not a JS/JQuery/css jedi, have you a piece of code to copy/paste in my html page to toggle the copilot frame on/off ?
Something like a button or an image to click to hide/show the copilot box on a webpage?
Thx a lot

Categories:
  • theMac Profile Picture
    on at
    Re: Customize appearance, toggle CP window

    @adilei I see that with the code you passed me, copilot creates a new session every time the page is loaded.... this creates a bomb of sessions and doesn't allow me to use the analytic page of copilot.... do you think it would be possible to create the copilot's session only on click on Copilot button (on showChat JS function)?

  • theMac Profile Picture
    on at
    Re: Customize appearance, toggle CP window

    eh thank you but this is for "ninja JS" level... how have I to add that to my custom canvas?

  • adilei Profile Picture
    on at
    Re: Customize appearance, toggle CP window

    Have a look here: CopilotStudioSamples/BuildYourOwnCanvasSamples/3.single-sign-on/index.html at master · microsoft/CopilotStudioSamples (github.com)

     

    if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
     const activity = action.payload.activity;
     let resourceUri;
     
     if (activity.from && activity.from.role === 'bot' && (resourceUri = getOAuthCardResourceUri(activity))) {
     exchangeTokenAsync(resourceUri).then(function(token) {
     if (token) {
     directLine.postActivity({
     type: 'invoke',
     name: 'signin/tokenExchange',
     value: {
     id: activity.attachments[0].content.tokenExchangeResource.id,
     connectionName: activity.attachments[0].content.connectionName,
     token
     },
     "from": {
     id: userId,
     name: clientApplication.account.name,
     role: "user"
     }
     }).subscribe(
     id => {
     if (id === 'retry') {
     // bot was not able to handle the invoke, so display the oauthCard
     return next(action);
     }
     // else: tokenexchange successful and we do not display the oauthCard
     },
     error => {
     // an error occurred to display the oauthCard
     return next(action);
     }
     );
     return;
     } else {
     return next(action);
     }
     });
     } else {
     return next(action);
     }
    } else {
     return next(action);
    }
  • theMac Profile Picture
    on at
    Re: Customize appearance, toggle CP window

    @adilei may you suggest me how to add the token variable you suggested me in another topic


    HenryJammes_5-1704306411359.png

  • theMac Profile Picture
    on at
    Re: Customize appearance, toggle CP window

    Your are THE man! 

  • Verified answer
    adilei Profile Picture
    on at
    Re: Customize appearance, toggle CP window

    Here is a simple, non-jedi example: A static page rendering PVA chatbot as a floating widget (github.com)

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

🌸 Community Spring Festival 2025 Challenge Winners! 🌸

Congratulations to all our community participants!

Warren Belz – Community Spotlight

We are honored to recognize Warren Belz as our May 2025 Community…

Congratulations to the April Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard > Copilot Studio - General

#1
Romain The Low-Code Bearded Bear Profile Picture

Romain The Low-Code... 25

#1
Pablo Roldan Profile Picture

Pablo Roldan 25

#3
stampcoin Profile Picture

stampcoin 10

Overall leaderboard