Reputation: 37
I used to be able to pass the Username
and UserID
parameter from the URI using the below code on Webchat:
var queryString = window.location.search;
var urlParams = new URLSearchParams(queryString);
var user = urlParams.get('userid')
var usern = urlParams.get('username')
and I pass it on to the Webchat using the below code:
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token: }),
store,
userID: user,
username: usern,
styleOptions
}, document.getElementById('webchat'));
document.querySelector('#webchat > *').focus();
Now this works perfectly before when I was using the usual Webchat for the Botframework. Its no longer working when I started using ReachJS on the Webchat. How do I pass this parameter using the Webchat Hooks API? I tried specifying it using the below code but does not work.
ReactDOM.render(
<Composer directLine={window.WebChat.createDirectLine({ token: })}>
<BasicWebChat />
<SendMessageOnConnect />
<user />
<usern />
</Composer>,
document.getElementById('webchat')
);
Upvotes: 0
Views: 1213
Reputation: 6418
This works in my React project. Your implementation is different, but this should put you in the right direction. You can see in the listed activity that the user name
is updated to 'Steve'. In my case, id
is not updated because I am generating an id with the token. When an id is generated via Direct Line with the token, it takes precedence over any id's passed via Web Chat.
import React from 'react';
import ReactWebChat, { createDirectLine } from 'botframework-webchat';
export default class WebChatView extends React.Component {
constructor(props) {
super(props);
this.state = {
user: '',
usern: ''
};
}
componentDidMount() {
var queryString = window.location.search;
var urlParams = new URLSearchParams(queryString);
var user = urlParams.get('userid');
var usern = urlParams.get('username');
this.setState({ user: user, usern: usern })
this.fetchToken();
}
async fetchToken() {
const res = await fetch('http://localhost:3500/directline/token', { method: 'POST' });
const { token } = await res.json();
this.setState(() => ({
directLine: createDirectLine({ token: token })
}));
}
render() {
return (
this.state.directLine ?
<ReactWebChat
directLine={this.state.directLine}
userID={this.state.user}
username={this.state.usern}
/>
:
<div>Connecting to bot…</div>
)
}
}
Activity output:
{
type: 'message',
id: '4wpfp......-f|0000002',
timestamp: 2020-09-02T21:39:01.197Z,
serviceUrl: 'https://directline.botframework.com/',
channelId: 'directline',
from: { id: 'dl_15990824712200.ruhpue7p1j', name: 'Steve', role: 'user' },
conversation: { id: '4wpfp......-f' },
recipient: { id: 'botberg@QaeuoeEamLg', name: 'Bot' },
textFormat: 'plain',
locale: 'en-US',
text: 'Hi',
entities: [
{
type: 'ClientCapabilities',
requiresBotState: true,
supportsListening: true,
supportsTts: true
}
],
channelData: {
clientActivityID: '1599082740974mexnvax1jq',
clientTimestamp: '2020-09-02T21:39:00.974Z'
},
rawTimestamp: '2020-09-02T21:39:01.1971653Z',
callerId: 'urn:botframework:azure'
}
Hope of help!
Upvotes: 2
Reputation: 15176
You can try with useParams()
hook instead as:
let { userid, username } = useParams();
Or rename as the following:
let { userid: user, username: usern } = useParams();
Read further in the documentation here which states:
useParams
returns an object of key/value pairs of URL parameters. Use it to accessmatch.params
of the current<Route>
.
Or you can also use useLocation()
hook as:
const { search } = useLocation();
const { userid, username } = search;
Read from the documentation:
The
useLocation
hook returns the location object that represents the current URL. You can think about it like auseState
that returns a new location whenever the URL changes.
Upvotes: 0