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

Report
All responses (
Answers (