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

Notifications

Announcements

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
    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

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Leaderboard > Copilot Studio

#1
Michael E. Gernaey Profile Picture

Michael E. Gernaey 255 Super User 2025 Season 2

#2
Romain The Low-Code Bearded Bear Profile Picture

Romain The Low-Code... 205 Super User 2025 Season 2

#3
S-Venkadesh Profile Picture

S-Venkadesh 101 Moderator

Last 30 days Overall leaderboard