Configure a copilot for a demo website or agent console

When publishing a copilot through Microsoft Copilot for Service, you can publish to a prebuilt demo website or your own live website. A prebuilt demo website is automatically created for you when you publish your agent-facing copilot. A demo website is great for sharing your copilot with teammates and stakeholders, since they can test it while you continue to build and iterate on it.

To share your copilot, publish it to a customer engagement hub. Embedding your copilot to a customer engagement hub helps your Agent copilot assist your live agents.

Prerequisites

• Understanding Copilot for Service can help you with third-party integration. For more information, see Microsoft Copilot for Service overview.
• Have your copilot set up. If you need to set one up, see Quickstart - create and deploy a Copilot for Service.
• Before you deploy your copilot, we recommend that you evaluate your company security policies and turn on authentication for the copilot. To turn on authentication for your agents, select Security in the left panel, and then follow the steps in Choose an authentication option.

Add Copilot for Service to your generic hub

1. Update the demo website. In the Copilot for Service navigation menu, select Settings > Channels. To share the demo website link, copy the demo website URL and share it with your teammates directly.

2. View the Configure the demo website and add the copilot to your live website article to learn how to get a URL for your Copilot for Service copilot.

3. In the Copilot for Service navigation menu, select Settings > Channels.

4. Depending on the destination, select Agent console.

5. Copy the embed code for your web developer to add Copilot for Service to your hub.

Add Copilot for Service to your third-party provider

In addition to the generic instructions above, below is guidance for some common third-party providers. Please consult support for individual providers for questions about features and functionality of individual embed experiences.

Genesys

To get started, make sure these services or features are in place:

1. An active Genesys account is enabled.
2. Copy the iframe src URL,. You can use this URL in Genesys Cloud.
3. Follow the Genesys documentation to Set up an Interaction Widget integration.
4. On step 7 of the Genesys article, paste your src URL as the Application URL of your Configuration > Properties.

Salesforce

To get started, make sure these services or features are in place:

1. An active Salesforce account with Service Cloud and Lightning enabled. You need a Salesforce account to connect Copilot for Service.

2. Admin or developer access to both Salesforce and Copilot for Service.

3. Copy the iframe src URL,.

4. In the navigation menu, select Settings > Channels > Agent console.

5. Copy the custom iframe snippet in Embed code. For more information, see Add your copilot to your website.

6. Create a Visualforce Page reference with the iframe.

7. Log in to your Salesforce account and navigate to Setup.

8. In the Quick Find box, type "Visualforce" and select Visualforce Pages.

9. Select New to create a new Visualforce Page.

   • Add a Label.
   • Add a Name.
   • Add a checkmark to Available for Lightning Experience.

10. Inside the Visualforce Markup box, add the following code. Be sure to provide your own values for {domain}, {environment}, {bot}, and {version}.

    <apex:page >
      <iframe src="https://{domain}/environments/{environment}/copilots/{bot}}/webchat?__version__={version}" frameborder="0" style="width: 100%; height:100%;"></iframe>
    </apex:page>
    

    Note

    You may have to adjust the height of the iframe based on the size of the Agent Desktop widget. For instance, instead of height being 100%, you can swap for 300px

11. Select Save.

ServiceNow

To get started, make sure these services or features are in place:

1. An active ServiceNow account.

   Note

   ServiceNow Vancouver or later is required.

2. The options ServiceNow Virtual Agent and ServiceNow Bot Interconnect enabled.
3. A Copilot for Service (CFS) copilot.
4. Admin or developer access to both ServiceNow and Copilot for Service.

Create an Azure-based function URL

The Azure function URL that you create in these steps is used as the secondary bot endpoint in your ServiceNow instance. For more details, see Create a JavaScript function in Microsoft Azure using Visual Studio Code.

1. Sign in and create a JavaScript function in Microsoft Azure.
2. Create an Azure Function for Microsoft Copilot Studio as Secondary bot with ServiceNow Bot Interconnect setup, as described in ServiceNow KB1112368.
3. Install the request-promise libraries.
4. Deploy the project to Azure.
5. From the Azure portal, navigate to All Resources, and select the name of the function app that you created.
6. On the Overview page for the function, copy the function URL and keep it for use in a later step.

Use Direct Line to connect ServiceNow and your copilot together

1. Retrieve Direct Line secret for your bot.

2. Add the Direct Line secret key to your Virtual Agent Bot Interconnect instance.

Configure channel, provider, authentication, and configuration settings

1. Create a Virtual Agent Bot Interconnect shell topic to call Microsoft Copilot Studio topics.

2. Create a Virtual Agent conversational custom chat integration configuration:

   1. Create a new channel or update an existing channel for the integration.

   2. Configure a new provider for the integration.

   3. Set up message authentication.

   4. Create a channel identifier.

   5. Select rich controls for inbound (user input) and outbound (bot response) transformation.

   6. Create and configure a scripted REST API for your custom chat integration.

Employ iframes to render copilot content

For iframe method options in ServiceNow, see iFrame methods.

Tip

You may have to adjust the height of the iframe based on the size of the Agent Desktop widget. For instance, instead of height being 100%, you can use 300px

Zendesk

Implement the following iframe and component steps to connect Zendesk Agent Desktop to a Copilot for Service copilot.

Before you begin, make sure that you have the following prerequisites in place:

• An active Zendesk Support account with Zendesk.
• An account for Copilot for Service.

  Note

  If you don't have a Copilot for Service account or copilot created, see the Quickstart guide for building copilots in Copilot for Service.

• Admin or developer access to both Zendesk and Microsoft Power Platform.
• An active and deployed Copilot for Service copilot with Zendesk.

Retrieve the custom Copilot for Service iframe

From your Copilot for Service navigation menu, select Settings > Channels > Custom website to copy your embed code for the iframe.

Add the Copilot for Service iframe to the agent interface

1. Log in to Zendesk Support and navigate to Zendesk Products > Admin Section.

2. Select Apps > Zendesk Support apps from the menu on the left.

3. Go to the Marketplace and search for "Iframe Ticket Sidebar".

   

4. Install the iframe app.

5. Configure the Iframe Sidebar by adding the URL from your Copilot for Service into the iframe URL field. make sure you paste only the URL, excluding any HTML tags.

   Note

   You may have to adjust the height of the iframe based on the size of the Agent Desktop widget. For instance, instead of height being 100%, you can use 300px

6. Select Update.

Add a component to the Agent Desktop

1. Log in to your Zendesk account and open a ticket. For more information about tickets, see Working with tickets.

2. From the navigation menu, choose Apps > Iframe Ticket Sidebar.

   Note

   For quicker access, use the Pin to Sidebar option.