web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Copilot Studio / Passing Email Address ...
Copilot Studio
Unanswered

Passing Email Address of user from React App to Power virtual agent

(0) ShareShare
ReportReport
Posted on by 11

Hi Team, 

 

 We need a solution, how to pass email address after Azure authentication in react webapp to Power Virtual Agent. We want to store that email address in PVA as a global variable which we will use for further activity like retrieving ServiceNow ticket based on email address. 

 

Our overall goal is we don't want user to enter email address, as he can enter email for others too.

 

Below is the code i am using in React for PVA bot popup customization

 

************************************************************

<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoso Sample Web Chat</title>

<style>
html,
body {
height: 100%;
}

body {
margin: 0;
}

h1 {
color: whitesmoke;
font-family: Segoe UI;
font-size: 16px;
line-height: 20px;
margin: 0;
padding: 0 20px;
}

#banner {
align-items: center;
background-color: black;
display: flex;
height: 50px;
}

#webchat {
height: calc(100% - 50px);
overflow: hidden;
position: fixed;
top: 50px;
width: 100%;
}
</style>
</head>
<body>
<div>
<div id="banner">
<h1>Contoso Bot Name</h1>
</div>
<div id="webchat" role="main"></div>
</div>

<script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

<script>
(async function () {

const styleOptions = {
// Hide upload button.
hideUploadButton: true,
};

const tokenEndpointURL = new URL(
'TokenEndpointURL'
);


const locale = document.documentElement.lang || 'en'; // Uses the language specified in the <html> element and falls back to English (United States).


const apiVersion = tokenEndpointURL.searchParams.get('api-version');

const [directLineURL, token] = await Promise.all([
fetch(
new URL(`/powervirtualagents/regionalchannelsettings?api-version=${apiVersion}`, tokenEndpointURL)
)
.then((response) => {
if (!response.ok) {
throw new Error('Failed to retrieve regional channel settings.');
}

return response.json();
})
.then(({ channelUrlsById: { directline } }) => directline),
fetch(tokenEndpointURL)
.then((response) => {
if (!response.ok) {
throw new Error('Failed to retrieve Direct Line token.');
}

return response.json();
})
.then(({ token }) => token),
]);


const directLine = window.WebChat.createDirectLine({
domain: new URL('v3/directline', directLineURL),
token,
});

// Send the username and start the conversation
directLine
.postActivity({
from: { id: 'yourUserId', name: 'YourUserName' },
type: 'message',
text: 'Hello, EmailAddress',
})
.subscribe();

WebChat.renderWebChat({ directLine, locale, styleOptions }, document.getElementById('webchat'));
})();
</script>
</body>
</html>

****************************************************************************************************

In Above code in place for EmailAddress we are passing our react variable where we have store email after login

Categories:
I have the same question (0)
  • HenryJammes Profile Picture
    Microsoft Employee on at

    Hi @amit_05 

     

    You can pass context variables to a Copilot Studio bot in the activities sent to the Direct Line API.

    For example, the below values Language and TrackingId can fill values the Global.Language and Global.TrackingId variables that have been configured to accept external values in Copilot Studio, as part of the conversation start event:

     

    activity: {
     channelData: {
     postBack: true,
     },
     name: 'startConversation',
     type: "event",
     // Passing context variables, created as Global variables accepting external values in Copilot Studio
     value: {
     Language: "en",
     TrackingId: "G-1234567"
     }
    }

     

    In Copilot Studio, the questions for the global variables don't have to be defined in the triggered topic, they can live in any custom topic:

     

    HenryJammes_0-1704288598211.png

     

     

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

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Users!

Kudos to our 2025 Community Spotlight Honorees

Congratulations to our 2025 community superstars!

Congratulations to the April Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Copilot Studio

#1
Valantis Profile Picture

Valantis 787

#2
Vish WR Profile Picture

Vish WR 300

#3
Haque Profile Picture

Haque 262

Last 30 days Overall leaderboard