CODEWITHSUNDEEP
javascriptreactjsreact-hooksbotframeworkweb-chat
samueljohnpaul
samueljohnpaul

Reputation: 37

Passing Username and UserID Parameter to WebChat using WebChat Hooks API

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

Answers (2)

Steven Kanberg
Steven Kanberg

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&hellip;</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

norbitrial
norbitrial

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 access match.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 a useState that returns a new location whenever the URL changes.

Upvotes: 0

Related Questions