Which parameter we can use for window.WebChat.render WebChat so that provide custom URL parameters? using Azure Bot Frameworks Nodejs

Pass Custom Parameters from webchat control to bot framework which one is related to bot URL, we want to fetch/render? i.e. more detailed example scenario:

window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({
            token: token,
            ....
            ...
            customUrl : "mybot.net?q1=abc&&q2=xyz
        }),
        styleSet: styleSet,
        store: store
    }, document.getElementById('webchat'));
    document.querySelector('#webchat > *').focus();

is that possible to pass different url parameters along with token, i.e. so that bot render the specific functionalities on the basis of parameters i.e. for q2=xyz sports related questions card.

Solution

No, it is not possible to send specific parameters when creating your Direct Line object. The Direct Line parameters are proprietary to that service - there would be no way to retrieve any custom values you sent.

However, the accepted method for sending data between the Web Chat client / user and the bot is to use the Web Chat store and the dispatch() function. The store broadcasts a variety of actions, such as DIRECT_LINE/CONNECT_FULFILLED and DIRECT_LINE/INCOMING_ACTIVITY (among others), that allows you to perform functions when triggered.

In your case (not knowing the full details), you may want to send the values as an event after Web Chat loads. The code would look something like this:

<script>
  (async function () {
    const store = window.WebChat.createStore( {}, ( { dispatch } ) => next => async action => {
      if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
        console.log('Event dispatched');
        dispatch( {
          type: 'WEB_CHAT/SEND_EVENT',
          payload: {
            name: 'CUSTOM_PARAMETERS',
            value: { q1: 'abc', q2: 'xyz' }
          }
        } )
      }

      return next(action);
    });

    [...]

    window.WebChat.renderWebChat(
       directLine: window.WebChat.createDirectLine({ token }),
      store: store
      />,
    document.getElementById( 'webchat' );
    )
  })
</script>

In your bot, you would utilize the onEvent() activity handler to capture the dispatched event:

this.onEvent = async (context, next) => {
  console.log('Event activity detected');

  const { activity } = context;

  if (activity && activity.name === 'CUSTOM_PARAMETERS') {
    await context.sendActivity('Custom parameters received!');
  }

  await next();
};

If you have your bot backend on C# you will receive your custom parameters on the OnEventActivityAsync method

protected override async Task OnEventActivityAsync(ITurnContext<IEventActivity> turnContext, CancellationToken cancellationToken)
{
     if(turnContext.Activity.Name == "CUSTOM_PARAMETERS")
       {
          await turnContext.SendActivityAsync($" Your custom parameters are: {turnContext.Activity.Value}", cancellationToken: cancellationToken);
       }
}

There are a variety of samples you can reference that detail how to implement different functionalities, including how to send, receive, and act on specific points of data in Web Chat.

Hope of help!